95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
"use client"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { useFormState as useReactFormState } from "react-dom"
|
|
import { FormProvider, useForm } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { editProfile } from "@/actions/editProfile"
|
|
import Header from "@/components/Profile/Header"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import FormContent from "./FormContent"
|
|
import { type EditProfileSchema, editProfileSchema } from "./schema"
|
|
|
|
import styles from "./form.module.css"
|
|
|
|
import type {
|
|
EditFormProps,
|
|
State,
|
|
} from "@/types/components/myPages/myProfile/edit"
|
|
|
|
const formId = "edit-profile"
|
|
|
|
export default function Form({ user }: EditFormProps) {
|
|
const { formatMessage } = useIntl()
|
|
/**
|
|
* 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: {
|
|
"address.city": user.address.city ?? "",
|
|
"address.countryCode": user.address.countryCode ?? "",
|
|
"address.streetAddress": user.address.streetAddress ?? "",
|
|
"address.zipCode": user.address.zipCode ?? "",
|
|
dateOfBirth: user.dateOfBirth,
|
|
email: user.email,
|
|
language: user.language,
|
|
phoneNumber: user.phoneNumber,
|
|
currentPassword: "",
|
|
newPassword: "",
|
|
retypeNewPassword: "",
|
|
},
|
|
mode: "all",
|
|
resolver: zodResolver(editProfileSchema),
|
|
reValidateMode: "onChange",
|
|
})
|
|
|
|
return (
|
|
<FormProvider {...form}>
|
|
<Header>
|
|
<hgroup>
|
|
<Title as="h4" color="peach80" level="h1">
|
|
{formatMessage({ id: "Edit" })}
|
|
</Title>
|
|
<Title as="h4" color="burgundy" level="h2">
|
|
{user.name}
|
|
</Title>
|
|
</hgroup>
|
|
<div className={styles.btns}>
|
|
<Button
|
|
form={formId}
|
|
intent="primary"
|
|
size="small"
|
|
theme="primaryDark"
|
|
type="reset"
|
|
>
|
|
{formatMessage({ id: "Discard changes" })}
|
|
</Button>
|
|
<Button
|
|
disabled={!form.formState.isValid || form.formState.isSubmitting}
|
|
form={formId}
|
|
intent="secondary"
|
|
size="small"
|
|
theme="base"
|
|
type="submit"
|
|
>
|
|
{formatMessage({ id: "Save" })}
|
|
</Button>
|
|
</div>
|
|
</Header>
|
|
<Divider color="burgundy" opacity={8} />
|
|
<form action={formAction} className={styles.form} id={formId}>
|
|
<FormContent />
|
|
</form>
|
|
</FormProvider>
|
|
)
|
|
}
|