From ee43f631ec85fc511e843c2af9bdac667067c54d Mon Sep 17 00:00:00 2001 From: Francisco Madeira Date: Fri, 23 Feb 2024 10:48:11 +0000 Subject: [PATCH] feat: add delete action to components table (#25) --- .../components/components/table/columns.tsx | 4 +- .../table/data-table-row-actions.tsx | 74 ++++++++----------- .../src/data/components/actions.ts | 25 +++++++ .../src/data/projects/schema.ts | 5 +- 4 files changed, 61 insertions(+), 47 deletions(-) diff --git a/ethereal-nexus-dashboard/src/components/components/table/columns.tsx b/ethereal-nexus-dashboard/src/components/components/table/columns.tsx index 04329adc..e182f718 100644 --- a/ethereal-nexus-dashboard/src/components/components/table/columns.tsx +++ b/ethereal-nexus-dashboard/src/components/components/table/columns.tsx @@ -58,8 +58,8 @@ export const columns = [ }, { id: "actions", - cell: ({ table, row }) => ( - + cell: ({ row }) => ( + ), }, ]; diff --git a/ethereal-nexus-dashboard/src/components/components/table/data-table-row-actions.tsx b/ethereal-nexus-dashboard/src/components/components/table/data-table-row-actions.tsx index 001d94c8..04513e2f 100644 --- a/ethereal-nexus-dashboard/src/components/components/table/data-table-row-actions.tsx +++ b/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 ( @@ -95,8 +84,9 @@ export function ComponentsDataTableRowActions({ table, row }) { Cancel diff --git a/ethereal-nexus-dashboard/src/data/components/actions.ts b/ethereal-nexus-dashboard/src/data/components/actions.ts index d743bc7f..a68ed7c6 100644 --- a/ethereal-nexus-dashboard/src/data/components/actions.ts +++ b/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 { + 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.'); + } +} \ No newline at end of file diff --git a/ethereal-nexus-dashboard/src/data/projects/schema.ts b/ethereal-nexus-dashboard/src/data/projects/schema.ts index 6d6d0873..d7236e10 100644 --- a/ethereal-nexus-dashboard/src/data/projects/schema.ts +++ b/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) => {