feat: add delete action to components table (#25)

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) => {