feat(WEB-170): edit profile view

components/MyProfile/Profile/Edit/Form/index.tsx

@@ -0,0 +1,61 @@
+"use client"
+import { FormProvider, useForm } from "react-hook-form"
+import { useFormState as useReactFormState } from "react-dom"
+import { useEffect } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+import { editProfile } from "@/actions/editProfile"
+import { editProfileSchema, type EditProfileSchema } from "./schema"
+import { useProfileStore } from "@/stores/edit-profile"
+
+import FormContent from "./Content"
+
+import styles from "./form.module.css"
+
+import {
+  type EditFormProps,
+  type State,
+} from "@/types/components/myPages/myProfile/edit"
+
+export default function Form({ user }: EditFormProps) {
+  const isValid = useProfileStore((store) => store.valid)
+  const setValid = useProfileStore((store) => store.setValid)
+  /**
+   * like react, react-hook-form also exports a useFormState hook,
+   * we want to clearly keep them separate by naming.
+   */
+  const [state, formAction] = useReactFormState<State, FormData>(
+    editProfile,
+    null
+  )
+
+  const form = useForm<EditProfileSchema>({
+    defaultValues: {
+      country: user.country,
+      city: user.address.city,
+      dob: user.dob,
+      email: user.email,
+      phone: user.phone,
+      street: user.address.street,
+      zip: user.address.zipcode,
+    },
+    criteriaMode: "all",
+    mode: "onTouched",
+    resolver: zodResolver(editProfileSchema),
+    reValidateMode: "onChange",
+  })
+
+  useEffect(() => {
+    if (isValid !== form.formState.isValid) {
+      setValid(form.formState.isValid)
+    }
+  }, [form.formState.isValid, isValid, setValid])
+
+  return (
+    <FormProvider {...form}>
+      <form action={formAction} className={styles.form} id="edit-profile">
+        <FormContent control={form.control} />
+      </form>
+    </FormProvider>
+  )
+}