From 474ae4478fbaec0deca699e212e16d9fc79e2efd Mon Sep 17 00:00:00 2001 From: pandeymangg Date: Fri, 24 May 2024 23:04:05 +0530 Subject: [PATCH] formssssS --- .../product/general/actions.ts | 21 +++++ .../components/EditProductNameForm.tsx | 76 +++++++++++-------- .../product/general/components/SubmitBtn.tsx | 15 ++++ 3 files changed, 79 insertions(+), 33 deletions(-) create mode 100644 apps/web/app/(app)/environments/[environmentId]/product/general/components/SubmitBtn.tsx diff --git a/apps/web/app/(app)/environments/[environmentId]/product/general/actions.ts b/apps/web/app/(app)/environments/[environmentId]/product/general/actions.ts index 9538d75fff..604ad2f9ba 100644 --- a/apps/web/app/(app)/environments/[environmentId]/product/general/actions.ts +++ b/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; +} + +export const updateProductFormAction = async (state: State, data: FormData): Promise => { + 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, diff --git a/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx b/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx index 64ce3f0d7c..34ca36fa38 100644 --- a/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx +++ b/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 = ({ mode: "onChange", }); + const formRef = useRef(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 = async (data) => { - const name = data.name.trim(); - try { - if (nameError) { - toast.error(nameError); - return; - } + // const updateProduct: SubmitHandler = 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 ? ( -
+ + form.handleSubmit(() => { + e.preventDefault(); + formRef.current?.submit(); + }) + }> = ({ )} /> - +
) : ( diff --git a/apps/web/app/(app)/environments/[environmentId]/product/general/components/SubmitBtn.tsx b/apps/web/app/(app)/environments/[environmentId]/product/general/components/SubmitBtn.tsx new file mode 100644 index 0000000000..3415f5af19 --- /dev/null +++ b/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 ( + + ); +};