chore: rename getProviders action and add modal for editing provider info

actions/providers.ts

@@ -48,21 +48,61 @@ export const getProviders = async ({
 };
 
 export const getProvider = async (formData: FormData) => {
-  const keyServer = process.env.API_BASE_URL;
-
+  const session = await auth();
+  const tenantId = session?.user.tenantId;
   const providerId = formData.get("id");
 
+  const keyServer = process.env.API_BASE_URL;
+  const url = new URL(`${keyServer}/providers/${providerId}`);
+
   try {
-    const response = await fetch(`${keyServer}/providers/${providerId}`, {
-      method: "GET",
+    const providers = await fetch(url.toString(), {
       headers: {
-        "X-Tenant-ID": `${process.env.HEADER_TENANT_ID}`,
+        "X-Tenant-ID": `${tenantId}`,
       },
     });
+    const data = await providers.json();
+    const parsedData = parseStringify(data);
+    return parsedData;
+  } catch (error) {
+    return {
+      error: getErrorMessage(error),
+    };
+  }
+};
+
+export const updateProvider = async (formData: FormData) => {
+  const session = await auth();
+  const keyServer = process.env.API_BASE_URL;
+
+  const tenantId = session?.user.tenantId;
+  const providerId = formData.get("id");
+  const alias = formData.get("alias");
+
+  const url = new URL(`${keyServer}/providers/${providerId}`);
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: "PATCH",
+      headers: {
+        "X-Tenant-ID": `${tenantId}`,
+        "Content-Type": "application/vnd.api+json",
+      },
+      body: JSON.stringify({
+        data: {
+          type: "Provider",
+          id: providerId,
+          attributes: {
+            alias: alias,
+          },
+        },
+      }),
+    });
     const data = await response.json();
     revalidatePath("/providers");
     return parseStringify(data);
   } catch (error) {
+    console.error(error);
     return {
       error: getErrorMessage(error),
     };

components/providers/forms/DeleteForm.tsx

@@ -59,7 +59,7 @@ export const DeleteForm = ({
             disabled={isLoading}
             className="w-full hidden sm:block"
             type="button"
-            onClick={() => setIsOpen(false)}
+            onPress={() => setIsOpen(false)}
           >
             Cancel
           </Button>

components/providers/forms/EditForm.tsx

@@ -0,0 +1,108 @@
+"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 { updateProvider } from "@/actions";
+import { useToast } from "@/components/ui";
+import { CustomInput } from "@/components/ui/custom";
+import { Form } from "@/components/ui/form";
+
+const formSchema = z.object({
+  alias: z.string(),
+  providerId: z.string(),
+});
+
+export const EditForm = ({
+  providerId,
+  providerAlias,
+  setIsOpen,
+}: {
+  providerId: string;
+  providerAlias?: string;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      alias: "",
+    },
+  });
+
+  const { toast } = useToast();
+  const isLoading = form.formState.isSubmitting;
+
+  async function onSubmitClient(formData: FormData) {
+    // client-side validation
+    const data = await updateProvider(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 updated successfully.",
+      });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        action={onSubmitClient}
+        className="flex flex-col space-y-2 sm:px-0 px-4"
+      >
+        <input type="hidden" name="id" value={providerId} />
+        <div>Current alias: {providerAlias}</div>
+
+        <CustomInput
+          control={form.control}
+          name="alias"
+          type="text"
+          label="Alias"
+          placeholder={providerAlias}
+        />
+
+        <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"
+            onPress={() => setIsOpen(false)}
+          >
+            Cancel
+          </Button>
+
+          <Button
+            size="lg"
+            type="submit"
+            disabled={isLoading}
+            className="w-full"
+            onPress={() => setIsOpen(false)}
+          >
+            {isLoading ? (
+              <>
+                <CircularProgress aria-label="Loading..." size="sm" />
+                Saving...
+              </>
+            ) : (
+              <span>Save</span>
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

components/providers/forms/index.ts

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

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

@@ -21,8 +21,8 @@ import { VerticalDotsIcon } from "@/components/icons";
 import { CustomAlertModal } from "@/components/ui/custom";
 
 import { CheckConnectionProvider } from "../CheckConnectionProvider";
+import { EditForm } from "../forms";
 import { DeleteForm } from "../forms/DeleteForm";
-import EditForm from "../forms/EditForm";
 
 interface DataTableRowActionsProps<ProviderProps> {
   row: Row<ProviderProps>;
@@ -36,6 +36,7 @@ export function DataTableRowActions<ProviderProps>({
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const providerId = (row.original as { id: string }).id;
+  const providerAlias = (row.original as any).attributes?.alias;
   return (
     <>
       <CustomAlertModal
@@ -44,7 +45,11 @@ export function DataTableRowActions<ProviderProps>({
         title="Edit Provider"
         description={"Edit the provider details"}
       >
-        <EditForm providerId={providerId} setIsOpen={setIsEditOpen} />
+        <EditForm
+          providerId={providerId}
+          providerAlias={providerAlias}
+          setIsOpen={setIsEditOpen}
+        />
       </CustomAlertModal>
       <CustomAlertModal
         isOpen={isDeleteOpen}