feat(WEB-162): final design edit profile page

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

@@ -1,27 +0,0 @@
-"use client"
-import { useEffect } from "react"
-import { useFormStatus } from "react-dom"
-
-// import { useWatch } from "react-hook-form"
-// import { useIntl } from "react-intl"
-import { useProfileStore } from "@/stores/edit-profile"
-
-import type { EditFormContentProps } from "@/types/components/myPages/myProfile/edit"
-
-export default function FormContent({ control }: EditFormContentProps) {
-  // const { formatMessage } = useIntl()
-  const { pending } = useFormStatus()
-  const setIsPending = useProfileStore((store) => store.setIsPending)
-  // const country = useWatch({ name: "address.country" })
-
-  useEffect(() => {
-    setIsPending(pending)
-  }, [pending, setIsPending])
-
-  // const city = formatMessage({ id: "City" })
-  // const email = formatMessage({ id: "Email" })
-  // const street = formatMessage({ id: "Street" })
-  // const zipCode = formatMessage({ id: "Zip code" })
-
-  return <></>
-}

components/MyProfile/Profile/Edit/Form/form.module.css

@@ -1,5 +0,0 @@
-.form {
-  display: grid;
-  gap: var(--Spacing-x2);
-  grid-template-columns: 1fr 1fr;
-}

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

@@ -1,54 +0,0 @@
-"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>
-  )
-}

components/MyProfile/Profile/Edit/Form/schema.ts

@@ -1,18 +0,0 @@
-import { z } from "zod"
-
-import { phoneValidator } from "@/utils/phoneValidator"
-
-export const editProfileSchema = z.object({
-  "address.country": z.string().min(1),
-  "address.city": z.string().optional(),
-  "address.streetAddress": z.string().optional(),
-  "address.zipCode": z.string().min(1),
-  dateOfBirth: z.string().min(1),
-  email: z.string().email(),
-  phoneNumber: phoneValidator(
-    "Phone is required",
-    "Please enter a valid phone number"
-  ),
-})
-
-export type EditProfileSchema = z.infer<typeof editProfileSchema>

components/MyProfile/Profile/Edit/index.tsx

@@ -1,11 +0,0 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import Form from "./Form"
-
-export default async function EditProfile() {
-  const user = await serverClient().user.get()
-  if (!user) {
-    return null
-  }
-  return <Form user={user} />
-}