refactor: remove two components and create a new one, reducing code and improving efficiency

components/providers/ButtonCheckConnectionProvider.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import { Button } from "@nextui-org/react";
-import React from "react";
-import { useFormStatus } from "react-dom";
-
-export const ButtonCheckConnectionProvider = () => {
-  const { pending } = useFormStatus();
-  return (
-    <Button
-      className="bg-transparent border-none p-0 m-0 h-fit min-w-min"
-      spinner={pending ? "Checking..." : " Check"}
-      type="submit"
-      area-disabled={pending}
-    >
-      Check connection
-    </Button>
-  );
-};

components/providers/ButtonDeleteProvider.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import { Button } from "@nextui-org/react";
-import React from "react";
-import { useFormStatus } from "react-dom";
-
-export const ButtonDeleteProvider = () => {
-  const { pending } = useFormStatus();
-  return (
-    <Button
-      className="bg-transparent border-none p-0 m-0 h-fit min-w-min text-danger"
-      spinner={pending ? "Removing..." : "Remove"}
-      type="submit"
-      area-disabled={pending}
-    >
-      Delete
-    </Button>
-  );
-};

components/providers/CheckConnectionProvider.tsx

@@ -4,8 +4,8 @@ import { useRef } from "react";
 
 import { checkConnectionProvider } from "@/actions";
 
+import { CustomButtonClientAction } from "../ui/custom";
 import { useToast } from "../ui/toast";
-import { ButtonCheckConnectionProvider } from "./ButtonCheckConnectionProvider";
 
 export const CheckConnectionProvider = ({ id }: { id: string }) => {
   const ref = useRef<HTMLFormElement>(null);
@@ -35,7 +35,7 @@ export const CheckConnectionProvider = ({ id }: { id: string }) => {
   return (
     <form ref={ref} action={clientAction} className="flex gap-x-2">
       <input type="hidden" name="id" value={id} />
-      <ButtonCheckConnectionProvider />
+      <CustomButtonClientAction buttonLabel="Check Connection" />
     </form>
   );
 };

components/providers/DeleteProvider.tsx

@@ -4,8 +4,8 @@ import { useRef } from "react";
 
 import { deleteProvider } from "@/actions";
 
+import { CustomButtonClientAction } from "../ui/custom";
 import { useToast } from "../ui/toast";
-import { ButtonDeleteProvider } from "./ButtonDeleteProvider";
 
 export const DeleteProvider = ({ id }: { id: string }) => {
   const ref = useRef<HTMLFormElement>(null);
@@ -35,7 +35,7 @@ export const DeleteProvider = ({ id }: { id: string }) => {
   return (
     <form ref={ref} action={clientAction} className="flex gap-x-2">
       <input type="hidden" name="id" value={id} />
-      <ButtonDeleteProvider />
+      <CustomButtonClientAction buttonLabel="Delete" danger />
     </form>
   );
 };

components/providers/index.ts

@@ -1,8 +1,6 @@
 export * from "./AddProvider";
 export * from "./AddProviderModal";
 export * from "./ButtonAddProvider";
-export * from "./ButtonCheckConnectionProvider";
-export * from "./ButtonDeleteProvider";
 export * from "./CheckConnectionProvider";
 export * from "./CustomRadioProvider";
 export * from "./DateWithTime";

components/ui/custom/CustomButtonClientAction.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Button, CircularProgress } from "@nextui-org/react";
+import clsx from "clsx";
+import { useFormStatus } from "react-dom";
+
+interface CustomButtonClientActionProps {
+  buttonLabel: string;
+  danger?: boolean;
+}
+
+export const CustomButtonClientAction = ({
+  buttonLabel,
+  danger = false,
+}: CustomButtonClientActionProps) => {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      className={clsx("bg-transparent border-none p-0 m-0 h-fit min-w-min", {
+        "text-danger": danger,
+      })}
+      spinner={<CircularProgress aria-label="Loading..." size="sm" />}
+      type="submit"
+      area-disabled={pending}
+    >
+      {buttonLabel}
+    </Button>
+  );
+};

components/ui/custom/index.ts

@@ -1,2 +1,3 @@
 export * from "./CustomBox";
+export * from "./CustomButtonClientAction";
 export * from "./CustomInput";