fix: added validation for group name and group desc

push-protocol · Oct 11, 2023 · d62a114 · d62a114
1 parent 182e209
commit d62a114
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 36 deletions.
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
@@ -26,6 +26,7 @@ import {
 
 import { Image } from '../../../config/styles';
 import { ProfilePicture, device } from '../../../config';
+import { CriteriaValidationErrorType } from '../types';
 
 export const CREATE_GROUP_STEP_KEYS = {
   INPUT_DETAILS: 1,
@@ -162,7 +163,8 @@ const CreateGroupDetail = ({
   const groupInfoToast = useToast();
   const { groupName, groupDescription, groupImage } = groupInputDetails;
   const theme = useContext(ThemeContext);
-
+  const [validationErrors, setValidationErrors] =
+    useState<CriteriaValidationErrorType>({});
   const fileUploadInputRef = useRef<HTMLInputElement>(null);
   const isMobile = useMediaQuery(device.mobileL);
 
@@ -205,21 +207,20 @@ const CreateGroupDetail = ({
     if (!skipVerify) {
       // verify name
       if (groupName.trim().length === 0) {
-        showError('Group Name is empty');
+        setValidationErrors({
+          groupName: 'Group name cannot be empty',
+        });
         return;
       }
 
       // verify description
       if (groupDescription.trim().length === 0) {
-        showError('Group Description is empty');
+        setValidationErrors({
+          groupDescription: 'Group Description is empty',
+        });
         return;
       }
 
-      // verify description
-      // if (!groupImage) {
-      //   showError("Group image can't be empty");
-      //   return;
-      // }
     }
 
     if (handleNext) {
@@ -268,31 +269,42 @@ const CreateGroupDetail = ({
           onChange={(e) => handleChange(e as unknown as Event)}
         />
       </UploadContainer>
-      <TextInput
-        labelName="Group Name"
-        charCount={30}
-        inputValue={groupName}
-        onInputChange={(e: any) =>
-          setGroupInputDetails({
-            groupDescription,
-            groupName: e.target.value,
-            groupImage,
-          })
-        }
-      />
-
-      <TextArea
-        labelName="Group Description"
-        charCount={80}
-        inputValue={groupDescription}
-        onInputChange={(e: any) =>
-          setGroupInputDetails({
-            groupDescription: e.target.value,
-            groupName,
-            groupImage,
-          })
-        }
-      />
+      <Section gap="10px" flexDirection="column" alignItems="start">
+        <TextInput
+          labelName="Group Name"
+          charCount={30}
+          inputValue={groupName}
+          onInputChange={(e: any) =>
+            setGroupInputDetails({
+              groupDescription,
+              groupName: e.target.value,
+              groupImage,
+            })
+          }
+          error={!!validationErrors?.groupName}
+        />
+        {!!validationErrors?.groupName && (
+          <ErrorSpan>{validationErrors?.groupName}</ErrorSpan>
+        )}
+      </Section>
+      <Section gap="10px" flexDirection="column" alignItems="start">
+        <TextArea
+          labelName="Group Description"
+          charCount={80}
+          inputValue={groupDescription}
+          onInputChange={(e: any) =>
+            setGroupInputDetails({
+              groupDescription: e.target.value,
+              groupName,
+              groupImage,
+            })
+          }
+          error={!!validationErrors?.groupDescription}
+        />
+        {!!validationErrors?.groupDescription && (
+          <ErrorSpan>{validationErrors?.groupDescription}</ErrorSpan>
+        )}
+      </Section>
       <Button width="197px" onClick={verifyAndHandelNext}>
         Next
       </Button>
@@ -339,3 +351,9 @@ const UpdatedImageContainer = styled.div`
 const FileInput = styled.input`
   display: none;
 `;
+
+const ErrorSpan = styled(Span)`
+  font-size: 12px;
+  font-weight: 500;
+  color: #ed5858;
+`;
diff --git a/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts b/packages/uiweb/src/lib/components/chat/types/tokenGatedGroupCreationType.ts
@@ -80,5 +80,6 @@ export type CriteriaValidationErrorType = {
   guildId?:string,
   guildComparison?:string;
   guildRole?:string;
-
+  groupName?:string;
+  groupDescription?:string;
 }
diff --git a/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts b/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
@@ -19,9 +19,9 @@ export const useCreateGatedGroup = () => {
           isPublic: groupInfoType.isPublic,
           members: [],
           admins: [],
-          account: account || '',
+          account: account || undefined,
           env: env,
-          pgpPrivateKey: pgpPrivateKey,
+          pgpPrivateKey: pgpPrivateKey || undefined,
           rules: rules,
         };
         const response = await PushAPI.chat.createGroup(payload);