Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: create group info validation done #738

Merged
merged 1 commit into from
Sep 29, 2023
Merged

feat: create group info validation done #738

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 80 additions & 15 deletions packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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