Skip to content

Commit

Permalink
fix: fixed validation
Browse files Browse the repository at this point in the history
  • Loading branch information
mishramonalisha76 committed Oct 11, 2023
2 parents a4fb56d + db0a47d commit 182e209
Show file tree
Hide file tree
Showing 11 changed files with 282 additions and 198 deletions.
334 changes: 194 additions & 140 deletions packages/uiweb/src/lib/components/chat/CreateGroup/AddCriteria.tsx

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,11 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => {
};

const getGuildRole = () =>{
console.log(criteria?.data?.['comparison'])
if(!criteria?.data?.['comparison'])
{
return 'SPECIFIC';
}
return (GUILD_COMPARISON_OPTIONS.find(option => option.value === criteria?.data?.['comparison']))?.heading;

}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({

const [groupInputDetails, setGroupInputDetails] =
useState<GroupInputDetailsType>({
groupName: 'Push Group Chat',
groupDescription: 'This is the oficial group for Push Protocol',
groupImage: ProfilePicture,
groupName: '',
groupDescription: '',
groupImage: '',
});

const renderComponent = () => {
Expand Down Expand Up @@ -215,11 +215,11 @@ const CreateGroupDetail = ({
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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { GrouInfoType as GroupInfoType } from '../types';

import { ACCESS_TYPE_TITLE } from '../constants';
import { IChatTheme } from '../exportedTypes';
import { ProfilePicture } from '../../../config';

const GROUP_TYPE_OPTIONS: Array<OptionDescription> = [
{
Expand Down Expand Up @@ -52,7 +53,6 @@ const AddConditionSection = ({
criteriaState,
}: AddConditionProps) => {
const theme = useContext(ThemeContext);
//todo - dummy data to be removed after we get condition data

const generateMapping = () => {
return criteriaState.entryOptionsDataArray.map((rule, idx) => [
Expand Down Expand Up @@ -151,41 +151,41 @@ export const CreateGroupType = ({
const { createGatedGroup, loading } = useCreateGatedGroup();
const groupInfoToast = useToast();

const getEncryptionType = () =>{
if(groupEncryptionType === "encrypted"){
return false
}
return true
}

const createGroupService = async () => {
// TODO:use actual data instead of dummy data
const groupInfo:GroupInfoType = {
groupName:groupInputDetails.groupName,
groupDescription:groupInputDetails.groupDescription,
groupImage:groupInputDetails.groupImage,
isPublic: true //groupEncryptionType,
groupImage:groupInputDetails.groupImage || ProfilePicture,
isPublic: getEncryptionType(),
};
const rules: any = checked? criteriaStateManager.generateRule():{};
try{
const response = await createGatedGroup(groupInfo, rules);
if(response ) {
groupInfoToast.showMessageToast({
toastTitle: 'Success',
toastMessage: 'Group created successfully',
toastType: 'SUCCESS',
getToastIcon: (size) => <MdCheckCircle size={size} color="green" />,
});
}

onClose();
const rules: any = checked ? criteriaStateManager.generateRule() : {};
const isSuccess = await createGatedGroup(groupInfo, rules);
if(isSuccess === true){
groupInfoToast.showMessageToast({
toastTitle: 'Success',
toastMessage: 'Group created successfully',
toastType: 'SUCCESS',
getToastIcon: (size) => <MdCheckCircle size={size} color="green" />,
});
}else{
showError('Group creation failed');
}
catch(error){
console.log(error);
}



onClose();
};

const verifyAndCreateGroup = async () => {
// TODO:validate the fields
// if (groupEncryptionType.trim() === '') {
// showError('Group encryption type is not selected');
// return;
// }
if (groupEncryptionType.trim() === '') {
showError('Group encryption type is not selected');
return;
}

await createGroupService();
};
Expand Down
28 changes: 18 additions & 10 deletions packages/uiweb/src/lib/components/chat/helpers/tokenGatedGroup.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import axios from 'axios';
import { CriteriaStateType, Data, GuildData, Rule } from '../types';
import { CriteriaStateType, CriteriaValidationErrorType, Data, GuildData, Rule, TYPE } from '../types';

const handleDefineCondition = (
entryCriteria: CriteriaStateType,
Expand All @@ -18,53 +18,61 @@ const handleDefineCondition = (
}
};

const validateGUILDData = async (condition: Rule): Promise<string[]> => {
const validateGUILDData = async (condition: Rule): Promise<CriteriaValidationErrorType> => {
const { data } = condition;
let errors: any = {};

// Check for guild ID presence
if (!(data as GuildData).id) {
errors = { ...errors, id: 'Guild ID is missing' };
errors = { ...errors, guildId: 'Guild ID is missing' };
} else {
try {
const response = await axios.get(
`https://api.guild.xyz/v1/guild/${(data as GuildData).id}`
);

if (response.status !== 200) {
errors = { ...errors, id: 'Guild ID is missing' };
errors = { ...errors, guildId: 'Guild ID is missing' };
} else {
// Validate the role values
if ((data as GuildData).role === '*') {
if (data.comparison !== 'all' && data.comparison !== 'any') {
errors = { ...errors, comparison: 'Invalid comparison value' };
errors = { ...errors, guildComparison: 'Invalid comparison value' };
}
} else if ((data as GuildData).role) {
const roleExists = response.data.roles.some(
(role: { id: number }) =>
role.id.toString() === (data as GuildData).role
);
if (!roleExists) {
errors = { ...errors, role: 'Invalid Guild Role ID' };
errors = { ...errors, guildRole: 'Invalid Guild Role ID' };
}

// For specific role, comparison can be null or empty
if (data.comparison) {
errors = {
...errors,
comparison: 'Comparison should be empty for specific role',
guildComparison: 'Comparison should be empty for specific role',
};
}
} else {
errors = { ...errors, role: 'Invalid role value' };
errors = { ...errors, guildRole: 'Invalid role value' };
}
}
} catch (error) {
errors = { ...errors, id: 'Error validating Guild ID' };
errors = { ...errors, guildId: 'Error validating Guild ID' };
}
}

return errors;
};

export { handleDefineCondition, validateGUILDData };
const validationCriteria = async (condition: Rule):Promise<CriteriaValidationErrorType> => {
if(condition.type === TYPE.GUILD)
{
return validateGUILDData(condition);
}

return {};
}
export { handleDefineCondition ,validationCriteria};
Original file line number Diff line number Diff line change
Expand Up @@ -13,30 +13,30 @@ export interface IDropDownInputProps {
selectedValue: number;
labelName?: string;
dropdownValues: DropdownValueType[];
error?:boolean;
}

export const DropDownInput = (props: IDropDownInputProps) => {
const theme = useContext(ThemeContext);
const [showDropdown, setshowDropdown] = useState<boolean>(false);
const dropdownRef = useRef<any>(null);

const { selectedValue, dropdownValues, labelName } = props;
const { selectedValue, dropdownValues, labelName ,error} = props;

// useClickAway(dropdownRef, ()=> setshowDropdown(!showDropdown));

const closeDropdown = () => {
setshowDropdown(!showDropdown);
};
console.log(dropdownValues);
console.log(selectedValue);

return (
<ThemeProvider theme={theme}>
<DropdownContainer >
<LabelContainer>
<label>{props.labelName}</label>
</LabelContainer>

<DropdownDiv ref={dropdownRef} onClick={closeDropdown}>
<DropdownDiv ref={dropdownRef} onClick={closeDropdown} error= {error || false} >
<Span margin="0 7px 0 0">
{dropdownValues[selectedValue].title}{' '}
</Span>
Expand Down Expand Up @@ -78,14 +78,14 @@ const LabelContainer = styled.div`
color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
`;

const DropdownDiv = styled(Section)<IChatTheme>`
const DropdownDiv = styled(Section)<IChatTheme & {error:boolean}>`
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
background: ${(props) => props.theme.backgroundColor.modalInputBackground};
border: ${(props) => props.theme.border.modalInnerComponents};
border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
font-family: ${(props) => props.theme.fontFamily};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface OptionButtonsProps {
totalWidth?:string;
selectedValue: string;
handleClick: (el:string)=>void;
error?:boolean;
}

interface ButtonSectionProps {
Expand All @@ -23,6 +24,7 @@ interface ButtonSectionProps {
borderColor: string;
totalWidth:string;
noOfOptions:number;
error:boolean;
// background:string;
}

Expand Down Expand Up @@ -54,7 +56,7 @@ const OptionDescripton = ({ heading, subHeading,value }: OptionDescription) => {
};


export const OptionButtons = ({ options,selectedValue,handleClick, totalWidth = '400px',}: OptionButtonsProps) => {
export const OptionButtons = ({ options,selectedValue,handleClick, totalWidth = '400px',error}: OptionButtonsProps) => {
const theme = useContext(ThemeContext);

const getBorderWidth = (index:number) =>{
Expand Down Expand Up @@ -84,6 +86,7 @@ const getBorderRadius = (index:number) =>{
borderRadius={
getBorderRadius(index)
}
error={error || false}
borderColor={theme.border!.modalInnerComponents!}
borderWidth={getBorderWidth(index)}
background={selectedValue === option.value ? theme.backgroundColor?.modalHoverBackground : 'none'}
Expand Down Expand Up @@ -114,6 +117,8 @@ const ButtonSection = styled(Section)<ButtonSectionProps>`
}
padding: 10px;
border: ${(props) => props.borderColor};
border: ${(props) => props.error?' #ED5858':props.borderColor};
// background: ${(props) => props.background};
border-width: ${(props) => props.borderWidth};
border-style: solid;
Expand Down
7 changes: 4 additions & 3 deletions packages/uiweb/src/lib/components/chat/reusables/TextArea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export interface ITextAreaProps {
labelName?: string;
inputValue: string;
onInputChange: any;
error?:boolean;

}

Expand All @@ -31,7 +32,7 @@ export const TextArea = (props: ITextAreaProps) => {
<label>{props.labelName}</label>
<CharCounter theme={theme}>{props.inputValue.length} / {props.charCount}</CharCounter>
</LabelContainer>
<Input theme={theme} value={props.inputValue} onChange={handleChange} />
<Input error={props.error || false} theme={theme} value={props.inputValue} onChange={handleChange} />
</InputContainer>
</ThemeProvider>
)
Expand All @@ -55,7 +56,7 @@ const LabelContainer = styled.div`
color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
`;

const Input = styled.textarea<IChatTheme>`
const Input = styled.textarea<IChatTheme & {error:boolean}>`
padding: 16px;
margin-top: 8px;
Expand All @@ -64,7 +65,7 @@ const Input = styled.textarea<IChatTheme>`
color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
background: ${(props) => props.theme.backgroundColor.modalInputBackground};
border: ${(props) => props.theme.border.modalInnerComponents};
border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
font-family: ${(props) => props.theme.fontFamily};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface ITextInputProps {
onInputChange?: any;
disabled?: boolean;
customStyle?: CustomStyleParamsType;
error?:boolean;
}
type CustomStyleParamsType = {
background?: string;
Expand Down Expand Up @@ -48,6 +49,7 @@ export const TextInput = (props: ITextInputProps) => {
customStyle={props.customStyle!}
disabled={!!props.disabled}
theme={theme}
error={props.error || false}
value={props.inputValue}
onChange={handleChange}
placeholder={props.placeholder}
Expand Down Expand Up @@ -75,15 +77,15 @@ const LabelContainer = styled.div`
color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
`;

const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType}>`
const Input = styled.input<IChatTheme & {customStyle:CustomStyleParamsType,error:boolean}>`
padding: 16px;
margin-top: 8px;
color: ${(props) => props.theme.textColor?.modalHeadingText ?? '#000'};
background: ${(props) =>
props.customStyle?.background
? props.customStyle.background
: props.theme.backgroundColor.modalInputBackground};
border: ${(props) => props.theme.border.modalInnerComponents};
border: ${(props) => props.error?' 1px solid #ED5858':props.theme.border.modalInnerComponents};
border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents};
font-family: ${(props) => props.theme.fontFamily};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,12 @@ export interface CriteriaStateType {
setUpdateCriteriaIdx: React.Dispatch<React.SetStateAction<number>>;
isUpdateCriteriaEnabled: () => boolean;
}


export type CriteriaValidationErrorType = {

guildId?:string,
guildComparison?:string;
guildRole?:string;

}
2 changes: 1 addition & 1 deletion packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ export const useCreateGatedGroup = () => {
if (!response) {
return false;
}
return true;
} catch (error: Error | any) {
setLoading(false);
setError(error.message);
console.log(error);
return error.message;
}
},
Expand Down

0 comments on commit 182e209

Please sign in to comment.