feat: pod deletion (#279)

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<void> {
+  return fdp.personalStorage.delete(podName);
+}
+
 export function getFdpPathByDirectory(directory: string): string {
   if (directory === 'root') {
     return '/';

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<ConfirmDeleteModalProps> = ({
   closeModal,
   type,
   name,
+  error,
   deleteHandler,
 }) => {
   const [loading, setLoading] = useState(false);
   const { intl } = useLocales();
 
+  useEffect(() => {
+    setLoading(false);
+  }, [error]);
+
   useEffect(() => {
     setLoading(false);
   }, [showModal]);
@@ -39,8 +45,8 @@ const ConfirmDeleteModal: FC<ConfirmDeleteModalProps> = ({
         }
       }}
       headerIcon={{
-        light: <DeleteLightIcon />,
-        dark: <DeleteDarkIcon />,
+        light: <DeleteLightIcon width="26" />,
+        dark: <DeleteDarkIcon width="26" />,
       }}
       headerTitle={intl.get('CONFIRM_DELETE')}
     >
@@ -52,6 +58,12 @@ const ConfirmDeleteModal: FC<ConfirmDeleteModalProps> = ({
         </p>
       </div>
 
+      {!loading && error && (
+        <div className="my-2 text-color-status-negative-day text-xs text-center leading-none">
+          {error}
+        </div>
+      )}
+
       {loading && (
         <div className="mt-3">
           <Spinner />

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 (
+    <ConfirmDeleteModal
+      showModal={showModal}
+      closeModal={onClose}
+      type="pod"
+      name={activePod}
+      deleteHandler={handleDeletePod}
+      error={errorMessage}
+    />
+  );
+};
+
+export default PodDeleteModal;

src/components/Modals/PreviewFileModal/PreviewFileModal.tsx

@@ -240,9 +240,9 @@ const PreviewFileModal: FC<PreviewModalProps> = ({
             className="cursor-pointer"
           >
             {theme === 'light' ? (
-              <DeleteLightIcon className="inline-block" />
+              <DeleteLightIcon className="inline-block" width="26" />
             ) : (
-              <DeleteDarkIcon className="inline-block" />
+              <DeleteDarkIcon className="inline-block" width="26" />
             )}
           </span>
         </div>

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<UpdateDriveProps> = ({ 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,20 @@ const DriveActionBar: FC<UpdateDriveProps> = ({ updateDrive }) => {
               className="mx-1"
               onClick={() => setShowCreateFolderModal(true)}
             />
+
+            <Button
+              type="button"
+              variant="primary"
+              icon={
+                theme === 'light' ? (
+                  <DeleteLightIcon width="15" />
+                ) : (
+                  <DeleteDarkIcon width="15" />
+                )
+              }
+              className="mx-1"
+              onClick={() => setShowDeletePodModal(true)}
+            />
           </div>
         )}
       </div>
@@ -108,6 +131,15 @@ const DriveActionBar: FC<UpdateDriveProps> = ({ updateDrive }) => {
           updateDrive={updateDrive}
         />
       ) : null}
+
+      {showDeletePodModal ? (
+        <PodDeleteModal
+          showModal={showDeletePodModal}
+          onClose={() => setShowDeletePodModal(false)}
+          onDelete={() => setShowDeletePodModal(false)}
+          refreshPods={refreshPods}
+        />
+      ) : null}
     </div>
   );
 };

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<DriveActionBarMobileProps> = ({
   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<DriveActionBarMobileProps> = ({
           <CreateFolderDarkIcon />,
           () => setShowCreateFolderModal(true)
         )}
+        {DriveActionBarItem(
+          theme,
+          intl.get('DELETE'),
+          <DeleteLightIcon width="15" />,
+          <DeleteDarkIcon width="15" />,
+          () => setShowDeletePodModal(true)
+        )}
       </div>
       {showCreatePodModal ? (
         <CreatePodModal
@@ -125,6 +138,15 @@ const DriveActionBarMobile: FC<DriveActionBarMobileProps> = ({
           updateDrive={updateDrive}
         />
       ) : null}
+
+      {showDeletePodModal && (
+        <PodDeleteModal
+          showModal={showDeletePodModal}
+          onClose={() => setShowDeletePodModal(false)}
+          onDelete={() => setShowDeletePodModal(false)}
+          refreshPods={refreshPods}
+        />
+      )}
     </>
   );
 };

src/pages/drive/index.tsx

@@ -227,7 +227,10 @@ const Drive: FC = () => {
         toggleView={handleToggleView}
         toggleSort={handleToggleSort}
       />
-      <DriveActionBar updateDrive={handleUpdateDrive} />
+      <DriveActionBar
+        updateDrive={handleUpdateDrive}
+        refreshPods={handleFetchPods}
+      />
       {search.length > 0 ? (
         <div className="flex justify-start items-center mt-10 mb-5">
           <span>