Feature: Delete file/folder

PreciousOritsedere · PreciousOritsedere · commit a1f16d5e3949 · 2025-11-20T16:16:50.000Z
diff --git a/app/components/DeleteConfirmDialog.tsx b/app/components/DeleteConfirmDialog.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import Modal from "./shared/Modal";
+import Button from "./shared/Button";
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { FileItemData } from "./FileItem";
+
+interface DeleteConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  file: FileItemData | null;
+  onConfirm: () => void;
+  isDeleting?: boolean;
+}
+
+export default function DeleteConfirmDialog({
+  isOpen,
+  onClose,
+  file,
+  onConfirm,
+  isDeleting = false,
+}: DeleteConfirmDialogProps) {
+  if (!file) return null;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`Delete ${file.type === "folder" ? "Folder" : "File"}`}
+      maxWidth="md"
+      footer={
+        <div className="flex justify-end gap-2">
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            disabled={isDeleting}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            onClick={onConfirm}
+            isLoading={isDeleting}
+            disabled={isDeleting}
+            className="bg-red-600 hover:bg-red-700 text-white"
+          >
+            Delete
+          </Button>
+        </div>
+      }
+    >
+      <section className="py-4">
+        <div className="flex items-start gap-3">
+          <ExclamationTriangleIcon className="h-6 w-6 text-red-600 flex-shrink-0 mt-0.5" />
+          <div className="flex-1">
+            <p className="text-sm text-gray-700 mb-2">
+              Are you sure you want to delete{" "}
+              <span className="font-medium">"{file.name}"</span>?
+            </p>
+            {file.type === "folder" && (
+              <p className="text-sm text-gray-500">
+                This will permanently delete the folder and all its contents. This action cannot be undone.
+              </p>
+            )}
+            {file.type === "file" && (
+              <p className="text-sm text-gray-500">
+                This action cannot be undone.
+              </p>
+            )}
+          </div>
+        </div>
+      </section>
+    </Modal>
+  );
+}
+
diff --git a/app/components/FileItem.tsx b/app/components/FileItem.tsx
@@ -26,6 +26,7 @@ interface FileItemProps {
   onCopy?: (file: FileItemData) => void;
   onMove?: (file: FileItemData) => void;
   onDownload?: (file: FileItemData) => void;
+  onDelete?: (file: FileItemData) => void;
   isSelected?: boolean;
 }
 
