From 50196920d348b797f7816ad2e1a7e02080f1ae94 Mon Sep 17 00:00:00 2001
From: "brandon.skewes@outlook.com" <brandon.skewes@outlook.com>
Date: Sat, 20 Dec 2025 19:41:18 +1100
Subject: [PATCH] added delete

---
 vite-project/src/App.tsx | 96 ++++++++++++++++++++++++++++++----------
 1 file changed, 73 insertions(+), 23 deletions(-)

diff --git a/vite-project/src/App.tsx b/vite-project/src/App.tsx
index 43723d8..11c6714 100644
--- a/vite-project/src/App.tsx
+++ b/vite-project/src/App.tsx
@@ -125,34 +125,51 @@ export function InputGroupDemo({ onSent }): {
   );
 }
 
-function NotesList({ notes }: { notes: Note[] }) {
+function NotesList({
+  notes,
+  onDelete,
+  deletingIds,
+}: {
+  notes: Note[];
+  onDelete?: (id: string) => void;
+  deletingIds?: Set<string>;
+}) {
   if (!notes.length) {
     return <p className="text-center">No notes yet.</p>;
   }
 
   return (
     <div className="space-y-4">
-      {notes.map((note) => (
-        <Card key={note.id}>
-          <CardHeader className="justify-end-safe">
-            <Button size="icon-sm" aria-label="Delete note" title="Delete note">
-              <Trash2Icon />
-            </Button>
-          </CardHeader>
-          <CardContent>
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>
-              {note.content}
-            </ReactMarkdown>
-          </CardContent>
-          <CardFooter>
-            <p className="text-sm text-muted-foreground">
-              {note.created_at
-                ? new Date(note.created_at).toLocaleString()
-                : "Unknown"}
-            </p>
-          </CardFooter>
-        </Card>
-      ))}
+      {notes.map((note) => {
+        const isDeleting = deletingIds?.has(note.id) ?? false;
+        return (
+          <Card key={note.id}>
+            <CardHeader className="justify-end-safe">
+              <Button
+                size="icon-sm"
+                aria-label="Delete note"
+                title="Delete note"
+                onClick={() => onDelete?.(note.id)}
+                disabled={isDeleting}
+              >
+                <Trash2Icon />
+              </Button>
+            </CardHeader>
+            <CardContent>
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {note.content}
+              </ReactMarkdown>
+            </CardContent>
+            <CardFooter>
+              <p className="text-sm text-muted-foreground">
+                {note.created_at
+                  ? new Date(note.created_at).toLocaleString()
+                  : "Unknown"}
+              </p>
+            </CardFooter>
+          </Card>
+        );
+      })}
     </div>
   );
 }
@@ -161,6 +178,7 @@ function App() {
   const [notes, setNotes] = useState<Note[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [loadError, setLoadError] = useState<string | null>(null);
+  const [deletingIds, setDeletingIds] = useState<Set<string>>(new Set());
 
   async function fetchUserNotes() {
     const resp = await fetch(`${baseUrl}/content/${username}`);
@@ -193,6 +211,34 @@ function App() {
     loadNotes();
   }
 
+  async function handleDelete(id: string) {
+    if (deletingIds.has(id)) return;
+
+    const prevNotes = notes;
+    setNotes((prev) => prev.filter((n) => n.id !== id));
+    setDeletingIds((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+
+    try {
+      await fetch(`${baseUrl}/content/${id}`, {
+        method: "DELETE",
+      });
+      setNotes((prev) => prev.filter((n) => n.id !== id));
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Unknown error";
+      setLoadError(msg);
+    } finally {
+      setDeletingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }
+  }
+
   useEffect(() => {
     loadNotes();
   }, []);
@@ -215,7 +261,11 @@ function App() {
               Failed to load notes: {loadError}
             </div>
           ) : null}
-          <NotesList notes={notes} />
+          <NotesList
+            notes={notes}
+            onDelete={handleDelete}
+            deletingIds={deletingIds}
+          />
         </div>
       </div>
     </div>