formssssS

apps/web/app/(app)/environments/[environmentId]/product/general/actions.ts

@@ -9,9 +9,30 @@ import { getMembershipByUserIdTeamId } from "@formbricks/lib/membership/service"
 import { deleteProduct, getProducts, updateProduct } from "@formbricks/lib/product/service";
 import { getTeamByEnvironmentId } from "@formbricks/lib/team/service";
 import { TEnvironment } from "@formbricks/types/environment";
+import { Result, ok } from "@formbricks/types/errorHandlers";
 import { AuthenticationError, AuthorizationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TProduct, TProductUpdateInput } from "@formbricks/types/product";
 
+interface State {
+  params: { environmentId: string; productId: string };
+  response?: Result<TProduct>;
+}
+
+export const updateProductFormAction = async (state: State, data: FormData): Promise<State> => {
+  console.log({ state });
+  const formData = Object.fromEntries(data);
+  console.log({ formData });
+
+  const updatedProduct = await updateProductAction(state.params.environmentId, state.params.productId, {
+    name: formData.name as string,
+  });
+
+  return {
+    ...state,
+    response: ok(updatedProduct),
+  };
+};
+
 export const updateProductAction = async (
   environmentId: string,
   productId: string,

apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx

@@ -1,16 +1,18 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useRef } from "react";
+import { useFormState } from "react-dom";
 import { SubmitHandler, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { z } from "zod";
 
 import { TProduct, ZProduct } from "@formbricks/types/product";
-import { Button } from "@formbricks/ui/Button";
 import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormProvider } from "@formbricks/ui/Form";
 import { Input } from "@formbricks/ui/Input";
 
-import { updateProductAction } from "../actions";
+import { updateProductAction, updateProductFormAction } from "../actions";
+import { SubmitButton } from "./SubmitBtn";
 
 type EditProductNameProps = {
   product: TProduct;
@@ -35,39 +37,54 @@ export const EditProductNameForm: React.FC<EditProductNameProps> = ({
     mode: "onChange",
   });
 
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const [serverState, formAction] = useFormState(updateProductFormAction, {
+    params: { environmentId, productId: product.id },
+  });
+
   const { errors, isDirty } = form.formState;
 
   const nameError = errors.name?.message;
-  const isSubmitting = form.formState.isSubmitting;
+  // const isSubmitting = form.formState.isSubmitting;
 
-  const updateProduct: SubmitHandler<TEditProductName> = async (data) => {
-    const name = data.name.trim();
-    try {
-      if (nameError) {
-        toast.error(nameError);
-        return;
-      }
+  // const updateProduct: SubmitHandler<TEditProductName> = async (data) => {
+  //   const name = data.name.trim();
+  //   try {
+  //     if (nameError) {
+  //       toast.error(nameError);
+  //       return;
+  //     }
 
-      const updatedProduct = await updateProductAction(environmentId, product.id, { name });
+  //     const updatedProduct = await updateProductAction(environmentId, product.id, { name });
 
-      if (isProductNameEditDisabled) {
-        toast.error("Only Owners, Admins and Editors can perform this action.");
-        return;
-      }
+  //     if (isProductNameEditDisabled) {
+  //       toast.error("Only Owners, Admins and Editors can perform this action.");
+  //       return;
+  //     }
 
-      if (!!updatedProduct?.id) {
-        toast.success("Product name updated successfully.");
-        form.resetField("name", { defaultValue: updatedProduct.name });
-      }
-    } catch (err) {
-      console.error(err);
-      toast.error(`Error: Unable to save product information`);
-    }
-  };
+  //     if (!!updatedProduct?.id) {
+  //       toast.success("Product name updated successfully.");
+  //       form.resetField("name", { defaultValue: updatedProduct.name });
+  //     }
+  //   } catch (err) {
+  //     console.error(err);
+  //     toast.error(`Error: Unable to save product information`);
+  //   }
+  // };
 
   return !isProductNameEditDisabled ? (
     <FormProvider {...form}>
-      <form className="w-full max-w-sm items-center space-y-2" onSubmit={form.handleSubmit(updateProduct)}>
+      <form
+        ref={formRef}
+        className="w-full max-w-sm items-center space-y-2"
+        action={formAction}
+        onSubmit={(e) =>
+          form.handleSubmit(() => {
+            e.preventDefault();
+            formRef.current?.submit();
+          })
+        }>
         <FormField
           control={form.control}
           name="name"
@@ -90,14 +107,7 @@ export const EditProductNameForm: React.FC<EditProductNameProps> = ({
           )}
         />
 
-        <Button
-          type="submit"
-          variant="darkCTA"
-          size="sm"
-          loading={isSubmitting}
-          disabled={isSubmitting || !isDirty}>
-          Update
-        </Button>
+        <SubmitButton />
       </form>
     </FormProvider>
   ) : (

apps/web/app/(app)/environments/[environmentId]/product/general/components/SubmitBtn.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+
+import { Button } from "@formbricks/ui/Button";
+
+export const SubmitButton = () => {
+  const formStatus = useFormStatus();
+
+  return (
+    <Button type="submit" variant="darkCTA" size="sm" loading={formStatus.pending}>
+      Update
+    </Button>
+  );
+};