fix: can't update user profile bio passed 256 chars (#1898)

open-sauced · Oct 17, 2023 · 42c99c7 · 42c99c7
2 parents f0f3bab + e018f6b
commit 42c99c7
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -51,6 +51,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
   const [timezone, setTimezone] = useState("");
   const [userInfo, setUserInfo] = useState<DbUser>();
   const [email, setEmail] = useState<string | undefined>("");
+  const [bio, setBio] = useState("");
   const [emailPreference, setEmailPreference] = useState<EmailPreferenceType>({
     // eslint-disable-next-line camelcase
     display_email: false,
@@ -71,7 +72,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
       setEmail(response.email);
       setDisplayLocalTime(response.display_local_time);
       setCoupon(response.coupon_code);
-      formRef.current!.bio.value = response.bio;
+      setBio(response.bio);
       formRef.current!.url.value = response.url;
       formRef.current!.twitter_username.value = response.twitter_username;
       formRef.current!.company.value = response.company;
@@ -162,7 +163,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
     const payload: UpdateUserPayload = {
       name: formRef.current!.nameInput.value,
       email,
-      bio: formRef.current!.bio.value,
+      bio,
       // eslint-disable-next-line camelcase
       twitter_username: formRef.current!.twitter_username.value,
       company: formRef.current!.company.value,
@@ -227,7 +228,18 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
                 placeholder="Tell us about yourself."
                 className="px-3 py-2 rounded-lg bg-light-slate-4 disabled:cursor-not-allowed "
                 name="bio"
+                value={bio}
+                onChange={(e) => setBio(e.target.value)}
               ></textarea>
+              {bio?.length > 255 ? (
+                <p aria-live="assertive" className="text-light-red-10 text-xs">
+                  Bio too long
+                </p>
+              ) : (
+                <p aria-live="polite" className="text-xs">
+                  {bio?.length}/255
+                </p>
+              )}
             </div>
             <TextInput
               className="font-medium bg-light-slate-4 text-light-slate-11"