Adding CustomDeleteButton and CustomBulkDeleteButton to delete files on firestore automatically

Author: ecunniet

src-demo/src/App.js

@@ -27,7 +27,7 @@ try {
 }
 
 const firebaseApp = firebase.initializeApp(firebaseConfig);
-
+export const storage = firebase.storage(firebaseApp)
 console.log({firebaseConfig, firebaseApp});
 
 const authProvider = FirebaseAuthProvider(firebaseConfig);

src-demo/src/CustomDeleteButtons.js

@@ -0,0 +1,96 @@
+import {storage} from './App'
+
+import {
+    useRecordContext,
+    DeleteButton,
+    BulkDeleteButton,
+    useListContext
+} from 'react-admin'
+
+
+// IMPORTANT COMMENT
+// You can't delete the folder because is deletes itself
+// when you remove all the elements inside of it
+function deleteFileFirestore(fileURL) {
+    let fileRef = storage.refFromURL(fileURL)
+
+    // Delete the file using the delete() method 
+    fileRef.delete().then(function () {
+        // File deleted successfully
+        console.log("File Deleted")
+    }).catch(function (error) {
+        // Some Error occurred
+        console.log("An error occured when deleting a file.")
+    })
+}
+
+const getValueOfAnyWantedKey = (obj, wantedKey, array) => {
+
+  if (Array.isArray(obj)) {
+    for (let i = 0; i < obj.length; i++) {
+      getValueOfAnyWantedKey(obj[i], wantedKey, array)
+    }
+  }
+  else if (typeof obj === "object") {
+    for (const key in obj) {
+      if (key === wantedKey) {
+      array.push(obj[key])
+        delete obj[key]
+      }
+      getValueOfAnyWantedKey(obj[key], wantedKey, array)
+    }
+  }
+
+  return array
+}
+
+export const CustomBulkDeleteButton = (props) => {
+    const listContext = useListContext();
+
+    const filterSelectedIds = (arr1, arr2) => {
+        let res = [];
+        res = arr1.filter(el => {
+           return arr2.find(element => {
+              return element === el.id;
+           });
+        });
+        return res;
+      }
+
+    const handleDelete = () => {
+        const select = listContext.selectedIds
+
+        const result = filterSelectedIds(listContext.data, select)
+
+        result.forEach(function (el) {
+          let sources = []
+          getValueOfAnyWantedKey(el, 'src', sources)
+            // delete files in storage
+          for (const src of sources){
+            deleteFileFirestore(src)
+          }
+        })
+    }
+    return (
+         <BulkDeleteButton onClick={handleDelete} {...props}/>
+    )
+}
+
+
+export const CustomDeleteButton = (props) => {
+    const record = useRecordContext();
+
+    const handleClick = () => {
+      const sources = []
+      getValueOfAnyWantedKey(record, 'src', sources)
+      // delete files in storage
+      for (const src of sources){
+        deleteFileFirestore(src)
+      }
+        // then delete in db but if you use DeleteButton there is no use for useDelete
+    }
+
+    return <DeleteButton onClick={handleClick} {...props}/>;
+}
+
+export default CustomDeleteButton;

src-demo/src/comments.js

@@ -13,12 +13,12 @@ import {
   TextInput,
   ShowButton,
   EditButton,
-  DeleteButton,
   RichTextField,
   ReferenceField,
   SelectInput,
   ReferenceInput,
 } from "react-admin";
+import {CustomDeleteButton} from './CustomDeleteButtons'
 import { RichTextInput } from "ra-input-rich-text";
 
 export const CommentsList = (props) => (
@@ -35,7 +35,7 @@ export const CommentsList = (props) => (
       </ReferenceField>
       <ShowButton label="" />
       <EditButton label="" />
-      <DeleteButton label="" redirect={false} />
+      <CustomDeleteButton label="" redirect={false} />
     </Datagrid>
   </List>
 );

src-demo/src/posts.js

@@ -14,7 +14,6 @@ import {
   TextInput,
   ShowButton,
   EditButton,
-  DeleteButton,
   RichTextField,
   ReferenceField,
   SelectInput,
@@ -24,7 +23,12 @@ import {
   ArrayInput,
   SimpleFormIterator,
   DateInput,
+  Toolbar,
+  SaveButton,
 } from "react-admin";
+import {
+  CustomDeleteButton, 
+  CustomBulkDeleteButton} from './CustomDeleteButtons'
 import { RichTextInput } from "ra-input-rich-text";
 import { FirebaseReferenceField, FirebaseReferenceInput } from './FirebaseReferenceFields';
 
@@ -50,6 +54,7 @@ import { FirebaseReferenceField, FirebaseReferenceInput } from './FirebaseRefere
 export const PostList = (props) => (
   <List
     {...props}
+    bulkActionButtons={<CustomBulkDeleteButton />}
     // filters={<ReferenceFilter />}
     // filter={{ updatedby: "test@example.com" }}
   >
@@ -66,7 +71,7 @@ export const PostList = (props) => (
 
       <ShowButton label="" />
       <EditButton label="" />
-      <DeleteButton label="" redirect={false} />
+      {/* <CustomDeleteButton label="" redirect={false} /> */}
     </Datagrid>
   </List>
 );
@@ -161,9 +166,18 @@ export const PostCreate = (props) => (
   </Create>
 );
 
+const ToolbarForEdit = (props) => {
+  return(
+      <Toolbar {...props} style={{justifyContent: 'space-between'}}>
+          <SaveButton />
+          <CustomDeleteButton />
+      </Toolbar>
+  )
+}
+
 export const PostEdit = (props) => (
   <Edit {...props}>
-    <SimpleForm>
+    <SimpleForm toolbar={<ToolbarForEdit />}>
       <TextInput disabled source="id" />
       <DateField source="createdate" />
       <DateField source="lastupdate" />

src-demo/src/users.js

@@ -14,8 +14,8 @@ import {
   TextInput,
   ShowButton,
   EditButton,
-  DeleteButton,
 } from "react-admin";
+import {CustomDeleteButton, } from './CustomDeleteButtons'
 
 const UserFilter = (props) => (
   <Filter {...props}>
@@ -32,7 +32,7 @@ export const UserList = (props) => (
       <TextField source="lastupdate" />
       <ShowButton label="" />
       <EditButton label="" />
-      <DeleteButton label="" redirect={false}/>
+      <CustomDeleteButton label="" redirect={false}/>
     </Datagrid>
   </List>
 );