From 56e98fa599dc450d0d409ac09b21e6dc435a9126 Mon Sep 17 00:00:00 2001
From: jinkang-0 <jinkang.fang@gmail.com>
Date: Thu, 23 May 2024 15:19:35 -0700
Subject: [PATCH] make availability error instant

---
 src/app/onboarding/availability/page.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/onboarding/availability/page.tsx b/src/app/onboarding/availability/page.tsx
index 7865a40d..0dbf9fc1 100644
--- a/src/app/onboarding/availability/page.tsx
+++ b/src/app/onboarding/availability/page.tsx
@@ -31,6 +31,7 @@ export default function Page() {
   const onboarding = useGuardedOnboarding();
   const { backlinkHref, ebbTo, pageProgress } = useOnboardingNavigation();
   const { push } = useRouter();
+  const [availabilityError, setAvailabilityError] = useState('');
 
   // scroll to top
   useScrollToTop();
@@ -184,8 +185,13 @@ export default function Page() {
                   <TextAreaInput
                     placeholder="I won't be available from..."
                     defaultValue={field.value ?? ''}
-                    error={fieldState.error?.message}
+                    error={fieldState.error?.message ?? availabilityError}
                     onChange={newValue => {
+                      setAvailabilityError(
+                        newValue.length > 400
+                          ? 'Please keep it within 400 characters'
+                          : '',
+                      );
                       onboarding.updateProfile({
                         availability_description: newValue,
                       });