diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index ea13de5..88e6ed7 100644
--- a/public/locales/en/translations.json
+++ b/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",
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 8a3a6b2..1e7097e 100644
--- a/public/locales/ro/translations.json
+++ b/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",
diff --git a/src/features/resources/edit/components/ResourceComponent.js b/src/features/resources/edit/components/ResourceComponent.js
index 9810f64..01c483c 100644
--- a/src/features/resources/edit/components/ResourceComponent.js
+++ b/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={}
- onClick={deleteProps.onOpen}
+ onClick={handleOpenDeleteDialog}
disabled={!!processing}
>
{processing === "delete" ? "Deleting" : "Delete"}
@@ -156,7 +164,7 @@ const ResourceComponent = ({
-
+ {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;
diff --git a/src/features/resources/edit/components/ResourceContainer.js b/src/features/resources/edit/components/ResourceContainer.js
index e6ccea1..ea9855f 100644
--- a/src/features/resources/edit/components/ResourceContainer.js
+++ b/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 ;
@@ -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}
/>
>
diff --git a/src/features/resources/edit/components/DeleteDialog.js b/src/features/resources/hooks/components/DeleteDialog.js
similarity index 97%
rename from src/features/resources/edit/components/DeleteDialog.js
rename to src/features/resources/hooks/components/DeleteDialog.js
index 886d0e3..4ef413a 100644
--- a/src/features/resources/edit/components/DeleteDialog.js
+++ b/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;
diff --git a/src/features/resources/hooks/useResourceDeleteDialog.js b/src/features/resources/hooks/useResourceDeleteDialog.js
new file mode 100644
index 0000000..dc5cba4
--- /dev/null
+++ b/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: (
+ setOpen(false)}
+ onConfirm={() => handleDelete(state.resourceId)}
+ />
+ ),
+ handleOpen: (_event, resource) => {
+ resource && setState(resource);
+ setOpen(true);
+ }
+ };
+};
+
+export default useResourceDeleteDialog;
diff --git a/src/features/resources/list/components/ResourcesContainer.js b/src/features/resources/list/components/ResourcesContainer.js
index 3e1d059..ac7085d 100644
--- a/src/features/resources/list/components/ResourcesContainer.js
+++ b/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 (
<>
-
{
}
}}
/>
+ {ResourceDeleteDialog}
>
);
};