fix: trigger validation on mount

components/Forms/Edit/Profile/index.tsx

@@ -8,6 +8,7 @@ import { usePhoneInput } from "react-international-phone"
 import { useIntl } from "react-intl"
 
 import { profile } from "@/constants/routes/myPages"
+import { trpc } from "@/lib/trpc/client"
 
 import { editProfile } from "@/actions/editProfile"
 import Button from "@/components/TempDesignSystem/Button"
@@ -33,6 +34,7 @@ export default function Form({ user }: EditFormProps) {
   const router = useRouter()
   const params = useParams()
   const lang = params.lang as Lang
+  const utils = trpc.useUtils()
   /**
    * RHF isValid defaults to false and never
    * changes when JS is disabled, therefore
@@ -69,6 +71,7 @@ export default function Form({ user }: EditFormProps) {
     resolver: zodResolver(editProfileSchema),
     reValidateMode: "onChange",
   })
+  const trigger = methods.trigger
 
   async function handleSubmit(data: EditProfileSchema) {
     const response = await editProfile(data)
@@ -89,11 +92,7 @@ export default function Form({ user }: EditFormProps) {
         toast.success(
           intl.formatMessage({ id: "Successfully updated profile!" })
         )
-        /**
+        utils.user.get.invalidate()
-         * TODO: Toaster?
-         * Design only has toasters for credit cards
-         * and membership cards
-         */
         router.push(profile[lang])
         break
     }
@@ -103,6 +102,10 @@ export default function Form({ user }: EditFormProps) {
     setIsValid(methods.formState.isValid)
   }, [setIsValid, methods.formState.isValid])
 
+  useEffect(() => {
+    trigger()
+  }, [trigger])
+
   return (
     <section className={styles.container}>
       <hgroup className={styles.title}>