From 32304fdcb1527f44769cb1a0f16f87de4cf65ccf Mon Sep 17 00:00:00 2001 From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Date: Tue, 10 Oct 2023 14:01:44 +0530 Subject: [PATCH] Gp states fix (#763) * feat: conditions to chat added * feat: generation of payload done * refactor: rule generation done * feat: operator undefined fix * fix: fixed condition ui * feat: create group rest api call done * fix: fixed dropdown * feat: group detail info fix done * fix: added validation for guild --------- Co-authored-by: Abishek Bashyal --- .../sdk-frontend-react/src/app/app.tsx | 2 +- .../chat/CreateGroup/AddButtons.tsx | 1 + .../chat/CreateGroup/AddCriteria.tsx | 354 ++++++++---------- .../chat/CreateGroup/ConditionsComponent.tsx | 156 +++++--- .../chat/CreateGroup/CreateGroupModal.tsx | 251 ++++++++----- .../chat/CreateGroup/CreateGroupType.tsx | 98 +++-- .../chat/CreateGroup/DefineCondition.tsx | 77 ++-- .../chat/CreateGroup/OperatorContainer.tsx | 8 +- .../src/lib/components/chat/helpers/index.ts | 3 +- .../chat/helpers/tokenGatedGroup.ts | 48 ++- .../src/lib/components/chat/types/index.ts | 28 ++ .../chat/types/tokenGatedGroupCreationType.ts | 5 + .../src/lib/hooks/chat/useCreateGatedGroup.ts | 43 +++ .../src/lib/hooks/chat/useCriteriaState.ts | 141 ++++++- .../src/lib/hooks/chat/usePushSendMessage.ts | 2 +- 15 files changed, 778 insertions(+), 439 deletions(-) create mode 100644 packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx index c4fc798cd..98a5bd2c7 100644 --- a/packages/examples/sdk-frontend-react/src/app/app.tsx +++ b/packages/examples/sdk-frontend-react/src/app/app.tsx @@ -313,7 +313,7 @@ export function App() { - + { const [selectedTypeValue, setSelectedTypeValue] = useState(0); const [selectedCategoryValue, setSelectedCategoryValue] = useState(0); const [selectedSubCategoryValue, setSelectedSubCategoryValue] = useState(0); - const [guildComparison, setGuildComparison] = useState(''); + const [guildComparison, setGuildComparison] = useState('') const [selectedChainValue, setSelectedChainValue] = useState(0); const [contract, setContract] = useState(''); const [inviteCheckboxes, setInviteCheckboxes] = useState<{ @@ -66,15 +63,6 @@ const AddCriteria = ({ }); const { env } = useChatData(); const theme = useContext(ThemeContext); - const [disableButton, setDisableButton] = useState(true); - const customButtonStyle = { - background: disableButton - ? theme.backgroundColor?.buttonDisableBackground - : theme.backgroundColor?.buttonBackground, - color: disableButton - ? theme.textColor?.buttonDisableText - : theme.textColor?.buttonText, - }; const isMobile = useMediaQuery(device.mobileL); @@ -284,9 +272,6 @@ const AddCriteria = ({ const getSubCategoryDropdownValues = () => { const category = getCategoryDropdownValues(); - console.log(category); - console.log(selectedCategoryValue); - console.log((category as DropdownValueType[])[selectedCategoryValue]); if (Array.isArray(category)) return dropdownSubCategoryValues[ (category as DropdownValueType[])[selectedCategoryValue] @@ -299,145 +284,133 @@ const AddCriteria = ({ setQuantity({ ...quantity, value: e.target.value }); }; - const verifyAndDoNext = () => { - const _type = dropdownTypeValues[selectedTypeValue].value as - | 'PUSH' - | 'GUILD'; - const category: string = - _type === 'PUSH' - ? (dropdownCategoryValues[_type] as DropdownValueType[])[ - selectedCategoryValue - ].value || CATEGORY.ERC20 - : 'ROLES'; - - let subCategory = 'DEFAULT'; - if (_type === 'PUSH') { - if (category === CATEGORY.ERC20 || category === CATEGORY.ERC721) { - subCategory = tokenCategoryValues[selectedSubCategoryValue].value; - } + const verifyAndDoNext = ()=>{ + const _type = dropdownTypeValues[selectedTypeValue].value as 'PUSH' | 'GUILD' + const category:string = _type === "PUSH" ? (dropdownCategoryValues[_type] as DropdownValueType[])[ + selectedCategoryValue + ].value || CATEGORY.ERC20 : "ROLES" + + let subCategory = "DEFAULT" + if(_type === "PUSH"){ + if(category === CATEGORY.ERC20 || category === CATEGORY.ERC721){ + subCategory = tokenCategoryValues[selectedSubCategoryValue].value + }else if(category === CATEGORY.CustomEndpoint){ + subCategory = "GET" + } } - - const getData = (type: string, category: string): Data => { - if (type === 'PUSH') { - if (category === CATEGORY.ERC20 || category === CATEGORY.ERC721) { - const selectedChain = - dropdownChainsValues[selectedChainValue].value || 'eip155:1'; + + const getData = (type:string, category:string):Data=>{ + if(type === "PUSH"){ + if(category === CATEGORY.ERC20 || category === CATEGORY.ERC721){ + const selectedChain = dropdownChainsValues[selectedChainValue].value || 'eip155:1'; return { contract: `${selectedChain}:${contract}`, amount: quantity.value, - comparison: dropdownQuantityRangeValues[quantity.range].value, + comparison:dropdownQuantityRangeValues[quantity.range].value, decimals: 18, - }; - } else if (category === CATEGORY.INVITE) { - const _inviteRoles = []; - if (inviteCheckboxes.admin) { - _inviteRoles.push('ADMIN'); } - if (inviteCheckboxes.owner) { - _inviteRoles.push('OWNER'); + }else if(category === CATEGORY.INVITE){ + const _inviteRoles = [] + if(inviteCheckboxes.admin){ + _inviteRoles.push("ADMIN") + } + if(inviteCheckboxes.owner){ + _inviteRoles.push("OWNER") } - return { - inviterRoles: _inviteRoles as ['OWNER' | 'ADMIN'], - }; - } else { + return{ + inviterRoles: _inviteRoles as ['OWNER' | 'ADMIN'] + } + }else{ // CATEGORY.CustomEndpoint // TODO: validate url - return { - url: url, - }; + return{ + url:url + } } - } else { + }else{ // GUILD type return { - id: guildId, - comparison: guildComparison, - role: guildComparison === 'specific' ? specificRoleId : '*', - }; + id:guildId, + comparison:guildComparison, + role:guildComparison === 'specific' ? specificRoleId : "*", + } } - }; + } - const rule: Rule = { + const rule:Rule = { type: _type, category: category, subcategory: subCategory, data: getData(_type, category), - }; + } - entryCriteria.addNewRule(rule); + criteriaState.addNewRule(rule) - if (handlePrevious) { - handlePrevious(); + if(handlePrevious){ + handlePrevious() } - }; + + } + + const criteriaState = criteriaStateManager.getSelectedCriteria() + // Autofill the form for the update - useEffect(() => { - if (entryCriteria.isUpdateCriteriaEnabled()) { - //Load the states - const oldValue = - entryCriteria.entryOptionsDataArray[ - entryCriteria.entryOptionsDataArrayUpdate - ][entryCriteria.updateCriteriaIdx]; - - if (oldValue.type === 'PUSH') { - // category - setSelectedCategoryValue( - (dropdownCategoryValues.PUSH as DropdownValueType[]).findIndex( - (obj) => obj.value === oldValue.category + useEffect(()=>{ + if(criteriaState.isUpdateCriteriaEnabled()){ + //Load the states + const oldValue = criteriaState.selectedRules[criteriaState.updateCriteriaIdx] + + if(oldValue.type === 'PUSH'){ + + // category + setSelectedCategoryValue( + (dropdownCategoryValues.PUSH as DropdownValueType[]).findIndex(obj => obj.value === oldValue.category) + ) + + const pushData = oldValue.data as PushData + + // sub category + if(oldValue.category === CATEGORY.ERC20 || oldValue.category === CATEGORY.ERC721){ + setSelectedSubCategoryValue( + tokenCategoryValues.findIndex(obj => obj.value === oldValue.subcategory) + ) + + const contractAndChain:string[] = (pushData.contract || "eip155:1:0x").split(':') + setSelectedChainValue( + dropdownChainsValues.findIndex( + obj => obj.value === contractAndChain[0]+":"+contractAndChain[1] + ) + ) + setContract(contractAndChain.length === 3 ? contractAndChain[2]: "") + setQuantity({ + value:pushData.amount || 0, + range:dropdownQuantityRangeValues.findIndex( + obj => obj.value === pushData.comparison ) - ); - - const pushData = oldValue.data as PushData; - - // sub category - if ( - oldValue.category === CATEGORY.ERC20 || - oldValue.category === CATEGORY.ERC721 - ) { - setSelectedSubCategoryValue( - tokenCategoryValues.findIndex( - (obj) => obj.value === oldValue.subcategory - ) - ); - - const contractAndChain: string[] = ( - pushData.contract || 'eip155:1:0x' - ).split(':'); - setSelectedChainValue( - dropdownChainsValues.findIndex( - (obj) => - obj.value === contractAndChain[0] + ':' + contractAndChain[1] - ) - ); - setContract(contractAndChain.length === 3 ? contractAndChain[2] : ''); - setQuantity({ - value: pushData.amount || 0, - range: dropdownQuantityRangeValues.findIndex( - (obj) => obj.value === oldValue.data - ), - }); - } else if (oldValue.category === CATEGORY.INVITE) { - setInviteCheckboxes({ - admin: true, - owner: true, - }); - } else { - // invite - setUrl(pushData.url || ''); - } - } else { - // guild condition - setGuildId((oldValue.data as GuildData).id); - setSpecificRoleId((oldValue.data as GuildData).role); - setGuildComparison((oldValue.data as GuildData).comparison); + }) + }else if(oldValue.category === CATEGORY.INVITE){ + setInviteCheckboxes({ + admin:true, + owner:true, + }) + }else{ + // invite + setUrl(pushData.url || "") } - - setSelectedTypeValue( - dropdownTypeValues.findIndex((obj) => obj.value === oldValue.type) - ); + }else{ + // guild condition + setGuildId((oldValue.data as GuildData).id) + setSpecificRoleId((oldValue.data as GuildData).role) + setGuildComparison((oldValue.data as GuildData).comparison) } - }, []); + + setSelectedTypeValue( + dropdownTypeValues.findIndex(obj => obj.value === oldValue.type) + ) + } + },[]) return (
- {Array.isArray(getCategoryDropdownValues()) ? ( - - ) : ( - - )} - {Array.isArray(getSubCategoryDropdownValues()) ? ( - - ) : ( - - )} + {Array.isArray(getCategoryDropdownValues()) ? ( + + ) : ( + + )} + + {Array.isArray(getSubCategoryDropdownValues()) ? ( + + ) : ( + + )} {/* shift to minor components leave for now*/} {checkIfTokenNFT() && ( <> @@ -541,8 +505,8 @@ const AddCriteria = ({ } onToggle={() => setInviteCheckboxes({ - admin: true, - owner: true, + admin:true, + owner:true }) } checked={ @@ -565,27 +529,24 @@ const AddCriteria = ({ options={GUILD_COMPARISON_OPTIONS} totalWidth="410px" selectedValue={guildComparison} - handleClick={(newEl: string) => { - setGuildComparison(newEl); - }} + handleClick={(newEl:string)=>{ + setGuildComparison(newEl)}} /> - {guildComparison === 'specific' && ( + {guildComparison === "specific" && setSpecificRoleId(e.target.value)} placeholder="e.g. 4687" /> - )} + } + + )} - @@ -593,3 +554,4 @@ const AddCriteria = ({ }; export default AddCriteria; + diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx index ab4301cdd..4efb0d594 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx @@ -1,14 +1,19 @@ import React, { useContext, useRef, useState } from 'react'; + +import styled from 'styled-components'; + import { Section, Span } from '../../reusables'; import { MoreDarkIcon } from '../../../icons/MoreDark'; import { ThemeContext } from '../theme/ThemeProvider'; -import styled from 'styled-components'; -import { device } from '../../../config'; import Dropdown, { DropdownValueType } from '../reusables/DropDown'; -import EditSvg from '../../../icons/EditSvg.svg'; -import RemoveSvg from '../../../icons/RemoveSvg.svg'; import { ConditionArray, ConditionData, IChatTheme } from '../exportedTypes'; import { useClickAway } from '../../../hooks'; +import { CATEGORY, CRITERIA_TYPE, CriteriaType, TOKEN_NFT_COMPARISION, TokenNftComparision } from '../types'; + +import EditSvg from '../../../icons/EditSvg.svg'; +import RemoveSvg from '../../../icons/RemoveSvg.svg'; +import { shortenText } from '../../../helpers'; +import { GUILD_COMPARISON_OPTIONS } from '../constants'; export type CriteraValueType = { invertedIcon?: any; @@ -22,8 +27,8 @@ export type CriteraValueType = { interface CriteriaProps { conditionData: ConditionArray[]; moreOptions?: boolean; - deleteFunction?:(idx:number)=>void; - updateFunction?:(idx:number)=>void; + deleteFunction?: (idx: number) => void; + updateFunction?: (idx: number) => void; } interface MoreOptionsContainerProps { @@ -48,9 +53,8 @@ const MoreOptionsContainer = ({ const dropdownRef = useRef(null); useClickAway(dropdownRef, () => setSelectedIndex(null)); -console.log('in dropdown') return ( -
handleMoreOptionsClick(row, col)}> +
handleMoreOptionsClick(row, col)} position='static'> {selectedIndex?.length && selectedIndex[0] === row && ( @@ -63,30 +67,82 @@ console.log('in dropdown')
); }; + const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => { const theme = useContext(ThemeContext); + const getTokenNftComparisionLabel = () => { + return TOKEN_NFT_COMPARISION[ + criteria?.data?.['comparison'] as TokenNftComparision + ]; + }; + const checkIfNftToken = () => { + if ( + criteria?.category === CATEGORY.ERC721 || + criteria?.category === CATEGORY.ERC20 + ) + return true; + return false; + }; + + const getGuildRole = () =>{ + return (GUILD_COMPARISON_OPTIONS.find(option => option.value === criteria?.data?.['comparison']))?.heading; + + } return (
- {criteria.category} + {CRITERIA_TYPE[criteria.category as CriteriaType]} - - {criteria.type}{' '} - or more + {checkIfNftToken() && ( + + + {getTokenNftComparisionLabel()}{' '} + + {/* need to fetch token symbol */} + {criteria?.data?.['amount']} {criteria.category} + + )} + {criteria.category === CATEGORY.INVITE && ( + + Owner and Admin can invite + + )} + {criteria.category === CATEGORY.CustomEndpoint && ( + + {shortenText(criteria.data?.['url'],30)} + + )} + {criteria.category === CATEGORY.ROLES && ( + + {criteria?.data?.['id']} {' '} + + with {' '} + + {getGuildRole()} role + )}
); }; -// fix dropdown ui -const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction,moreOptions = true }: CriteriaProps) => { +// fix dropdown ui +const ConditionsComponent = ({ + conditionData, + deleteFunction, + updateFunction, + moreOptions = true, +}: CriteriaProps) => { const [selectedIndex, setSelectedIndex] = useState | null>( null ); @@ -100,9 +156,10 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction,moreO title: 'Edit', icon: EditSvg, function: () => { - if(updateFunction){ - if(selectedIndex){ - updateFunction(selectedIndex[0]) + if (updateFunction) { + if (selectedIndex) { + updateFunction(selectedIndex[0]); + setSelectedIndex(null); } } }, @@ -113,9 +170,10 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction,moreO title: 'Remove', icon: RemoveSvg, function: () => { - if(deleteFunction){ - if(selectedIndex){ - deleteFunction(selectedIndex[0]) + if (deleteFunction) { + if (selectedIndex) { + deleteFunction(selectedIndex[0]); + setSelectedIndex(null); } } }, @@ -126,16 +184,16 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction,moreO useClickAway(dropdownRef, () => setSelectedIndex(null)); const handleMoreOptionsClick = (row: number, col: number) => { - console.log('in click') setSelectedIndex([row, col]); }; return ( -
+
{conditionData && conditionData.slice(1).map((criteria, row) => (
- {criteria.length === 1 && + {criteria.length <= 2 && + criteria.length >= 1 && criteria.map((singleCriteria, col) => ( <> {singleCriteria.type && ( @@ -146,24 +204,22 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction,moreO justifyContent="space-between" > - { - moreOptions && ( - - ) - } + {moreOptions && ( + + )}
)} ))} - {criteria.length > 1 && ( + {criteria[0]?.operator && criteria.length > 2 && ( ))}
-
+
{criteria.map((singleCriteria) => ( <> - {singleCriteria.operator && !singleCriteria.type && ( - - {singleCriteria.operator} - - )} + {criteria.length > 2 && + singleCriteria.operator && + !singleCriteria.type && ( + + {singleCriteria.operator} + + )} ))} {moreOptions && ( @@ -223,7 +282,7 @@ const ConditionsComponent = ({ conditionData,deleteFunction,updateFunction,moreO row < conditionData.length - 2 && conditionData[0][0]?.operator && ( // this can be reused - + {conditionData[0][0].operator} )} @@ -237,8 +296,9 @@ export default ConditionsComponent; const DropdownContainer = styled.div` position: absolute; - left: 48%; - top: 10%; + // left: 48%; + top: 0; + right: 0; border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents}; padding: 6px 32px 6px 12px; @@ -247,13 +307,11 @@ const DropdownContainer = styled.div` flex-direction: column !important; background: ${(props) => props.theme.backgroundColor.modalBackground}; border: ${(props) => props.theme.border.modalInnerComponents}; - - `; const OperatorSpan = styled(Span)<{ theme: IChatTheme }>` padding: 4px 8px; - margin:8px 0; + margin: 8px 0; border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents}; background: ${(props) => props.theme.backgroundColor.modalHoverBackground}; color: ${(props) => props.theme.textColor?.modalSubHeadingText}; diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx index 39e8bcfe2..45e660d33 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx @@ -1,9 +1,10 @@ import React, { useContext, useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; +import { ToastContainer } from 'react-toastify'; import { AiTwotoneCamera } from 'react-icons/ai'; +import { MdError } from 'react-icons/md'; -//spaces things shouldnot be used import { ModalHeader } from '../reusables/Modal'; import { Modal } from '../reusables/Modal'; import { TextInput } from '../reusables/TextInput'; @@ -12,19 +13,19 @@ import { Section, Span } from '../../reusables'; import { Button } from '../reusables'; import { CreateGroupType } from './CreateGroupType'; import useToast from '../reusables/NewToast'; -import { MdError } from 'react-icons/md'; - -import {Image} from "../../../config/styles" -import { device } from '../../../config'; import { CreateGroupModalProps, IChatTheme } from '../exportedTypes'; import useMediaQuery from '../../../hooks/useMediaQuery'; import { DefineCondtion } from './DefineCondition'; import AddCriteria from './AddCriteria'; import { SpamIcon } from '../../../icons/SpamIcon'; import { ThemeContext } from '../theme/ThemeProvider'; -import { ToastContainer } from 'react-toastify'; -import { CriteriaStateType} from '../types/tokenGatedGroupCreationType'; -import { useCriteriaState } from '../../../hooks/chat/useCriteriaState'; +import { + CriteriaStateManagerType, + useCriteriaStateManager, +} from '../../../hooks/chat/useCriteriaState'; + +import { Image } from '../../../config/styles'; +import { ProfilePicture, device } from '../../../config'; export const CREATE_GROUP_STEP_KEYS = { INPUT_DETAILS: 1, @@ -34,13 +35,12 @@ export const CREATE_GROUP_STEP_KEYS = { } as const; export type CreateGroupStepKeys = - (typeof CREATE_GROUP_STEP_KEYS)[keyof typeof CREATE_GROUP_STEP_KEYS]; - + typeof CREATE_GROUP_STEP_KEYS[keyof typeof CREATE_GROUP_STEP_KEYS]; -interface GroupInputDetailsType{ - groupName:string; - groupDescription:string; - groupImage:string|null; +interface GroupInputDetailsType { + groupName: string; + groupDescription: string; + groupImage: string; } export const CreateGroupModal: React.FC = ({ @@ -52,81 +52,120 @@ export const CreateGroupModal: React.FC = ({ ); const handleNext = () => { - setActiveComponent(activeComponent+1 as CreateGroupStepKeys); + setActiveComponent((activeComponent + 1) as CreateGroupStepKeys); }; const handlePrevious = () => { - setActiveComponent(activeComponent-1 as CreateGroupStepKeys); + setActiveComponent((activeComponent - 1) as CreateGroupStepKeys); }; - - const entryCriteria = useCriteriaState() - useEffect(()=>{ + const criteriaStateManager = useCriteriaStateManager(); + + useEffect(() => { // reset update rules - if(activeComponent === 2){ - entryCriteria.selectEntryOptionsDataArrayForUpdate(-1) - entryCriteria.setSelectedRule([]) - }else if(activeComponent === 3){ - entryCriteria.setUpdateCriteriaIdx(-1) + if (activeComponent === 2) { + criteriaStateManager.resetRules(); + } else if (activeComponent === 3) { + criteriaStateManager.resetCriteriaIdx(); } - },[activeComponent]) - - const [groupInputDetails, setGroupInputDetails] = useState({ - groupName:'', - groupDescription:'', - groupImage:null - }) + }, [activeComponent]); + const [groupInputDetails, setGroupInputDetails] = + useState({ + groupName: 'Push Group Chat', + groupDescription: 'This is the oficial group for Push Protocol', + groupImage: ProfilePicture, + }); const renderComponent = () => { switch (activeComponent) { case CREATE_GROUP_STEP_KEYS.INPUT_DETAILS: - return ; + return ( + + ); case CREATE_GROUP_STEP_KEYS.GROUP_TYPE: - return ; + return ( + + ); case CREATE_GROUP_STEP_KEYS.DEFINITE_CONDITION: - return + return ( + + ); case CREATE_GROUP_STEP_KEYS.ADD_CRITERIA: - return + return ( + + ); default: - return ; + return ( + + ); } }; - return {renderComponent()} ; + return ( + + {renderComponent()} + + ); }; export interface ModalHeaderProps { handleNext?: () => void; - handlePrevious?:() =>void; + handlePrevious?: () => void; onClose: () => void; - entryCriteria:CriteriaStateType; + criteriaStateManager: CriteriaStateManagerType; } -interface GroupDetailState{ +interface GroupDetailState { groupInputDetails: GroupInputDetailsType; - setGroupInputDetails: React.Dispatch> + setGroupInputDetails: React.Dispatch< + React.SetStateAction + >; } -export interface GroupTypeState{ +export interface GroupTypeState { groupInputDetails: GroupInputDetailsType; } -const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInputDetails }: ModalHeaderProps & GroupDetailState ) => { - +const CreateGroupDetail = ({ + handleNext, + onClose, + groupInputDetails, + setGroupInputDetails, +}: ModalHeaderProps & GroupDetailState) => { const groupInfoToast = useToast(); const { groupName, groupDescription, groupImage } = groupInputDetails; const theme = useContext(ThemeContext); const fileUploadInputRef = useRef(null); const isMobile = useMediaQuery(device.mobileL); - + const handleChange = (e: Event) => { if (!(e.target instanceof HTMLInputElement)) { return; @@ -142,57 +181,66 @@ const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInpu reader.readAsDataURL(e.target.files[0]); reader.onloadend = function () { - setGroupInputDetails({groupDescription,groupName,groupImage:reader.result as string}) + setGroupInputDetails({ + groupDescription, + groupName, + groupImage: reader.result as string, + }); }; } }; - const showError =(errorMessage:string)=>{ + const showError = (errorMessage: string) => { groupInfoToast.showMessageToast({ toastTitle: 'Error', toastMessage: errorMessage, toastType: 'ERROR', getToastIcon: (size) => , }); - } + }; - const verifyAndHandelNext = ()=>{ - const skipVerify = true; + const verifyAndHandelNext = () => { + const skipVerify = false; - if(!skipVerify){ + if (!skipVerify) { // verify name - if (groupName.trim().length === 0){ - showError("Group Name is empty") - return + if (groupName.trim().length === 0) { + showError('Group Name is empty'); + return; } // verify description - if (groupDescription.trim().length === 0){ - showError("Group Description is empty") - return + if (groupDescription.trim().length === 0) { + showError('Group Description is empty'); + return; } - // verify description - if (!groupImage){ - showError("Group image can't be empty") - return + // verify description + if (!groupImage) { + showError("Group image can't be empty"); + return; } } - - if(handleNext){ - handleNext() + + if (handleNext) { + handleNext(); } - } + }; const handleUpload = () => { - if(fileUploadInputRef.current) { + if (fileUploadInputRef.current) { fileUploadInputRef.current.click(); } - } + }; //groupImage and desccription is optional return ( -
+
@@ -203,13 +251,19 @@ const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInpu )} {groupImage && ( - group image + group image )} handleChange(e as unknown as Event)} /> @@ -218,14 +272,26 @@ const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInpu labelName="Group Name" charCount={30} inputValue={groupName} - onInputChange={(e: any) => setGroupInputDetails({groupDescription,groupName:e.target.value,groupImage})} + onInputChange={(e: any) => + setGroupInputDetails({ + groupDescription, + groupName: e.target.value, + groupImage, + }) + } />