feat: add delete action to components table

ethereal-nexus-dashboard/src/components/components/table/columns.tsx

@@ -58,8 +58,8 @@ export const columns = [
   },
   {
     id: "actions",
-    cell: ({ table, row }) => (
-      <ComponentsDataTableRowActions table={table} row={row} />
+    cell: ({ row }) => (
+      <ComponentsDataTableRowActions row={row} />
     ),
   },
 ];

ethereal-nexus-dashboard/src/components/components/table/data-table-row-actions.tsx

@@ -1,56 +1,45 @@
-"use client";
+'use client'
 
-import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 
-import { Button } from "@/components/ui/button";
+import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { EyeIcon, Trash } from "lucide-react";
-import { Dialog, DialogTrigger } from "@radix-ui/react-dialog";
-import {
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { useState } from "react";
-import { toast } from "@/components/ui/use-toast";
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { EyeIcon, Trash } from 'lucide-react';
+import { Dialog, DialogTrigger } from '@radix-ui/react-dialog';
+import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useState } from 'react';
+import { toast } from '@/components/ui/use-toast';
+import { deleteComponent } from '@/data/components/actions';
+import { useRouter } from 'next/navigation';
+import { useSession } from 'next-auth/react';
 
-export function ComponentsDataTableRowActions({ table, row }) {
+export function ComponentsDataTableRowActions({ row }) {
+  const router = useRouter()
+  const {data: session } = useSession()
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
-  // FIXME type
-  const handleDeleteOk = (component: any) => {
-    const { data, setData } = table.getState();
-    if (component) {
-      fetch(`api/v1/components/${component.name}`, { method: "delete" })
-        .then(() => {
-          setData(
-            data.filter(
-              // FIXME type
-              (eachComponent: any) =>
-                component.name !== eachComponent.name,
-            ),
-          );
-          toast({
-            title: `Component ${component.name} was deleted successfully`,
-          });
-          setDeleteDialogOpen(false);
-        })
-        .catch((error) => {
-          toast({
-            title: `Component ${component.name} could not be deleted`,
-          });
-          setDeleteDialogOpen(false);
-        });
+  const handleDelete = async () => {
+    const result = await deleteComponent(row.original.id)
+
+    if(!result.success) {
+      toast({
+        title: `Component ${row.original.name} could not be deleted`,
+      });
     }
+
+    toast({
+      title: `Component ${row.original.name} was deleted successfully`,
+    });
+    setDeleteDialogOpen(false);
+    router.refresh()
   };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -95,8 +84,9 @@ export function ComponentsDataTableRowActions({ table, row }) {
                 Cancel
               </Button>
               <Button
+                disabled={session?.user?.role === 'viewer'}
                 variant="destructive"
-                onClick={() => handleDeleteOk(row.original)}
+                onClick={handleDelete}
               >
                 Delete
               </Button>

ethereal-nexus-dashboard/src/data/components/actions.ts

@@ -1,3 +1,5 @@
+'use server'
+
 import { ActionResponse, Result } from '@/data/action';
 import { z } from 'zod';
 import { actionError, actionSuccess, actionZodError } from '@/data/utils';
@@ -22,6 +24,7 @@ import {
   components,
   componentVersions,
 } from '@/data/components/schema';
+import { revalidatePath } from 'next/cache';
 
 export async function upsertComponent(
   component: ComponentToUpsert,
@@ -304,3 +307,25 @@ export async function getComponents(): ActionResponse<
     return actionError('Failed to fetch components from database.');
   }
 }
+
+export async function deleteComponent(id: string): ActionResponse<Component> {
+  try {
+    const del = await db.delete(components)
+      .where(eq(components.id, id))
+      .returning();
+
+    const safe = componentsSchema.safeParse(del);
+    if (!safe.success) {
+      return actionZodError(
+        "There's an issue with the components records.",
+        safe.error,
+      );
+    }
+
+    revalidatePath('/components')
+    return actionSuccess(safe.data);
+  } catch (error) {
+    console.error(error);
+    return actionError('Failed to delete component from database.');
+  }
+}

ethereal-nexus-dashboard/src/data/projects/schema.ts

@@ -21,9 +21,8 @@ export const projectComponentConfig = pgTable(
     component_id: uuid('component_id')
       .notNull()
       .references(() => components.id, { onDelete: 'cascade' }),
-    component_version: uuid('component_version').references(
-      () => componentVersions.id,
-    ),
+    component_version: uuid('component_version')
+      .references(() => componentVersions.id, { onDelete: 'set null'}),
     is_active: boolean('is_active').notNull().default(true),
   },
   (table) => {