55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
"use client"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { useEffect } from "react"
|
|
import { useFormState as useReactFormState } from "react-dom"
|
|
import { FormProvider, useForm } from "react-hook-form"
|
|
|
|
import { useProfileStore } from "@/stores/edit-profile"
|
|
|
|
import { editProfile } from "@/actions/editProfile"
|
|
|
|
import FormContent from "./Content"
|
|
import { type EditProfileSchema, editProfileSchema } from "./schema"
|
|
|
|
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: user,
|
|
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>
|
|
)
|
|
}
|