feat: confirmation screen works as expected

components/providers/DeleteProvider.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { useRef } from "react";
-
-import { deleteProvider } from "@/actions";
-
-import { CustomAlertDialog, CustomButtonClientAction } from "../ui/custom";
-import { useToast } from "../ui/toast";
-
-export const DeleteProvider = ({ id }: { id: string }) => {
-  const ref = useRef<HTMLFormElement>(null);
-  const { toast } = useToast();
-
-  async function clientAction(formData: FormData) {
-    // reset the form
-    ref.current?.reset();
-    // client-side validation
-    const data = await deleteProvider(formData);
-    if (data?.errors && data.errors.length > 0) {
-      const error = data.errors[0];
-      const errorMessage = `${error.detail}`;
-      // show error
-      toast({
-        variant: "destructive",
-        title: "Oops! Something went wrong",
-        description: errorMessage,
-      });
-    } else {
-      toast({
-        title: "Success!",
-        description: "The provider was removed successfully.",
-      });
-    }
-  }
-  return (
-    <form ref={ref} action={clientAction} className="flex gap-x-2">
-      <input type="hidden" name="id" value={id} />
-      {/* <CustomButtonClientAction buttonLabel="Delete" danger /> */}
-    </form>
-  );
-};

components/providers/forms/DeleteForm.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, CircularProgress } from "@nextui-org/react";
+import React, { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import { deleteProvider } from "@/actions";
+import { useToast } from "@/components/ui";
+import { Form } from "@/components/ui/form";
+
+const formSchema = z.object({
+  providerId: z.string(),
+});
+
+export const DeleteForm = ({
+  providerId,
+  setIsOpen,
+}: {
+  providerId: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+  const { toast } = useToast();
+  const isLoading = form.formState.isSubmitting;
+
+  async function onSubmitClient(formData: FormData) {
+    // client-side validation
+    const data = await deleteProvider(formData);
+
+    if (data?.errors && data.errors.length > 0) {
+      const error = data.errors[0];
+      const errorMessage = `${error.detail}`;
+      // show error
+      toast({
+        variant: "destructive",
+        title: "Oops! Something went wrong",
+        description: errorMessage,
+      });
+    } else {
+      toast({
+        title: "Success!",
+        description: "The provider was removed successfully.",
+      });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form action={onSubmitClient}>
+        <input type="hidden" name="id" value={providerId} />
+        <div className="w-full flex justify-center sm:space-x-6">
+          <Button
+            size="lg"
+            variant="bordered"
+            disabled={isLoading}
+            className="w-full hidden sm:block"
+            type="button"
+            onClick={() => setIsOpen(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            size="lg"
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-system-error hover:bg-system-error/90 text-white"
+          >
+            {isLoading ? (
+              <>
+                <CircularProgress aria-label="Loading..." size="sm" />
+                Deleting
+              </>
+            ) : (
+              <span>Delete</span>
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/providers/forms/index.ts

@@ -0,0 +1 @@
+export * from "./DeleteForm";

components/providers/index.ts

@@ -4,7 +4,7 @@ export * from "./ButtonAddProvider";
 export * from "./CheckConnectionProvider";
 export * from "./CustomRadioProvider";
 export * from "./DateWithTime";
-export * from "./DeleteProvider";
+export * from "./forms/DeleteForm";
 export * from "./ProviderInfo";
 export * from "./ScanStatus";
 export * from "./SnippetIdProvider";

components/providers/table/ColumnsProvider.tsx

@@ -1,41 +1,21 @@
 "use client";
 
-import {
-  Button,
-  Dropdown,
-  DropdownItem,
-  DropdownMenu,
-  DropdownSection,
-  DropdownTrigger,
-} from "@nextui-org/react";
 import { ColumnDef } from "@tanstack/react-table";
-import clsx from "clsx";
 import { add } from "date-fns";
 
-import { VerticalDotsIcon } from "@/components/icons";
 import { StatusBadge } from "@/components/ui";
 import { ProviderProps } from "@/types";
 
-import { CheckConnectionProvider } from "../CheckConnectionProvider";
 import { DateWithTime } from "../DateWithTime";
-import { DeleteProvider } from "../DeleteProvider";
 import { ProviderInfo } from "../ProviderInfo";
+import { SnippetIdProvider } from "../SnippetIdProvider";
+import { DataTableRowActions } from "./data-table-row-actions";
 import { DataTableColumnHeader } from "./DataTableColumnHeader";
+
 const getProviderData = (row: { original: ProviderProps }) => {
   return row.original;
 };
 
-import {
-  AddNoteBulkIcon,
-  DeleteDocumentBulkIcon,
-  EditDocumentBulkIcon,
-} from "@nextui-org/shared-icons";
-
-import { SnippetIdProvider } from "../SnippetIdProvider";
-
-const iconClasses =
-  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
-
 export const ColumnsProvider: ColumnDef<ProviderProps>[] = [
   {
     header: "n",
@@ -133,68 +113,9 @@ export const ColumnsProvider: ColumnDef<ProviderProps>[] = [
     },
   },
   {
-    accessorKey: "actions",
-    header: () => <div className="text-right">Actions</div>,
     id: "actions",
     cell: ({ row }) => {
-      const { id } = getProviderData(row);
-      return (
-        <div className="relative flex justify-end items-center gap-2">
-          <Dropdown className="shadow-xl" placement="bottom">
-            <DropdownTrigger>
-              <Button isIconOnly radius="full" size="sm" variant="light">
-                <VerticalDotsIcon className="text-default-400" />
-              </Button>
-            </DropdownTrigger>
-            <DropdownMenu
-              closeOnSelect
-              aria-label="Actions"
-              color="default"
-              variant="flat"
-            >
-              <DropdownSection title="Actions">
-                <DropdownItem
-                  key="new"
-                  description="Check the connection to the provider"
-                  shortcut="⌘N"
-                  textValue="Check Connection"
-                  startContent={<AddNoteBulkIcon className={iconClasses} />}
-                >
-                  <CheckConnectionProvider id={id} />
-                </DropdownItem>
-                <DropdownItem
-                  key="edit"
-                  description="Allows you to edit the provider"
-                  shortcut="⌘⇧E"
-                  textValue="Edit Provider"
-                  startContent={
-                    <EditDocumentBulkIcon className={iconClasses} />
-                  }
-                >
-                  Edit provider
-                </DropdownItem>
-              </DropdownSection>
-              <DropdownSection title="Danger zone">
-                <DropdownItem
-                  key="delete"
-                  className="text-danger"
-                  color="danger"
-                  description="Delete the provider permanently"
-                  textValue="Delete Provider"
-                  shortcut="⌘⇧D"
-                  startContent={
-                    <DeleteDocumentBulkIcon
-                      className={clsx(iconClasses, "!text-danger")}
-                    />
-                  }
-                >
-                  <DeleteProvider id={id} />
-                </DropdownItem>
-              </DropdownSection>
-            </DropdownMenu>
-          </Dropdown>
-        </div>
-      );
+      return <DataTableRowActions row={row} />;
     },
   },
 ];

components/providers/table/data-table-row-actions.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSection,
+  DropdownTrigger,
+} from "@nextui-org/react";
+import {
+  AddNoteBulkIcon,
+  DeleteDocumentBulkIcon,
+  EditDocumentBulkIcon,
+} from "@nextui-org/shared-icons";
+import { Row } from "@tanstack/react-table";
+import clsx from "clsx";
+import { useState } from "react";
+
+import { VerticalDotsIcon } from "@/components/icons";
+import { CustomAlertModal } from "@/components/ui/custom";
+
+import { CheckConnectionProvider } from "../CheckConnectionProvider";
+import { DeleteForm } from "../forms/DeleteForm";
+
+interface DataTableRowActionsProps<ProviderProps> {
+  row: Row<ProviderProps>;
+}
+const iconClasses =
+  "text-2xl text-default-500 pointer-events-none flex-shrink-0";
+
+export function DataTableRowActions<ProviderProps>({
+  row,
+}: DataTableRowActionsProps<ProviderProps>) {
+  //   const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const providerId = (row.original as { id: string }).id;
+  return (
+    <>
+      {/* <ResponsiveDialog
+        isOpen={isEditOpen}
+        setIsOpen={setIsEditOpen}
+        title="Edit Person"
+      >
+        <EditForm providerId={providerId} setIsOpen={setIsEditOpen} />
+      </ResponsiveDialog> */}
+      <CustomAlertModal
+        isOpen={isDeleteOpen}
+        onOpenChange={setIsDeleteOpen}
+        title="Are you absolutely sure?"
+        description="This action cannot be undone. This will permanently delete your provider account and remove your data from the server."
+      >
+        <DeleteForm providerId={providerId} setIsOpen={setIsDeleteOpen} />
+      </CustomAlertModal>
+
+      <div className="relative flex justify-end items-center gap-2">
+        <Dropdown className="shadow-xl" placement="bottom">
+          <DropdownTrigger>
+            <Button isIconOnly radius="full" size="sm" variant="light">
+              <VerticalDotsIcon className="text-default-400" />
+            </Button>
+          </DropdownTrigger>
+          <DropdownMenu
+            closeOnSelect
+            aria-label="Actions"
+            color="default"
+            variant="flat"
+          >
+            <DropdownSection title="Actions">
+              <DropdownItem
+                key="new"
+                description="Check the connection to the provider"
+                shortcut="⌘N"
+                textValue="Check Connection"
+                startContent={<AddNoteBulkIcon className={iconClasses} />}
+              >
+                <CheckConnectionProvider id={providerId} />
+              </DropdownItem>
+              <DropdownItem
+                key="edit"
+                description="Allows you to edit the provider"
+                shortcut="⌘⇧E"
+                textValue="Edit Provider"
+                startContent={<EditDocumentBulkIcon className={iconClasses} />}
+              >
+                Edit Provider
+              </DropdownItem>
+            </DropdownSection>
+            <DropdownSection title="Danger zone">
+              <DropdownItem
+                key="delete"
+                className="text-danger"
+                color="danger"
+                description="Delete the provider permanently"
+                textValue="Delete Provider"
+                shortcut="⌘⇧D"
+                startContent={
+                  <DeleteDocumentBulkIcon
+                    className={clsx(iconClasses, "!text-danger")}
+                  />
+                }
+                onClick={() => setIsDeleteOpen(true)}
+              >
+                Delete Provider
+              </DropdownItem>
+            </DropdownSection>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    </>
+  );
+}

components/ui/custom/CustomAlertDialog.tsx

@@ -1,36 +0,0 @@
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/";
-import { useDialog } from "@/hooks";
-
-export const CustomAlertDialog = () => {
-  const { isOpen, onClose } = useDialog();
-  return (
-    <AlertDialog open={isOpen} onOpenChange={onClose} defaultOpen={isOpen}>
-      <AlertDialogTrigger asChild>
-        <span>Show Dialog</span>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel onClick={onClose}>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};

components/ui/custom/CustomAlertModal.tsx

@@ -0,0 +1,39 @@
+import { Modal, ModalBody, ModalContent, ModalHeader } from "@nextui-org/react";
+import React, { ReactNode } from "react";
+
+interface CustomAlertModalProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  title: string;
+  description: string;
+  children: ReactNode;
+}
+
+export const CustomAlertModal: React.FC<CustomAlertModalProps> = ({
+  isOpen,
+  onOpenChange,
+  title,
+  description,
+  children,
+}) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      size="xl"
+      backdrop="blur"
+    >
+      <ModalContent className="py-4">
+        {(_onClose) => (
+          <>
+            <ModalHeader className="flex flex-col py-0">{title}</ModalHeader>
+            <ModalBody className="space-y-2">
+              <p>{description}</p>
+              {children}
+            </ModalBody>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

components/ui/custom/index.ts

@@ -1,4 +1,4 @@
-export * from "./CustomAlertDialog";
+export * from "./CustomAlertModal";
 export * from "./CustomBox";
 export * from "./CustomButtonClientAction";
 export * from "./CustomInput";

package-lock.json

@@ -12,6 +12,7 @@
         "@nextui-org/react": "^2.4.6",
         "@nextui-org/system": "2.2.1",
         "@nextui-org/theme": "2.2.5",
+        "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-icons": "^1.3.0",
@@ -2714,6 +2715,34 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.1.tgz",
+      "integrity": "sha512-wmCoJwj7byuVuiLKqDLlX7ClSUU0vd9sdCeM+2Ls+uf13+cpSJoMgwysHq1SGVVkJj5Xn0XWi1NoRCdkMpr6Mw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dialog": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
@@ -2959,6 +2988,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
       "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "^16.x || ^17.x || ^18.x"
       }
@@ -3268,6 +3298,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
       "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.0"
       },
@@ -6148,6 +6179,7 @@
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
       "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "license": "Apache-2.0",
       "dependencies": {
         "clsx": "2.0.0"
       },
@@ -6271,6 +6303,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -9543,6 +9576,7 @@
       "version": "0.417.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.417.0.tgz",
       "integrity": "sha512-F/MDUHDter8YMZ7JKQpW/5/+v38tdaoShKX3e+opYsqfCnaHwn+5zz3+lBrMDFMNtSsvxtNpchLIaMpEfsi/4w==",
+      "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -11707,6 +11741,7 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
       "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
@@ -11776,6 +11811,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
       "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
       "peerDependencies": {
         "tailwindcss": ">=3.0.0 || insiders"
       }

package.json

@@ -4,6 +4,7 @@
     "@nextui-org/react": "^2.4.6",
     "@nextui-org/system": "2.2.1",
     "@nextui-org/theme": "2.2.5",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",