feat(categories): implement delete category functionality and add confirmation modal

Author: tyronejosee

src/actions/categories.ts

@@ -34,3 +34,16 @@ export const updateCategory = async (id: string, input: CategoryForm) => {
   if (error) throw new Error(`Error updating category: ${error.message}`);
   return data;
 };
+
+export async function deleteCategory(categoryId: string) {
+  const supabase = await createClient();
+  const { error } = await supabase
+    .from("categories")
+    .delete()
+    .eq("id", categoryId);
+
+  if (error) {
+    console.error("Error deleting category:", error);
+    throw new Error("Failed to delete category");
+  }
+}

src/app/(private)/dashboard/categories/client.tsx

@@ -7,9 +7,13 @@ import { useRouter } from "next/navigation";
 import { useDisclosure, addToast } from "@heroui/react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { createCategory, updateCategory } from "@/actions/categories";
+import {
+  createCategory,
+  deleteCategory,
+  updateCategory,
+} from "@/actions/categories";
 import { CategoryDrawer, CategoryTable } from "@/components/categories";
-import { HeadingDashboard } from "@/components/ui";
+import { DeleteModal, HeadingDashboard } from "@/components/ui";
 import { categorySchema } from "@/lib/zod";
 
 type Props = {
@@ -18,10 +22,17 @@ type Props = {
 
 export default function CategoriesPageClient({ categories }: Props) {
   const router = useRouter();
-  const { isOpen, onOpen, onClose } = useDisclosure();
   const [editingCategory, setEditingCategory] = useState<Category | null>(null);
+  const [categoryToDelete, setCategoryToDelete] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+
   const {
     register,
     handleSubmit,
@@ -48,10 +59,8 @@ export default function CategoriesPageClient({ categories }: Props) {
     setLoading(true);
     try {
       const payload = { name: data.name };
-
-      editingCategory
-        ? await updateCategory(editingCategory.id, payload)
-        : await createCategory(payload);
+      if (editingCategory) await updateCategory(editingCategory.id, payload);
+      else await createCategory(payload);
 
       router.refresh();
       setEditingCategory(null);
@@ -64,14 +73,48 @@ export default function CategoriesPageClient({ categories }: Props) {
     }
   };
 
+  const handleDelete = (id: string) => {
+    setCategoryToDelete(id);
+    onConfirmOpen();
+  };
+
+  const confirmDelete = async () => {
+    if (!categoryToDelete) return;
+    setLoading(true);
+    try {
+      await deleteCategory(categoryToDelete);
+      addToast({
+        title: "Deleted",
+        description: "Category deleted successfully.",
+      });
+      router.refresh();
+    } catch (error) {
+      console.error("Delete error:", error);
+      addToast({ title: "Error", description: "Failed to delete category." });
+    } finally {
+      setCategoryToDelete(null);
+      setLoading(false);
+      onConfirmClose();
+    }
+  };
+
   return (
     <div className="flex flex-col gap-4">
+      {/* Heading */}
       <HeadingDashboard
         title="Categories"
         count={categories.length}
         openAddModal={openAddModal}
       />
-      <CategoryTable categories={categories} openEditModal={openEditModal} />
+
+      {/* Table */}
+      <CategoryTable
+        categories={categories}
+        openEditModal={openEditModal}
+        handleDelete={handleDelete}
+      />
+
+      {/* Drawer */}
       <CategoryDrawer
         editingCategory={editingCategory}
         errors={errors}
@@ -83,6 +126,17 @@ export default function CategoriesPageClient({ categories }: Props) {
         loading={loading}
         isSubmitting={isSubmitting}
       />
+
+      {/* Delete Modal */}
+      <DeleteModal
+        loading={loading}
+        isConfirmOpen={isConfirmOpen}
+        onConfirmClose={onConfirmClose}
+        confirmDelete={confirmDelete}
+        title="Delete Category"
+        description="Are you sure you want to delete this category? This action cannot be undone."
+        confirmLabel="Delete"
+      />
     </div>
   );
 }

src/components/categories/category-table.tsx

@@ -20,9 +20,14 @@ import { EllipsisVertical, SquarePenIcon, Trash2 } from "lucide-react";
 type Props = {
   categories: Category[];
   openEditModal: (category: Category) => void;
+  handleDelete: (id: string) => void;
 };
 
-export default function CategoryTable({ categories, openEditModal }: Props) {
+export default function CategoryTable({
+  categories,
+  openEditModal,
+  handleDelete,
+}: Props) {
   return (
     <Table
       removeWrapper
@@ -77,7 +82,7 @@ export default function CategoryTable({ categories, openEditModal }: Props) {
                       color="danger"
                       shortcut="⌘D"
                       startContent={<Trash2 size={18} />}
-                      // onPress={() => handleDeleteClick(resource.id)}
+                      onPress={() => handleDelete(category.id)}
                     >
                       Delete category
                     </DropdownItem>

src/components/ui/delete-modal.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from "@heroui/react";
+
+type Props = {
+  loading: boolean;
+  isConfirmOpen: boolean;
+  onConfirmClose: () => void;
+  confirmDelete: () => void;
+  title?: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+};
+
+export default function DeleteModal({
+  loading,
+  isConfirmOpen,
+  onConfirmClose,
+  confirmDelete,
+  title = "Confirm Deletion",
+  description = "Are you sure you want to proceed? This action cannot be undone.",
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+}: Props) {
+  return (
+    <Modal
+      backdrop="blur"
+      isOpen={isConfirmOpen}
+      onClose={onConfirmClose}
+      classNames={{
+        base: "bg-white dark:bg-neutral-950 border-2 border-neutral-200 dark:border-neutral-800",
+      }}
+    >
+      <ModalContent>
+        <ModalHeader>{title}</ModalHeader>
+        <ModalBody>{description}</ModalBody>
+        <ModalFooter>
+          <Button
+            variant="bordered"
+            onPress={onConfirmClose}
+            className="border-2 border-neutral-200 dark:border-neutral-800"
+          >
+            {cancelLabel}
+          </Button>
+          <Button color="danger" onPress={confirmDelete} isLoading={loading}>
+            {confirmLabel}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

src/components/ui/index.ts

@@ -1,5 +1,6 @@
 export { default as BackToTop } from "./back-to-top";
 export { default as Breadcrumbs } from "./breadcrumbs";
+export { default as DeleteModal } from "./delete-modal";
 export { default as Heading } from "./heading";
 export { default as HeadingDashboard } from "./heading-dashboard";
 export { default as ThemeSwitcher } from "./theme-switcher";