From 42e52399bffb1f0ead1abc213655c7e1d2bf8204 Mon Sep 17 00:00:00 2001 From: Minh Tran Date: Sun, 30 Apr 2023 14:11:50 -0700 Subject: [PATCH 01/34] 3 screen form with basic text validation - 4 screens, with the first screen used as the prompter/the screen to initiate the form. The 3 screens afterwards are the form itself - Some fields are not finished but most text related fields have basic validation --- packages/app/screens/feed/CreateGroupForm.js | 506 +++++++++++++++++++ packages/app/screens/feed/FeedDrawer.js | 8 + 2 files changed, 514 insertions(+) create mode 100644 packages/app/screens/feed/CreateGroupForm.js diff --git a/packages/app/screens/feed/CreateGroupForm.js b/packages/app/screens/feed/CreateGroupForm.js new file mode 100644 index 00000000..af6e1d00 --- /dev/null +++ b/packages/app/screens/feed/CreateGroupForm.js @@ -0,0 +1,506 @@ +import React, {useEffect, useState} from 'react'; +import { + StyleSheet, + View, + Text, + TextInput, + KeyboardAvoidingView, + TouchableWithoutFeedback, + Keyboard, + Switch } from 'react-native'; +import Button from '@app/components/Button'; +// import Dropdown from '@app/components/Dropdown'; + +// Create Group Screen +function CreateGroup( {navigation} ) { + const [activeScreen, setActiveScreen] = useState(0); + + // 1st SCREEN INPUTS + const [title, setTitle] = useState(''); + const [handler, setHandler] = useState(''); + const [description, setDescription] = useState(''); + const [banner, setBanner] = useState(''); + const [icon, setIcon] = useState(''); + + // 2nd SCREEN INPUTS + const [category, setCategory] = useState([]); + const [tags, setTags] = useState([]); + const [website, setWebsite] = useState(''); + const [location, setLocation] = useState(''); + const [isInviteOnly, setIsInviteOnly] = useState(false); + + // 3rd SCREEN INPUTS + const [twitterLink, setTwitterLink] = useState(''); + const [facebookLink, setFacebookLink] = useState(''); + const [instagramLink, setInstagramLink] = useState(''); + const [discordLink, setDiscordLink] = useState(''); + const [linkedInLink, setLinkedInLink] = useState(''); + const [githubLink, setGithubLink] = useState(''); + + // Input Validation + const [titleError, setTitleError] = useState(''); + const [handlerError, setHandlerError] = useState(''); + const [descriptionError, setDescriptionError] = useState(''); + const [bannerError, setBannerError] = useState(''); + const [iconError, setIconError] = useState(''); + + const [categoryError, setCategoryError] = useState(''); + const [tagsError, setTagsError] = useState(''); + const [websiteError, setWebsiteError] = useState(''); + const [locationError, setLocationError] = useState(''); + + const [twitterLinkError, setTwitterLinkError] = useState(''); + const [facebookLinkError, setFacebookLinkError] = useState(''); + const [instagramLinkError, setInstagramLinkError] = useState(''); + const [discordLinkError, setDiscordLinkError] = useState(''); + const [linkedInLinkError, setLinkedInLinkError] = useState(''); + const [githubLinkError, setGithubLinkError] = useState(''); + + + + + useEffect(() => { + handleInputValidationScreen1(); + }, [title, handler, description, banner, icon]); + + useEffect(() => { + handleInputValidationScreen2(); + }, [category, tags, location, website]) + + useEffect(() => { + handleInputValidationScreen3(); + }, [twitterLink, facebookLink, instagramLink, discordLink, linkedInLink, githubLink]) + + + function handleInputValidationScreen1() { + let isValid = true; + + const titleRegex = /^(?![a-zA-Z0-9]+$).*$/; + const handlerRegex = /^(?!(\w{1,15})$).*$/ + + if(title.trim() === ``) + { + setTitleError(`Please enter a title`); + isValid = false; + } + else if(titleRegex.test(title)) + { + setTitleError(`Can only contain letters, numbers, and underscores.`); + isValid = false; + } + else + { + setTitleError(``); + } + + if(handler.trim() === ``) + { + setHandlerError(`Please enter a handler`); + isValid = false; + } + else if(handlerRegex.test(handler)) + { + setHandlerError(`Can only contain letters, numbers, and underscores.`); + isValid = false; + } + else + { + setHandlerError(``); + } + + if(description.trim() === ``) + { + console.log(0); + setDescriptionError(`Please enter a description`); + isValid = false; + } + else + { + setDescriptionError(``); + } + + + return isValid; + } + + function handleInputValidationScreen2(){ + let isValid = true; + const websiteRegex = /^(?!(https?:\/\/)([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$).+$/i + + if (website.trim() === ``) + { + setWebsiteError(``); + } + else if(websiteRegex.test(website)) + { + setWebsiteError(`Invalid Website Link`); + isValid = false; + } + else + { + setWebsiteError(``); + } + + return isValid; + } + + function handleInputValidationScreen3(){ + let isValid = true; + + const twitterRegex = /^(?!https?:\/\/(www\.)?twitter\.com\/[a-zA-Z0-9_]+\/?$)/; + const facebookRegex = /^(?!https?:\/\/(www\.)?facebook\.com\/[a-zA-Z0-9_]+\/?$)/; + const discordRegex = /^(?!https?:\/\/(www\.)?discord\.gg\/[a-zA-Z0-9]+).*$/; + const instagramRegex = /^(?!https?:\/\/(www\.)?(instagram\.com|instagr\.am)\/[a-zA-Z0-9_]+\/?$)/; + const linkedinRegex = /^(?!https?:\/\/(www\.)?linkedin\.com\/in\/[a-zA-Z0-9_-]+\/?$)/; + const githubRegex = /^(?!https?:\/\/(www\.)?github\.com\/[a-zA-Z0-9_-]+\/?$)/; + + + + if (twitterLink.trim() === ``) + { + setTwitterLinkError(``); + } + else if(twitterRegex.test(twitterLink)) + { + setTwitterLinkError(`Invalid Twitter Link`); + isValid = false; + } + else + { + setTwitterLinkError(``); + } + + if (facebookLink.trim() === ``) + { + setFacebookLinkError(``); + } + else if(facebookRegex.test(facebookLink)) + { + setFacebookLinkError(`Invalid Facebook Link`); + isValid = false; + } + else + { + setFacebookLinkError(``); + } + + if (instagramLink.trim() === ``) + { + setInstagramLinkError(``); + } + else if(instagramRegex.test(instagramLink)) + { + setInstagramLinkError(`Invalid Instagram Link`); + isValid = false; + } + else + { + setInstagramLinkError(``); + } + + if (discordLink.trim() === ``) + { + setDiscordLinkError(``); + } + else if(discordRegex.test(discordLink)) + { + setDiscordLinkError(`Invalid Discord Link`); + isValid = false; + } + else + { + setDiscordLinkError(``); + } + + if (linkedInLink.trim() === ``) + { + setLinkedInLink(``); + } + else if(linkedinRegex.test(linkedInLink)) + { + setLinkedInLinkError(`Invalid LinkedIn Link`); + isValid = false; + } + else + { + setLinkedInLinkError(``); + } + + if (githubLink.trim() === ``) + { + setGithubLinkError(``); + } + else if(githubRegex.test(githubLink)) + { + setGithubLinkError(`Invalid Github Link`); + isValid = false; + } + else + { + setGithubLinkError(``); + } + + return isValid; + + } + + function emptyForm() + { + setTitle(''); + setHandler(''); + setDescription(''); + + setLocation(''); + setWebsite(''); + + setTwitterLink(''); + setFacebookLink(''); + setDiscordLink(''); + setLinkedInLink(''); + setGithubLink(''); + } + + switch(activeScreen) + { + case 0: + return ( + +