increase profile name max length to 40 (#1379)

* changed max chars for profile name from 16 to 30
* Changed max to 40 and import from settings

Co-authored-by: Glenn 'devalias' Grant <[email protected]>

Author: margulies

src/components/organisms/EditProfileModal/EditProfileModal.tsx

@@ -7,6 +7,7 @@ import { QuestionsFormData } from "pages/Account/Questions";
 import { updateUserProfile } from "pages/Account/helpers";
 import { QuestionType } from "types/Question";
 import ProfilePictureInput from "components/molecules/ProfilePictureInput";
+import { DISPLAY_NAME_MAX_CHAR_COUNT } from "settings";
 import { useUser } from "hooks/useUser";
 import { useSelector } from "hooks/useSelector";
 import { currentVenueSelectorData } from "utils/selectors";
@@ -74,15 +75,16 @@ const EditProfileModal: React.FunctionComponent<PropsType> = ({
               placeholder="Your display name"
               ref={register({
                 required: true,
-                maxLength: 16,
+                maxLength: DISPLAY_NAME_MAX_CHAR_COUNT,
               })}
             />
             {errors.partyName && errors.partyName.type === "required" && (
               <span className="input-error">Display name is required</span>
             )}
             {errors.partyName && errors.partyName.type === "maxLength" && (
               <span className="input-error">
-                Display name must be 16 characters or less
+                Display name must be {DISPLAY_NAME_MAX_CHAR_COUNT} characters or
+                less
               </span>
             )}
             {user && (

src/components/organisms/ProfileModal/EditProfileForm/EditProfileForm.tsx

@@ -7,7 +7,7 @@ import { updateUserProfile } from "pages/Account/helpers";
 import { QuestionType } from "types/Question";
 import ProfilePictureInput from "components/molecules/ProfilePictureInput";
 import { useUser } from "hooks/useUser";
-import { DEFAULT_PROFILE_IMAGE } from "settings";
+import { DEFAULT_PROFILE_IMAGE, DISPLAY_NAME_MAX_CHAR_COUNT } from "settings";
 import { useSelector } from "hooks/useSelector";
 import { currentVenueSelectorData } from "utils/selectors";
 
@@ -70,15 +70,16 @@ const EditProfileForm: React.FunctionComponent<PropsType> = ({
             placeholder="Your display name"
             ref={register({
               required: true,
-              maxLength: 16,
+              maxLength: DISPLAY_NAME_MAX_CHAR_COUNT,
             })}
           />
           {errors.partyName && errors.partyName.type === "required" && (
             <span className="input-error">Display name is required</span>
           )}
           {errors.partyName && errors.partyName.type === "maxLength" && (
             <span className="input-error">
-              Display name must be 16 characters or less
+              Display name must be {DISPLAY_NAME_MAX_CHAR_COUNT} characters or
+              less
             </span>
           )}
           {user && (

src/pages/Account/Profile.tsx

@@ -9,7 +9,7 @@ import { RouterLocation } from "types/RouterLocation";
 import { useUser } from "hooks/useUser";
 import { IS_BURN } from "secrets";
 import getQueryParameters from "utils/getQueryParameters";
-import { DEFAULT_VENUE } from "settings";
+import { DEFAULT_VENUE, DISPLAY_NAME_MAX_CHAR_COUNT } from "settings";
 import { useVenueId } from "hooks/useVenueId";
 
 export interface ProfileFormData {
@@ -71,19 +71,21 @@ const Profile: React.FunctionComponent<PropsType> = ({ location }) => {
               placeholder="Your display name"
               ref={register({
                 required: true,
-                maxLength: 16,
+                maxLength: DISPLAY_NAME_MAX_CHAR_COUNT,
               })}
               autoComplete="off"
             />
             <span className="input-info">
-              This is your public name (max 16 characters)
+              This is your display name (max {DISPLAY_NAME_MAX_CHAR_COUNT}{" "}
+              characters)
             </span>
             {errors.partyName && errors.partyName.type === "required" && (
               <span className="input-error">Display name is required</span>
             )}
             {errors.partyName && errors.partyName.type === "maxLength" && (
               <span className="input-error">
-                Display name must be 16 characters or less
+                Display name must be {DISPLAY_NAME_MAX_CHAR_COUNT} characters or
+                less
               </span>
             )}
             {user && (

src/settings.ts

@@ -54,6 +54,7 @@ export const SPARKLEVERSE_LOGO_URL = sparkleverseLogo;
 export const DEFAULT_PARTY_NAME = "Anon";
 export const DEFAULT_EDIT_PROFILE_TEXT =
   "I haven't edited my profile to tell you yet";
+export const DISPLAY_NAME_MAX_CHAR_COUNT = 40;
 export const VENUE_CHAT_AGE_DAYS = 30;
 export const VENUE_NAME_MIN_CHAR_COUNT = 3;
 export const VENUE_NAME_MAX_CHAR_COUNT = 50;