From c7832f425f7b0fefc2c843dbe8549ae9d8e1eaeb Mon Sep 17 00:00:00 2001
From: jinkang-0 <jinkang.fang@gmail.com>
Date: Thu, 23 May 2024 15:07:38 -0700
Subject: [PATCH] make comment error instant

---
 src/app/onboarding/legal-credentials/page.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/onboarding/legal-credentials/page.tsx b/src/app/onboarding/legal-credentials/page.tsx
index 7e732136..260ccd70 100644
--- a/src/app/onboarding/legal-credentials/page.tsx
+++ b/src/app/onboarding/legal-credentials/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -35,6 +35,7 @@ export default function Page() {
   const onboarding = useGuardedOnboarding();
   const { backlinkHref, ebbTo, pageProgress } = useOnboardingNavigation();
   const { push } = useRouter();
+  const [commentError, setCommentError] = useState('');
 
   // scroll to top
   useScrollToTop();
@@ -228,8 +229,13 @@ export default function Page() {
                   <TextAreaInput
                     placeholder="There are some extenuating circumstances with..."
                     defaultValue={field.value ?? ''}
-                    error={fieldState.error?.message}
+                    error={fieldState.error?.message ?? commentError}
                     onChange={newValue => {
+                      setCommentError(
+                        newValue.length > 400
+                          ? 'Please keep it within 400 characters'
+                          : '',
+                      );
                       onboarding.updateProfile({
                         legal_credential_comment: newValue,
                       });