delete resource from list

public/locales/en/translations.json

@@ -41,7 +41,8 @@
     },
     "Edit": "Edit",
     "More": "More",
-    "OpenInNewTab": "Open in new tab"
+    "OpenInNewTab": "Open in new tab",
+    "Delete": "Delete"
   },
   "Menu": {
     "Dashboard": "Dashboard",

public/locales/ro/translations.json

@@ -32,7 +32,8 @@
     },
     "Edit": "Editează",
     "More": "Mai mult",
-    "OpenInNewTab": "Deschide într-un tab nou"
+    "OpenInNewTab": "Deschide într-un tab nou",
+    "Delete": "Șterge"
   },
   "Menu": {
     "Dashboard": "Dashboard",

src/features/resources/edit/components/ResourceComponent.js

@@ -15,8 +15,9 @@ import { makeStyles } from "@material-ui/core/styles";
 import style from "../styles";
 import ResourcePreviewComponent from "./ResourcePreviewComponent";
 import MimeTypeComponent from "./MimeTypeComponent";
-import DeleteDialog from "./DeleteDialog";
+import useResourceDeleteDialog from "../../hooks/useResourceDeleteDialog";
 import { onTextFieldChange } from "../../../../utils/adapters";
+import { useHistory } from "react-router-dom";
 
 const useStyles = makeStyles(style);
 
@@ -25,10 +26,17 @@ const ResourceComponent = ({
   mimeTypes,
   resourceCategories,
   onPropertyChange,
-  deleteProps,
-  processing
+  processing,
+  setProcessing
 }) => {
   const classes = useStyles();
+  const history = useHistory();
+  const {
+    component: ResourceDeleteDialog,
+    handleOpen: handleOpenDeleteDialog
+  } = useResourceDeleteDialog(resource, setProcessing, () =>
+    history.push("/resources")
+  );
 
   return (
     <>
@@ -138,7 +146,7 @@ const ResourceComponent = ({
                 color="secondary"
                 className={classes.button}
                 startIcon={<DeleteIcon />}
-                onClick={deleteProps.onOpen}
+                onClick={handleOpenDeleteDialog}
                 disabled={!!processing}
               >
                 {processing === "delete" ? "Deleting" : "Delete"}
@@ -156,7 +164,7 @@ const ResourceComponent = ({
           </Grid>
         </Grid>
       </Paper>
-      <DeleteDialog {...deleteProps} title={resource.resourceName} />
+      {ResourceDeleteDialog}
     </>
   );
 };
@@ -166,8 +174,8 @@ ResourceComponent.propTypes = {
   mimeTypes: PropTypes.array.isRequired,
   resourceCategories: PropTypes.array.isRequired,
   onPropertyChange: PropTypes.func.isRequired,
-  deleteProps: PropTypes.object.isRequired,
-  processing: PropTypes.bool.isRequired
+  processing: PropTypes.string,
+  setProcessing: PropTypes.func.isRequired
 };
 
 export default ResourceComponent;

src/features/resources/edit/components/ResourceContainer.js

@@ -15,12 +15,11 @@ const ResourceContainer = () => {
   const [loading, setLoading] = useState(false);
   const [mimeTypes, setMimeTypes] = useState(null);
   const [resourceCategories, setResourceCategories] = useState(null);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [processing, setProcessing] = useState(null);
 
   const classes = useStyles();
   const params = useParams();
-  const { getResource, deleteResource } = useResourcesApi();
+  const { getResource } = useResourcesApi();
   const { getMimeTypes, getResourceCategories } = useDictionariesApi();
   const { success } = useToast();
 
@@ -48,15 +47,6 @@ const ResourceContainer = () => {
     setState((prev) => ({ ...prev, [prop]: value }));
   };
 
-  const handleDelete = async (resourceId) => {
-    setProcessing("delete");
-    const response = await deleteResource(resourceId);
-    if (response && response.resourceId === state.resourceId)
-      success(`Resource '${state.resourceName}' was successfully deleted.`);
-    setProcessing(null);
-    setDeleteDialogOpen(false);
-  };
-
   if (loading || !state || !mimeTypes || !resourceCategories)
     return <LoadingText lines={15} onPaper />;
 
@@ -69,13 +59,8 @@ const ResourceContainer = () => {
           mimeTypes={mimeTypes}
           resourceCategories={resourceCategories}
           onPropertyChange={handlePropertyChange}
-          deleteProps={{
-            open: deleteDialogOpen,
-            onOpen: () => setDeleteDialogOpen(true),
-            onClose: () => setDeleteDialogOpen(false),
-            onConfirm: () => handleDelete(state.resourceId)
-          }}
           processing={processing}
+          setProcessing={setProcessing}
         />
       </div>
     </>

src/features/resources/hooks/components/DeleteDialog.js

@@ -37,7 +37,7 @@ DeleteDialog.propTypes = {
   open: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string
 };
 
 export default DeleteDialog;

src/features/resources/hooks/useResourceDeleteDialog.js

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { useResourcesApi } from "../api";
+import DeleteDialog from "./components/DeleteDialog";
+import { useToast } from "../../../hooks";
+
+const useResourceDeleteDialog = (resource, setProcessing, onComplete) => {
+  const [state, setState] = useState(
+    resource ?? { resourceId: null, resourceName: null }
+  );
+  const [deleteDialogOpen, setOpen] = useState(false);
+
+  const { deleteResource } = useResourcesApi();
+  const { success } = useToast();
+
+  const handleDelete = async (resourceId) => {
+    setProcessing && setProcessing("delete");
+    const response = await deleteResource(resourceId);
+    if (response && response.resourceId === state.resourceId) {
+      success(`Resource '${state.resourceName}' was successfully deleted.`);
+      setProcessing && setProcessing(null);
+      setOpen(false);
+      onComplete && onComplete(state);
+    }
+  };
+
+  return {
+    component: (
+      <DeleteDialog
+        title={state.resourceName}
+        open={deleteDialogOpen}
+        onClose={() => setOpen(false)}
+        onConfirm={() => handleDelete(state.resourceId)}
+      />
+    ),
+    handleOpen: (_event, resource) => {
+      resource && setState(resource);
+      setOpen(true);
+    }
+  };
+};
+
+export default useResourceDeleteDialog;

src/features/resources/list/components/ResourcesContainer.js

@@ -12,7 +12,8 @@ import {
   EditOutlined,
   FileCopyOutlined,
   OpenInNewOutlined,
-  CloudDownloadOutlined
+  CloudDownloadOutlined,
+  DeleteOutlined
 } from "@material-ui/icons";
 import {
   useToast,
@@ -20,6 +21,7 @@ import {
   useFileDownload
 } from "../../../../hooks";
 import { useHistory } from "react-router-dom";
+import useResourceDeleteDialog from "../../hooks/useResourceDeleteDialog";
 
 const __ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];
 const __RESOURCE_NAME_MAX_LENGTH = 35;
@@ -41,6 +43,12 @@ const ResourcesContainer = () => {
   const { secureUrl } = useResourceSecurity();
   const { download } = useFileDownload();
   const history = useHistory();
+  const {
+    component: ResourceDeleteDialog,
+    handleOpen: handleOpenDeleteDialog
+  } = useResourceDeleteDialog(null, null, () =>
+    changeFilters(defaultResourcesFilters)
+  );
 
   useEffect(() => {
     getResourceCategories().then((r) => setResourceCategories(r));
@@ -135,9 +143,19 @@ const ResourcesContainer = () => {
         icon: CloudDownloadOutlined,
         tooltip: t("Generic.Download"),
         top: false
+      },
+      {
+        code: "delete",
+        effect: (event, resource) => {
+          handleOpenDeleteDialog(event, resource);
+          event.preventDefault();
+        },
+        icon: DeleteOutlined,
+        tooltip: t("Generic.Delete"),
+        top: false
       }
     ],
-    [t, info, secureUrl, history, download, prepareUrl]
+    [t, info, secureUrl, history, download, prepareUrl, handleOpenDeleteDialog]
   );
 
   const columns = useMemo(
@@ -358,7 +376,6 @@ const ResourcesContainer = () => {
   return (
     <>
       <PageTitle title={t("Resource.List.Title")} />
-
       <MUIDataTable
         title={t("Resource.List.SubTitle")}
         columns={columns}
@@ -424,6 +441,7 @@ const ResourcesContainer = () => {
           }
         }}
       />
+      {ResourceDeleteDialog}
     </>
   );
 };