@@ -39,6 +40,7 @@ export default function FileItem({
   onCopy,
   onMove,
   onDownload,
+  onDelete,
   isSelected = false,
 }: FileItemProps) {
   const [isHovered, setIsHovered] = useState(false);
@@ -136,7 +138,7 @@ export default function FileItem({
             onDownload={onDownload}
             onCopy={onCopy}
             onMove={onMove}
-            onDelete={(f) => console.log("Delete:", f.name)}
+            onDelete={onDelete}
           />
         )}
         <div className="mb-1 flex h-12 w-12 items-center justify-center sm:mb-2 sm:h-16 sm:w-16">
@@ -184,7 +186,7 @@ export default function FileItem({
           onDownload={onDownload}
           onCopy={onCopy}
           onMove={onMove}
-          onDelete={(f) => console.log("Delete:", f.name)}
+          onDelete={onDelete}
         />
       )}
     </section>
diff --git a/app/components/FileList.tsx b/app/components/FileList.tsx
@@ -15,6 +15,7 @@ interface FileListProps {
   onFileCopy?: (file: FileItemData) => void;
   onFileMove?: (file: FileItemData) => void;
   onFileDownload?: (file: FileItemData) => void;
+  onFileDelete?: (file: FileItemData) => void;
   selectedFileIds: string[];
 }
 
@@ -30,6 +31,7 @@ export default function FileList({
   onFileCopy,
   onFileMove,
   onFileDownload,
+  onFileDelete,
   selectedFileIds,
 }: FileListProps) {
   const [view, setView] = useState<"grid" | "list">(() => {
@@ -68,6 +70,7 @@ export default function FileList({
                 onCopy={onFileCopy}
                 onMove={onFileMove}
                 onDownload={onFileDownload}
+                onDelete={onFileDelete}
                 isSelected={selectedFileIds.includes(file.id)}
               />
             ))}
@@ -86,6 +89,7 @@ export default function FileList({
                 onCopy={onFileCopy}
                 onMove={onFileMove}
                 onDownload={onFileDownload}
+                onDelete={onFileDelete}
                 isSelected={selectedFileIds.includes(file.id)}
               />
             ))}
diff --git a/app/components/FileManager.tsx b/app/components/FileManager.tsx
@@ -13,6 +13,7 @@ import NewFolderDialog from "./NewFolderDialog";
 import RenameDialog from "./RenameDialog";
 import PreviewModal from "./PreviewModal";
 import MoveDialog from "./MoveDialog";
+import DeleteConfirmDialog from "./DeleteConfirmDialog";
 import FileUploadHandler from "./FileUploadHandler";
 import { FileItemData } from "./FileItem";
 import LoadingSpinner from "./shared/LoadingSpinner";
@@ -25,6 +26,8 @@ import {
   copyFolderResource,
   downloadFile,
   downloadFolderAsZip,
+  deleteFileResource,
+  deleteFolderResource,
 } from "../lib/helpers";
 
 
@@ -51,6 +54,9 @@ export default function FileManager() {
   const [fileToPreview, setFileToPreview] = useState<FileItemData | null>(null);
   const [showMoveDialog, setShowMoveDialog] = useState(false);
   const [fileToMove, setFileToMove] = useState<FileItemData | null>(null);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [fileToDelete, setFileToDelete] = useState<FileItemData | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const [savedUrl, setSavedUrl] = useState<string | null>(() => {
     if (typeof window === "undefined") return null;
@@ -264,6 +270,47 @@ export default function FileManager() {
     setRefreshKey((prev) => prev + 1);
   };
 
+  const handleDelete = (file: FileItemData) => {
+    setFileToDelete(file);
+    setShowDeleteDialog(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!fileToDelete) {
+      return;
+    }
+
+    setIsDeleting(true);
+    const toastId = toast.loading(
+      `Deleting "${fileToDelete.name}"...`
+    );
+
+    try {
+      const { fetch: fetchFn } = getAuthenticatedSession();
+      
+      if (fileToDelete.type === "folder") {
+        await deleteFolderResource(fileToDelete.url, fetchFn);
+      } else {
+        await deleteFileResource(fileToDelete.url, fetchFn);
+      }
+      
+      toast.success(`Deleted "${fileToDelete.name}"`, { id: toastId });
+      setShowDeleteDialog(false);
+      setFileToDelete(null);
+      setRefreshKey((prev) => prev + 1);
+    } catch (error) {
+      console.error("Failed to delete resource:", error);
+      toast.error(
+        error instanceof Error
+          ? `Failed to delete: ${error.message}`
+          : "Failed to delete resource",
+        { id: toastId }
+      );
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
   const handleDownload = async (file: FileItemData) => {
     if (!file) {
       return;
@@ -500,6 +547,7 @@ export default function FileManager() {
                   onFileCopy={handleCopy}
                   onFileMove={handleMove}
                   onFileDownload={handleDownload}
+                  onFileDelete={handleDelete}
                   selectedFileIds={selectedFileIds}
                 />
               </div>
@@ -554,6 +602,16 @@ export default function FileManager() {
           currentLocationUrl={getCurrentLocationUrl()}
           onMoved={handleMoved}
         />
+        <DeleteConfirmDialog
+          isOpen={showDeleteDialog}
+          onClose={() => {
+            setShowDeleteDialog(false);
+            setFileToDelete(null);
+          }}
+          file={fileToDelete}
+          onConfirm={handleDeleteConfirm}
+          isDeleting={isDeleting}
+        />
         <FileUploadHandler
           currentContainerUrl={containerUrlToBrowse}
           onUploadComplete={handleFileUploaded}
diff --git a/app/lib/helpers/deleteUtils.ts b/app/lib/helpers/deleteUtils.ts
@@ -0,0 +1,125 @@
+import {
+  deleteFile,
+  getSolidDataset,
+  getContainedResourceUrlAll,
+  isContainer,
+  UrlString,
+} from "@inrupt/solid-client";
+import { ensureTrailingSlash } from "./copyUtils";
+
+/**
+ * Recursively deletes all contents of a folder, then deletes the folder itself
+ */
+async function deleteFolderContents(
+  folderUrl: string,
+  fetchFn: typeof fetch,
+  visited: Set<string> = new Set()
+): Promise<void> {
+  const normalizedUrl = ensureTrailingSlash(folderUrl);
+  
+  // Prevent infinite loops
+  if (visited.has(normalizedUrl)) {
+    return;
+  }
+  visited.add(normalizedUrl);
+
+  try {
+    const dataset = await getSolidDataset(normalizedUrl as UrlString, { fetch: fetchFn });
+    const containedResources = getContainedResourceUrlAll(dataset);
+
+    // Delete all contained resources
+    for (const resourceUrl of containedResources) {
+      try {
+        if (isContainer(resourceUrl)) {
+          // It's a folder - recursively delete its contents first, then the folder
+          await deleteFolderContents(resourceUrl, fetchFn, visited);
+          // Delete the folder itself
+          await deleteFile(resourceUrl as UrlString, { fetch: fetchFn });
+          
+          // Also delete the .meta file if it exists
+          try {
+            const metaUrl = `${resourceUrl}.meta` as UrlString;
+            await deleteFile(metaUrl, { fetch: fetchFn });
+          } catch {
+            // Ignore if .meta file doesn't exist
+          }
+        } else {
+          // It's a file - delete it
+          await deleteFile(resourceUrl as UrlString, { fetch: fetchFn });
+          
+          // Also delete the .meta file if it exists
+          try {
+            const metaUrl = `${resourceUrl}.meta` as UrlString;
+            await deleteFile(metaUrl, { fetch: fetchFn });
+          } catch {
+            // Ignore if .meta file doesn't exist
+          }
+        }
+      } catch (error) {
+        console.warn(`Failed to delete resource ${resourceUrl}:`, error);
+       
+      }
+    }
+  } catch (error) {
+    console.error(`Failed to access folder ${folderUrl}:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Deletes a file resource
+ */
+export async function deleteFileResource(
+  fileUrl: string,
+  fetchFn: typeof fetch
+): Promise<void> {
+  try {
+    // Delete the file
+    await deleteFile(fileUrl as UrlString, { fetch: fetchFn });
+    
+    // Also try to delete the .meta file if it exists
+    try {
+      const metaUrl = `${fileUrl}.meta` as UrlString;
+      await deleteFile(metaUrl, { fetch: fetchFn });
+    } catch {
+      // Ignore if .meta file doesn't exist
+    }
+  } catch (error) {
+    console.error("Failed to delete file:", error);
+    throw new Error(
+      `Failed to delete file: ${error instanceof Error ? error.message : "Unknown error"}`
+    );
+  }
+}
+
+/**
+ * Deletes a folder resource and all its contents recursively
+ */
+export async function deleteFolderResource(
+  folderUrl: string,
+  fetchFn: typeof fetch
+): Promise<void> {
+  try {
+    const normalizedUrl = ensureTrailingSlash(folderUrl);
+    
+    // First, delete all contents recursively
+    await deleteFolderContents(normalizedUrl, fetchFn);
+    
+    // Then delete the folder itself
+    await deleteFile(normalizedUrl as UrlString, { fetch: fetchFn });
+    
+    // Also try to delete the .meta file if it exists
+    try {
+      const metaUrl = `${normalizedUrl}.meta` as UrlString;
+      await deleteFile(metaUrl, { fetch: fetchFn });
+    } catch {
+      // Ignore if .meta file doesn't exist
+    }
+  } catch (error) {
+    console.error("Failed to delete folder:", error);
+    throw new Error(
+      `Failed to delete folder: ${error instanceof Error ? error.message : "Unknown error"}`
+    );
+  }
+}
+
diff --git a/app/lib/helpers/index.ts b/app/lib/helpers/index.ts
@@ -10,4 +10,5 @@ export * from "./sessionUtils";
 export * from "./metaFileUtils";
 export * from "./copyUtils";
 export * from "./downloadUtils";
+export * from "./deleteUtils";
 
