feat(WEB-163): edit profile field validation

components/Forms/Edit/Profile/index.tsx

@@ -1,13 +1,16 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useParams } from "next/navigation"
 import { useFormState as useReactFormState } from "react-dom"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { profile } from "@/constants/routes/myPages"
+
 import { editProfile } from "@/actions/editProfile"
 import Header from "@/components/Profile/Header"
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import FormContent from "./FormContent"
@@ -19,11 +22,14 @@ import type {
   EditFormProps,
   State,
 } from "@/types/components/myPages/myProfile/edit"
+import type { Lang } from "@/constants/languages"
 
 const formId = "edit-profile"
 
 export default function Form({ user }: EditFormProps) {
   const { formatMessage } = useIntl()
+  const params = useParams()
+  const lang = params.lang as Lang
   /**
    * like react, react-hook-form also exports a useFormState hook,
    * we want to clearly keep them separate by naming.
@@ -33,12 +39,14 @@ export default function Form({ user }: EditFormProps) {
     null
   )
 
-  const form = useForm<EditProfileSchema>({
+  const methods = useForm<EditProfileSchema>({
     defaultValues: {
-      "address.city": user.address.city ?? "",
-      "address.countryCode": user.address.countryCode ?? "",
-      "address.streetAddress": user.address.streetAddress ?? "",
-      "address.zipCode": user.address.zipCode ?? "",
+      address: {
+        city: user.address.city ?? "",
+        countryCode: user.address.countryCode ?? "",
+        streetAddress: user.address.streetAddress ?? "",
+        zipCode: user.address.zipCode ?? "",
+      },
       dateOfBirth: user.dateOfBirth,
       email: user.email,
       language: user.language,
@@ -53,7 +61,7 @@ export default function Form({ user }: EditFormProps) {
   })
 
   return (
-    <FormProvider {...form}>
+    <>
       <Header>
         <hgroup>
           <Title as="h4" color="red" level="h1">
@@ -64,17 +72,15 @@ export default function Form({ user }: EditFormProps) {
           </Title>
         </hgroup>
         <div className={styles.btns}>
-          <Button
-            form={formId}
-            intent="secondary"
-            size="small"
-            theme="base"
-            type="reset"
-          >
-            {formatMessage({ id: "Discard changes" })}
+          <Button asChild intent="secondary" size="small" theme="base">
+            <Link href={profile[lang]}>
+              {formatMessage({ id: "Discard changes" })}
+            </Link>
           </Button>
           <Button
-            disabled={!form.formState.isValid || form.formState.isSubmitting}
+            disabled={
+              !methods.formState.isValid || methods.formState.isSubmitting
+            }
             form={formId}
             intent="primary"
             size="small"
@@ -85,10 +91,11 @@ export default function Form({ user }: EditFormProps) {
           </Button>
         </div>
       </Header>
-      <Divider color="burgundy" opacity={8} />
       <form action={formAction} className={styles.form} id={formId}>
-        <FormContent />
+        <FormProvider {...methods}>
+          <FormContent />
+        </FormProvider>
       </form>
-    </FormProvider>
+    </>
   )
 }