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} ); };