Add delete course action, UI column, and confirmation dialog (#41)

Co-authored-by: Joshua Silva <72359611+joshuasilva414@users.noreply.github.com>

Author: brandonkoeck

package.json

@@ -19,6 +19,7 @@
   ],
   "dependencies": {
     "@libsql/client": "^0.15.15",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-checkbox": "^1.3.3",

pnpm-lock.yaml

@@ -0,0 +1,23 @@
+"use server";
+
+import { createSafeActionClient } from "next-safe-action";
+import { z } from "zod";
+import { db } from "@/db";
+import { courses } from "@/db/schema";
+import { eq } from "drizzle-orm";
+
+const actionClient = createSafeActionClient();
+
+export const deleteCourseAction = actionClient
+  .schema(
+    z.object({
+      id: z.number(),
+    })
+  )
+  .action(async ({ parsedInput }) => {
+    const { id } = parsedInput;
+
+    await db.delete(courses).where(eq(courses.id, id));
+
+    return { success: true };
+  });

src/actions/delete-course.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Table,
   TableBody,
@@ -7,66 +9,107 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-// dummy course array
+import { Button } from "@/components/ui/button";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+import { deleteCourseAction } from "@/actions/delete-course";
+import { useTransition } from "react";
+
+// Temporary placeholder data until backend fetch is added
 const dummyCourses = [
-  {
-    id: "1",
-    title: "Intro to Python",
-    description: "Learn Python for beginners",
-    status: "published",
-  },
-  {
-    id: "2",
-    title: "Web Development Basics",
-    description: "Web dev fundamentals",
-    status: "published",
-  },
-  {
-    id: "3",
-    title: "Data Structures",
-    description: "Learn about core data structures",
-    status: "unpublished",
-  },
-  {
-    id: "4",
-    title: "Advanced JavaScript",
-    description: "Advanced topics in JavaScript",
-    status: "published",
-  },
-  {
-    id: "5",
-    title: "React Fundamentals",
-    description: "Build modern web apps with React",
-    status: "unpublished",
-  },
+  { id: 1, title: "Intro to Python", description: "Learn Python", status: "published" },
+  { id: 2, title: "Web Development Basics", description: "Web dev fundamentals", status: "published" },
+  { id: 3, title: "Data Structures", description: "Core data structures", status: "unpublished" },
+  { id: 4, title: "Advanced JavaScript", description: "Advanced JS topics", status: "published" },
+  { id: 5, title: "React Fundamentals", description: "React basics", status: "unpublished" },
 ];
 
-// admin course page setup
 export default function AdminCoursesPage() {
+  const [isPending, startTransition] = useTransition();
+
+  // Calls the Safe Action to delete a course by ID
+  function handleDelete(id: number) {
+    startTransition(() => {
+      deleteCourseAction({ id });
+    });
+  }
+
   return (
     <div className="container mx-auto py-10">
-      <h1 className="text-3xl font-bold mb-8">Admin Data Table</h1>
-      
+      <h1 className="text-3xl font-bold mb-8">Admin Courses</h1>
+
+      {/* Table of course data rendered from placeholder array */}
       <div className="rounded-md border">
         <Table>
           <TableHeader>
             <TableRow>
               <TableHead>Title</TableHead>
               <TableHead>Description</TableHead>
               <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
             </TableRow>
           </TableHeader>
+
           <TableBody>
             {dummyCourses.map((course) => (
               <TableRow key={course.id}>
                 <TableCell>{course.title}</TableCell>
                 <TableCell>{course.description}</TableCell>
                 <TableCell>{course.status}</TableCell>
+
+                {/* Delete button wrapped in confirmation dialog */}
+                <TableCell className="text-right">
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button variant="destructive" size="sm">
+                        Delete
+                      </Button>
+                    </AlertDialogTrigger>
+
+                    {/* Confirmation modal to prevent accidental deletion */}
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>
+                          Delete “{course.title}”?
+                        </AlertDialogTitle>
+
+                        <AlertDialogDescription>
+                          This action cannot be undone.
+                          It will permanently delete this course and all related data.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+
+                        {/* Executes the delete action when confirmed */}
+                        <AlertDialogAction
+                          disabled={isPending}
+                          onClick={() => handleDelete(course.id)}
+                        >
+                          {isPending ? "Deleting..." : "Delete"}
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </TableCell>
               </TableRow>
             ))}
           </TableBody>
+
         </Table>
       </div>
     </div>
   );
-}
+}