From 213fca98034e825ae14c650c0c7d4e0cc84a910b Mon Sep 17 00:00:00 2001 From: Vladan Date: Mon, 28 Aug 2023 13:42:23 +0200 Subject: [PATCH 1/2] feat: pod deletion (#279) --- src/api/pod.ts | 4 ++ .../ConfirmDeleteModal/ConfirmDeleteModal.tsx | 12 ++++ .../Modals/PodDeleteModal/PodDeleteModal.tsx | 60 +++++++++++++++++++ .../DriveActionBar/DriveActionBar.tsx | 30 +++++++++- .../DriveActionBar/DriveActionBarMobile.tsx | 22 +++++++ src/pages/drive/index.tsx | 5 +- 6 files changed, 131 insertions(+), 2 deletions(-) create mode 100644 src/components/Modals/PodDeleteModal/PodDeleteModal.tsx diff --git a/src/api/pod.ts b/src/api/pod.ts index 195fe655..8c71a8af 100644 --- a/src/api/pod.ts +++ b/src/api/pod.ts @@ -24,6 +24,10 @@ export async function receivePod(fdp: FdpStorage, podReference: string) { return await fdp.personalStorage.getSharedInfo(podReference); } +export function deletePod(fdp: FdpStorage, podName: string): Promise { + return fdp.personalStorage.delete(podName); +} + export function getFdpPathByDirectory(directory: string): string { if (directory === 'root') { return '/'; diff --git a/src/components/Modals/ConfirmDeleteModal/ConfirmDeleteModal.tsx b/src/components/Modals/ConfirmDeleteModal/ConfirmDeleteModal.tsx index cb562809..c00049c7 100644 --- a/src/components/Modals/ConfirmDeleteModal/ConfirmDeleteModal.tsx +++ b/src/components/Modals/ConfirmDeleteModal/ConfirmDeleteModal.tsx @@ -13,6 +13,7 @@ interface ConfirmDeleteModalProps { closeModal: () => void; type: string; name: string; + error?: string; deleteHandler: () => void; } @@ -21,11 +22,16 @@ const ConfirmDeleteModal: FC = ({ closeModal, type, name, + error, deleteHandler, }) => { const [loading, setLoading] = useState(false); const { intl } = useLocales(); + useEffect(() => { + setLoading(false); + }, [error]); + useEffect(() => { setLoading(false); }, [showModal]); @@ -52,6 +58,12 @@ const ConfirmDeleteModal: FC = ({

+ {!loading && error && ( +
+ {error} +
+ )} + {loading && (
diff --git a/src/components/Modals/PodDeleteModal/PodDeleteModal.tsx b/src/components/Modals/PodDeleteModal/PodDeleteModal.tsx new file mode 100644 index 00000000..11c04470 --- /dev/null +++ b/src/components/Modals/PodDeleteModal/PodDeleteModal.tsx @@ -0,0 +1,60 @@ +import { useContext, useState } from 'react'; +import { ConfirmDeleteModal } from '@components/Modals'; +import { deletePod } from '@api/pod'; +import { useLocales } from '@context/LocalesContext'; +import { useFdpStorage } from '@context/FdpStorageContext'; +import PodContext from '@context/PodContext'; +import { useMatomo } from '@datapunt/matomo-tracker-react'; + +interface PodDeleteModalProps { + showModal: boolean; + refreshPods: () => void; + onClose: () => void; + onDelete: () => void; +} + +const PodDeleteModal = ({ + showModal, + refreshPods, + onClose, + onDelete, +}: PodDeleteModalProps) => { + const [errorMessage, setErrorMessage] = useState(''); + const { trackEvent } = useMatomo(); + const { intl } = useLocales(); + const { fdpClientRef } = useFdpStorage(); + const { activePod, setActivePod } = useContext(PodContext); + + const handleDeletePod = async () => { + try { + setErrorMessage(''); + await deletePod(fdpClientRef.current, activePod); + await new Promise((resolve) => setTimeout(resolve, 1000)); + trackEvent({ + category: 'Pod', + action: `Delete Pod`, + name: `Delete Pod: ${activePod}`, + documentTitle: 'Drive Page', + href: window.location.href, + }); + setActivePod(null); + refreshPods(); + onDelete(); + } catch (e) { + setErrorMessage(intl.get('GENERIC_ERROR', { message: String(e) })); + } + }; + + return ( + + ); +}; + +export default PodDeleteModal; diff --git a/src/components/NavigationBars/DriveActionBar/DriveActionBar.tsx b/src/components/NavigationBars/DriveActionBar/DriveActionBar.tsx index 8209354b..5a1dba98 100644 --- a/src/components/NavigationBars/DriveActionBar/DriveActionBar.tsx +++ b/src/components/NavigationBars/DriveActionBar/DriveActionBar.tsx @@ -17,17 +17,26 @@ import ImportDarkIcon from '@media/UI/import-dark.svg'; import CreateFolderLightIcon from '@media/UI/create-folder-light.svg'; import CreateFolderDarkIcon from '@media/UI/create-folder-dark.svg'; + +import DeleteLightIcon from '@media/UI/delete-light.svg'; +import DeleteDarkIcon from '@media/UI/delete-dark.svg'; + import PodContext from '@context/PodContext'; import { UpdateDriveProps } from '@interfaces/handlers'; import { useLocales } from '@context/LocalesContext'; +import PodDeleteModal from '@components/Modals/PodDeleteModal/PodDeleteModal'; -const DriveActionBar: FC = ({ updateDrive }) => { +export interface DriveActionBarProps extends UpdateDriveProps { + refreshPods: () => void; +} +const DriveActionBar = ({ refreshPods, updateDrive }: DriveActionBarProps) => { const { theme } = useContext(ThemeContext); const { activePod } = useContext(PodContext); const [showUploadFileModal, setShowUploadFileModal] = useState(false); const [showImportFileModal, setShowImportFileModal] = useState(false); const [showCreateFolderModal, setShowCreateFolderModal] = useState(false); + const [showDeletePodModal, setShowDeletePodModal] = useState(false); const { intl } = useLocales(); @@ -77,6 +86,16 @@ const DriveActionBar: FC = ({ updateDrive }) => { className="mx-1" onClick={() => setShowCreateFolderModal(true)} /> + +
)} @@ -108,6 +127,15 @@ const DriveActionBar: FC = ({ updateDrive }) => { updateDrive={updateDrive} /> ) : null} + + {showDeletePodModal ? ( + setShowDeletePodModal(false)} + onDelete={() => setShowDeletePodModal(false)} + refreshPods={refreshPods} + /> + ) : null} ); }; diff --git a/src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx b/src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx index e5fe3472..634d1a8a 100644 --- a/src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx +++ b/src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx @@ -20,8 +20,13 @@ import ImportDarkIcon from '@media/UI/import-dark.svg'; import CreateFolderLightIcon from '@media/UI/create-folder-light.svg'; import CreateFolderDarkIcon from '@media/UI/create-folder-dark.svg'; + +import DeleteLightIcon from '@media/UI/delete-light.svg'; +import DeleteDarkIcon from '@media/UI/delete-dark.svg'; + import { UpdateDriveProps } from '@interfaces/handlers'; import { useLocales } from '@context/LocalesContext'; +import PodDeleteModal from '@components/Modals/PodDeleteModal/PodDeleteModal'; export interface DriveActionBarMobileProps extends UpdateDriveProps { refreshPods?: () => void; @@ -60,6 +65,7 @@ const DriveActionBarMobile: FC = ({ const [showUploadFileModal, setShowUploadFileModal] = useState(false); const [showImportFileModal, setShowImportFileModal] = useState(false); const [showCreateFolderModal, setShowCreateFolderModal] = useState(false); + const [showDeletePodModal, setShowDeletePodModal] = useState(false); const { intl } = useLocales(); @@ -94,6 +100,13 @@ const DriveActionBarMobile: FC = ({ , () => setShowCreateFolderModal(true) )} + {DriveActionBarItem( + theme, + intl.get('DELETE'), + , + , + () => setShowDeletePodModal(true) + )} {showCreatePodModal ? ( = ({ updateDrive={updateDrive} /> ) : null} + + {showDeletePodModal && ( + setShowDeletePodModal(false)} + onDelete={() => setShowDeletePodModal(false)} + refreshPods={refreshPods} + /> + )} ); }; diff --git a/src/pages/drive/index.tsx b/src/pages/drive/index.tsx index 24eaa535..76b86ac2 100644 --- a/src/pages/drive/index.tsx +++ b/src/pages/drive/index.tsx @@ -227,7 +227,10 @@ const Drive: FC = () => { toggleView={handleToggleView} toggleSort={handleToggleSort} /> - + {search.length > 0 ? (
From f8063deae3b90e7d9cbfcb4a5de70723652aa9a3 Mon Sep 17 00:00:00 2001 From: Vladan Date: Mon, 28 Aug 2023 15:53:59 +0200 Subject: [PATCH 2/2] fix: pod delete style fix --- .../Modals/ConfirmDeleteModal/ConfirmDeleteModal.tsx | 4 ++-- src/components/Modals/PreviewFileModal/PreviewFileModal.tsx | 4 ++-- .../NavigationBars/DriveActionBar/DriveActionBar.tsx | 6 +++++- .../NavigationBars/DriveActionBar/DriveActionBarMobile.tsx | 4 ++-- src/media/UI/delete-dark.svg | 2 +- src/media/UI/delete-light.svg | 2 +- 6 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/Modals/ConfirmDeleteModal/ConfirmDeleteModal.tsx b/src/components/Modals/ConfirmDeleteModal/ConfirmDeleteModal.tsx index c00049c7..d8854417 100644 --- a/src/components/Modals/ConfirmDeleteModal/ConfirmDeleteModal.tsx +++ b/src/components/Modals/ConfirmDeleteModal/ConfirmDeleteModal.tsx @@ -45,8 +45,8 @@ const ConfirmDeleteModal: FC = ({ } }} headerIcon={{ - light: , - dark: , + light: , + dark: , }} headerTitle={intl.get('CONFIRM_DELETE')} > diff --git a/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx b/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx index 828a967c..4b3f571c 100644 --- a/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx +++ b/src/components/Modals/PreviewFileModal/PreviewFileModal.tsx @@ -240,9 +240,9 @@ const PreviewFileModal: FC = ({ className="cursor-pointer" > {theme === 'light' ? ( - + ) : ( - + )}
diff --git a/src/components/NavigationBars/DriveActionBar/DriveActionBar.tsx b/src/components/NavigationBars/DriveActionBar/DriveActionBar.tsx index 5a1dba98..fcd04e84 100644 --- a/src/components/NavigationBars/DriveActionBar/DriveActionBar.tsx +++ b/src/components/NavigationBars/DriveActionBar/DriveActionBar.tsx @@ -91,7 +91,11 @@ const DriveActionBar = ({ refreshPods, updateDrive }: DriveActionBarProps) => { type="button" variant="primary" icon={ - theme === 'light' ? : + theme === 'light' ? ( + + ) : ( + + ) } className="mx-1" onClick={() => setShowDeletePodModal(true)} diff --git a/src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx b/src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx index 634d1a8a..0aa62b51 100644 --- a/src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx +++ b/src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx @@ -103,8 +103,8 @@ const DriveActionBarMobile: FC = ({ {DriveActionBarItem( theme, intl.get('DELETE'), - , - , + , + , () => setShowDeletePodModal(true) )} diff --git a/src/media/UI/delete-dark.svg b/src/media/UI/delete-dark.svg index d3197739..4e8c00a7 100644 --- a/src/media/UI/delete-dark.svg +++ b/src/media/UI/delete-dark.svg @@ -1,4 +1,4 @@ - + diff --git a/src/media/UI/delete-light.svg b/src/media/UI/delete-light.svg index ee0b2332..aac71a8e 100644 --- a/src/media/UI/delete-light.svg +++ b/src/media/UI/delete-light.svg @@ -1,4 +1,4 @@ - +