Add char limit for goal title

pbteja1998 · pbteja1998 · commit 5deeebe975ac · 2021-02-21T14:56:28.000+05:30
diff --git a/src/components/goals/EditGoal.tsx b/src/components/goals/EditGoal.tsx
@@ -76,14 +76,18 @@ export default function EditGoal({
           <div className="min-w-0 flex-1">
             <form onSubmit={handleSubmit(onSubmit)}>
               <Input
-                ref={register({ required: true })}
+                ref={register({ required: true, maxLength: 50 })}
                 defaultValue={goal.title}
                 name="title"
                 label="Goal Title"
                 type="text"
                 placeholder="Participate in #100DaysOfCode"
                 hasError={Boolean(errors.title)}
-                errorMessage="Title is required"
+                errorMessage={
+                  errors.title?.type === 'maxLength'
+                    ? 'Title should have less than 50 chars'
+                    : 'Title is required'
+                }
               />
 
               <TextArea
diff --git a/src/components/goals/NewGoal.tsx b/src/components/goals/NewGoal.tsx
@@ -57,6 +57,7 @@ export default function NewGoal() {
     toastId.current = id
     mutate(data)
   }
+
   return (
     <>
       <Toaster />
@@ -65,13 +66,17 @@ export default function NewGoal() {
           <div className="min-w-0 flex-1">
             <form onSubmit={handleSubmit(onSubmit)}>
               <Input
-                ref={register({ required: true })}
+                ref={register({ required: true, maxLength: 50 })}
                 name="title"
                 label="Goal Title"
                 type="text"
                 placeholder="Participate in #100DaysOfCode"
                 hasError={Boolean(errors.title)}
-                errorMessage="Title is required"
+                errorMessage={
+                  errors.title?.type === 'maxLength'
+                    ? 'Title should have less than 50 chars'
+                    : 'Title is required'
+                }
               />
 
               <TextArea
diff --git a/src/components/settings/ProfileSettings.tsx b/src/components/settings/ProfileSettings.tsx
@@ -107,6 +107,7 @@ export default function ProfileSettings() {
                     defaultValue={user.username}
                     ref={register({
                       required: true,
+                      maxLength: 50,
                       validate: (username: string) => {
                         if (username === user.username) {
                           return true
@@ -126,7 +127,9 @@ export default function ProfileSettings() {
                     errorMessage={
                       errors.username?.type === 'validate'
                         ? 'Username is already taken'
-                        : 'This field is required'
+                        : errors.username?.type === 'maxLength'
+                        ? 'Username should have less than 50 chars'
+                        : 'Username is required'
                     }
                   />
                   <Input
@@ -136,7 +139,7 @@ export default function ProfileSettings() {
                     defaultValue={user.image ?? ''}
                     ref={register({ required: true })}
                     hasError={Boolean(errors.image)}
-                    errorMessage="This field is required"
+                    errorMessage="Profile picture is required"
                   />
                 </div>
                 <div className="md:col-span-1 grid place-items-center">
@@ -163,19 +166,23 @@ export default function ProfileSettings() {
                 name="firstName"
                 className="col-span-4 sm:col-span-2"
                 defaultValue={user.account?.firstName}
-                ref={register({ required: true })}
+                ref={register({ required: true, maxLength: 50 })}
                 hasError={Boolean(errors.firstName)}
-                errorMessage="This field is required"
+                errorMessage={
+                  errors.firstName?.type === 'maxLength'
+                    ? 'Firstname should have less than 50 chars'
+                    : 'Firstname is required'
+                }
               />
 
               <Input
                 label="Last name"
                 type="text"
                 name="lastName"
                 className="col-span-4 sm:col-span-2"
-                ref={register}
+                ref={register({ maxLength: 50 })}
                 hasError={Boolean(errors.lastName)}
-                errorMessage="Something went wrong!!"
+                errorMessage="Lastname should have less than 50 chars"
                 defaultValue={user.account?.lastName ?? ''}
               />
             </div>
