Skip to content

Commit

Permalink
feat: create group info validation done
Browse files Browse the repository at this point in the history
  • Loading branch information
@MdTeach
MdTeach committed Sep 29, 2023
1 parent ef49fd9 commit 6fdbaed
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 28 deletions.
95 changes: 80 additions & 15 deletions packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { TextArea } from '../reusables/TextArea';
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, device } from '../../../config';
Expand All @@ -26,28 +28,49 @@ export type CreateGroupStepKeys =
(typeof CREATE_GROUP_STEP_KEYS)[keyof typeof CREATE_GROUP_STEP_KEYS];



interface GroupInputDetailsType{
groupName:string;
groupDescription:string;
groupImage:string|null;
}

export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
onClose,
}) => {
const [activeComponent, setActiveComponent] = useState<CreateGroupStepKeys>(
CREATE_GROUP_STEP_KEYS.INPUT_DETAILS
);

const handleNext = () => {
setActiveComponent(activeComponent+1 as CreateGroupStepKeys);
};
const handlePrevious = () => {
setActiveComponent(activeComponent-1 as CreateGroupStepKeys);
};

const [groupInputDetails, setGroupInputDetails] = useState<GroupInputDetailsType>({
groupName:'',
groupDescription:'',
groupImage:null
})

const renderComponent = () => {
switch (activeComponent) {
case CREATE_GROUP_STEP_KEYS.INPUT_DETAILS:
return <CreateGroupDetail handleNext={handleNext} onClose={onClose} />;
return <CreateGroupDetail
handleNext={handleNext}
onClose={onClose}
groupInputDetails={groupInputDetails}
setGroupInputDetails={setGroupInputDetails}
/>;
case CREATE_GROUP_STEP_KEYS.GROUP_TYPE:
return <CreateGroupType onClose={onClose} handlePrevious={handlePrevious}/>;
return <CreateGroupType onClose={onClose} handlePrevious={handlePrevious} groupInputDetails={groupInputDetails}/>;
default:
return <CreateGroupDetail onClose={onClose} />;
return <CreateGroupDetail
onClose={onClose}
groupInputDetails={groupInputDetails}
setGroupInputDetails={setGroupInputDetails}
/>;
}
};

Expand All @@ -59,10 +82,21 @@ export interface ModalHeaderProps {
handlePrevious?:() =>void;
onClose: () => void;
}
const CreateGroupDetail = ({ handleNext, onClose }: ModalHeaderProps) => {
const [groupName, setGroupName] = useState<string>('');
const [groupImage, setGroupImage] = useState<string | null>(null);
const [groupDescription, setGroupDescription] = useState<string>('');

interface GroupDetailState{
groupInputDetails: GroupInputDetailsType;
setGroupInputDetails: React.Dispatch<React.SetStateAction<GroupInputDetailsType>>
}

export interface GroupTypeState{
groupInputDetails: GroupInputDetailsType;
}

const CreateGroupDetail = ({handleNext, onClose, groupInputDetails, setGroupInputDetails }: ModalHeaderProps & GroupDetailState ) => {

const groupInfoToast = useToast();
const { groupName, groupDescription, groupImage } = groupInputDetails;

const fileUploadInputRef = useRef<HTMLInputElement>(null);
const isMobile = useMediaQuery(device.mobileL);

Expand All @@ -81,10 +115,44 @@ const CreateGroupDetail = ({ handleNext, onClose }: ModalHeaderProps) => {
reader.readAsDataURL(e.target.files[0]);

reader.onloadend = function () {
setGroupImage(reader.result as string);
setGroupInputDetails({groupDescription,groupName,groupImage:reader.result as string})
};
}
};

const showError =(errorMessage:string)=>{
groupInfoToast.showMessageToast({
toastTitle: 'Error',
toastMessage: errorMessage,
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
}

const verifyAndHandelNext = ()=>{
// verify name
if (groupName.trim().length === 0){
showError("Group Name is empty")
return
}

// verify description
if (groupDescription.trim().length === 0){
showError("Group Description is empty")
return
}

// verify description
if (!groupImage){
showError("Group image can't be empty")
return
}

if(handleNext){
handleNext()
}
}

//groupImage and desccription is optional
return (
<Section flexDirection="column" alignItems='center' gap='20px' width={!isMobile?'400px':'300px'}>
Expand Down Expand Up @@ -112,25 +180,22 @@ const CreateGroupDetail = ({ handleNext, onClose }: ModalHeaderProps) => {
labelName="Group Name"
charCount={30}
inputValue={groupName}
onInputChange={(e: any) => setGroupName(e.target.value)}
onInputChange={(e: any) => setGroupInputDetails({groupDescription,groupName:e.target.value,groupImage})}
/>

<TextArea
labelName="Group Description"
charCount={80}
inputValue={groupDescription}
onInputChange={(e: any) => setGroupDescription(e.target.value)}
onInputChange={(e: any) => setGroupInputDetails({groupDescription:e.target.value,groupName,groupImage})}
/>
<Button width="197px" onClick={handleNext}>
<Button width="197px" onClick={verifyAndHandelNext}>
Next
</Button>
</Section>
);
};




//use the theme
const UploadContainer = styled.div`
width: fit-content;
Expand Down
48 changes: 42 additions & 6 deletions packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,17 @@ import OptionButtons, { OptionDescription } from '../reusables/OptionButtons';
import { Section, Span } from '../../reusables';
import { ToggleInput } from '../reusables';
import { Button } from '../reusables';
import { ModalHeaderProps } from './CreateGroupModal';
import { GroupTypeState, ModalHeaderProps } from './CreateGroupModal';

import { SpamIcon } from '../../../icons/SpamIcon';

import { ThemeContext } from '../theme/ThemeProvider';
import useMediaQuery from '../../../hooks/useMediaQuery';
import { device } from '../../../config';
import useToast from '../reusables/NewToast';
import { MdError } from 'react-icons/md';



const GROUP_TYPE_OPTIONS: Array<OptionDescription> = [
{
Expand Down Expand Up @@ -85,16 +89,48 @@ interface AddConditionProps {
);
};

export const CreateGroupType = ({ onClose,handlePrevious }: ModalHeaderProps) => {
export const CreateGroupType = ({ onClose,handlePrevious,groupInputDetails }: ModalHeaderProps & GroupTypeState) => {
const [checked, setChecked] = useState<boolean>(false);
const [groupEncryptionType, setGroupEncryptionType] = useState('')
const theme = useContext(ThemeContext);

const isMobile = useMediaQuery(device.mobileL);
console.log(isMobile)
const groupInfoToast = useToast();


const createGroupService = async()=>{
const groupInfo = {
groupInfo:{...groupInputDetails},
groupType:groupEncryptionType
}
console.log("created group with", groupInfo);
onClose()
}

const verifyAndCreateGroup = async()=>{
if(groupEncryptionType.trim() === ""){
showError("Group encryption type is not selected")
return
}

await createGroupService();
}

const showError =(errorMessage:string)=>{
groupInfoToast.showMessageToast({
toastTitle: 'Error',
toastMessage: errorMessage,
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
}

return (
<Section flexDirection="column" gap="32px" >
<ModalHeader title="Create Group" handleClose={onClose} handlePrevious={handlePrevious} />
<OptionButtons options={GROUP_TYPE_OPTIONS} />
<OptionButtons options={GROUP_TYPE_OPTIONS} selectedValue={groupEncryptionType} handleClick={(newEl:string)=>{
setGroupEncryptionType(newEl)
console.log("we called it");
}}/>

<ToggleInput
labelHeading="Gated Group"
Expand All @@ -110,7 +146,7 @@ export const CreateGroupType = ({ onClose,handlePrevious }: ModalHeaderProps) =>
</Section>
)}
<Section gap="20px" flexDirection="column">
<Button width="197px">Create Group</Button>
<Button width="197px" onClick={verifyAndCreateGroup}>Create Group</Button>
<Section gap="4px">
<SpamIcon />
<Span color={theme.textColor?.modalSubHeadingText} fontSize="15px">
Expand Down
16 changes: 9 additions & 7 deletions packages/uiweb/src/lib/components/chat/reusables/OptionButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export interface OptionDescription {
}
interface OptionButtonsProps {
options: Array<OptionDescription>;
// selectedValue: string;
// handleClick: ()=>void;
selectedValue: string;
handleClick: (el:string)=>void;
}

interface ButtonSectionProps {
Expand All @@ -22,6 +22,7 @@ interface ButtonSectionProps {
borderColor: string;
// background:string;
}

const OptionDescripton = ({ heading, subHeading,value }: OptionDescription) => {
const theme = useContext(ThemeContext);
return (
Expand All @@ -48,9 +49,9 @@ const OptionDescripton = ({ heading, subHeading,value }: OptionDescription) => {
</>
);
};
const OptionButtons = ({ options,
// selectedValue
}: OptionButtonsProps) => {


const OptionButtons = ({ options,selectedValue,handleClick}: OptionButtonsProps) => {
const theme = useContext(ThemeContext);
return (
<ThemeProvider theme={theme}>
Expand All @@ -62,7 +63,8 @@ const OptionButtons = ({ options,
}
borderColor={theme.border!.modalInnerComponents!}
borderWidth={index === 0 ? '1px 0px 1px 1px' : '1px'}
// background={selectedValue === option.value?theme.backgroundColor.modalHoverBackground:'none'}
background={selectedValue === option.value ? theme.backgroundColor?.modalHoverBackground : 'none'}
onClick={()=>{handleClick(option.value)}}
>
<OptionDescripton {...option} />
</ButtonSection>
Expand All @@ -79,7 +81,7 @@ const ButtonContainer = styled.div`
`;

const ButtonSection = styled(Section)<ButtonSectionProps>`
cursor:pointer
cursor:pointer;
justify-content: center;
align-items: center;
gap: 3px;
Expand Down

0 comments on commit 6fdbaed

Please sign in to comment.