Add delete document flow: RPC delete + UI integration + state updates

Author: evhuh

src/components/dashboard/ReadingGrid.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { Reading } from "@/lib/dummyData";
 import ReadingItem from "./ReadingItem";
 
@@ -8,7 +9,13 @@ interface ReadingGridProps {
 }
 
 export default function ReadingGrid({ readings }: ReadingGridProps) {
-  if (readings.length === 0) {
+  const [items, setItems] = useState(readings);
+
+  const handleDelete = (id: string) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  if (items.length === 0) {
     return (
       <div className="text-center py-12">
         <svg
@@ -36,9 +43,13 @@ export default function ReadingGrid({ readings }: ReadingGridProps) {
 
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-      {readings.map((reading) => (
+      {items.map((reading) => (
         <div key={reading.id} className="neu-outset rounded-lg">
-          <ReadingItem reading={reading} viewMode="gallery" />
+          <ReadingItem 
+          reading={reading} 
+          viewMode="gallery" 
+          onDelete={handleDelete}
+        />
         </div>
       ))}
     </div>

src/components/dashboard/ReadingItem.tsx

@@ -3,17 +3,41 @@
 import { Reading } from "@/lib/dummyData";
 import {} from "react";
 import ShareLinkButton from "@/components/ShareLinkButton";
+import { DocumentService } from "@/services/documentService";
+import { Trash } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 interface ReadingItemProps {
   reading: Reading;
   viewMode: "gallery" | "list";
+  onDelete?: (id: string) => void;
 }
 
-export default function ReadingItem({ reading, viewMode }: ReadingItemProps) {
+export default function ReadingItem({ reading, viewMode, onDelete }: ReadingItemProps) {
   // Minimal actions (share handled by icon button)
   const router = useRouter();
 
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    console.log("Attempting to delete:", reading.id);
+
+    const confirmed = window.confirm(
+      `Delete "${reading.title}"? This cannot be undone.`
+    );
+    if (!confirmed) return;
+
+    try {
+      await DocumentService.deleteDocument(reading.id);
+      onDelete?.(reading.id);
+      router.refresh();
+    } catch (err) {
+      const error = err as Error;
+      // console.error("Delete error →", error);
+      alert("Failed to delete document: " + (error.message ?? ""));
+    }
+  };
+
   const handleNavigate = () => {
     if (reading.id) {
       router.push(`/documents/${reading.id}`);
@@ -80,7 +104,15 @@ export default function ReadingItem({ reading, viewMode }: ReadingItemProps) {
                 )}
               </div>
 
-              <div className="ml-4" onClick={(e) => e.stopPropagation()}>
+              <div className="ml-4 flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+                <button
+                  onClick={handleDelete}
+                  className="p-1 text-red-500 hover:text-red-700"
+                  aria-label="Delete document"
+                >
+                  <Trash className="w-5 h-5" />
+                </button>
+
                 <ShareLinkButton documentId={reading.id} variant="icon" />
               </div>
             </div>
@@ -118,7 +150,23 @@ export default function ReadingItem({ reading, viewMode }: ReadingItemProps) {
           <h3 className="text-lg font-semibold text-gray-900 line-clamp-2">
             {reading.title}
           </h3>
-          <div className="ml-2" onClick={(e) => e.stopPropagation()}>
+          <div className="ml-2 flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+            <button
+              onClick={handleDelete}
+              aria-label="Delete document"
+              className="
+                rounded-md p-2 
+                bg-white 
+                shadow-[2px_2px_6px_#d1d5db,-2px_-2px_6px_#ffffff] 
+                hover:shadow-[1px_1px_3px_#d1d5db,-1px_-1px_3px_#ffffff] 
+                transition-shadow
+                text-red-500 hover:text-red-600
+                flex items-center justify-center
+              "
+            >
+              <Trash className="w-4 h-4" strokeWidth={2} />
+            </button>
+
             <ShareLinkButton documentId={reading.id} variant="icon" />
           </div>
         </div>

src/components/dashboard/ReadingListCondensed.tsx

@@ -4,6 +4,7 @@ import { Reading } from "@/lib/dummyData";
 import { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import ShareLinkButton from "@/components/ShareLinkButton";
+import { DocumentService } from "@/services/documentService";
 
 interface ReadingListCondensedProps {
   readings: Reading[];
@@ -30,9 +31,25 @@ export default function ReadingListCondensed({
     };
   }, []);
 
-  const handleDelete = (id: string) => {
-    console.log("Delete reading:", id);
-    // TODO: Implement actual delete functionality
+  const handleDelete = async (id: string) => {
+    const confirmed = window.confirm(
+      "Are you sure you want to permanently delete this document?"
+    );
+    if (!confirmed) return;
+
+    try {
+      await DocumentService.deleteDocument(id);
+
+      // Remove deleted item from local UI list
+      // You may be receiving `readings` via props, so update locally.
+      router.refresh(); // if you use server components OR
+      // OR update local state (better if readings is state-managed)
+      // setReadings((prev) => prev.filter((r) => r.id !== id));
+
+    } catch (err) {
+      console.error("Error deleting document:", err);
+      alert("Failed to delete document. Please try again.");
+    }
   };
 
   const toggleSelection = (id: string) => {

src/services/documentService.ts

@@ -142,18 +142,38 @@ export class DocumentService {
 
   static async deleteDocument(id: string): Promise<void> {
     try {
-      const { data: { user } } = await supabase.auth.getUser();
-      if (!user) {
-        throw new Error('User not authenticated');
-      }
-      const { error } = await supabase
-        .from('documents')
-        .delete()
-        .eq('id', id)
-        .eq('owner_id', user.id);
+      const { data: { user }, error: authError } = await supabase.auth.getUser();
+      if (authError) throw authError;
+      if (!user) throw new Error('User not authenticated');
+
+      // 1. RPC delete: deletes the row, cascades document_shares, returns storage info
+      const { data, error } = await supabase.rpc("delete_document", {
+        p_document_id: id,
+      });
+      console.log("RPC result:", { data, error });
 
       if (error) {
-        throw error;
+        console.error("RPC delete_document error:", error);
+        throw new Error(error.message);
+      }
+
+      if (!data || data.length === 0) {
+        throw new Error("Document not found or not authorized to delete.");
+      }
+
+      const { storage_bucket, storage_path } = data[0];
+
+      // 2. Frontend storage deletion
+      if (storage_bucket && storage_path) {
+        const { error: storageError } = await supabase
+          .storage
+          .from(storage_bucket)
+          .remove([storage_path]);
+
+        if (storageError) {
+          console.error("Storage delete failed:", storageError);
+          // We don't throw here because DB deletion was successful
+        }
       }
     } catch (error) {
       console.error('Error deleting document:', error);