From 40ae1e53f7e2f5a916a41b785980e24e7a5b4c59 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 25 Mar 2021 15:56:03 -0400 Subject: added UI for university selection --- src/components/onboarding/UniversitySelection.tsx | 93 +++++++++++++++++++++++ src/components/onboarding/index.ts | 1 + 2 files changed, 94 insertions(+) create mode 100644 src/components/onboarding/UniversitySelection.tsx (limited to 'src/components') diff --git a/src/components/onboarding/UniversitySelection.tsx b/src/components/onboarding/UniversitySelection.tsx new file mode 100644 index 00000000..37a95790 --- /dev/null +++ b/src/components/onboarding/UniversitySelection.tsx @@ -0,0 +1,93 @@ +import React, {useState} from 'react'; +import {Image, ImageSourcePropType, StyleSheet, Text, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {normalize} from '../../utils'; + +interface UniversitySelectionProps { + selected: string; + setSelected: (selected: string) => void; +} + +const UniversitySelection: React.FC = ({selected, setSelected}) => { + const crestData = [ + { + imagePath: require('../../assets/images/badges/brown_badge.png'), + title: 'Brown', + key: 'Brown University', + }, + { + imagePath: require('../../assets/images/badges/brown_badge.png'), + title: 'Cornell', + key: 'Cornell University', + }, + { + imagePath: require('../../assets/images/badges/brown_badge.png'), + title: 'Harvard', + key: 'Harvard University', + }, + ]; + const renderButton = ( + imagePath: ImageSourcePropType, + title: string, + key: string, + ) => ( + setSelected(key)}> + + {title} + + ); + return ( + <> + University Badge + + {crestData.map((data) => + renderButton(data.imagePath, data.title, data.key), + )} + + + ); +}; + +const styles = StyleSheet.create({ + title: { + color: 'white', + fontSize: normalize(15), + lineHeight: normalize(18), + fontWeight: '700', + marginBottom: 10, + }, + container: { + flexDirection: 'row', + justifyContent: 'space-around', + marginBottom: 10, + }, + crest: { + height: normalize(25), + aspectRatio: 31 / 38, + marginBottom: 5, + }, + crestContainer: { + alignItems: 'center', + padding: 10, + }, + crestContainerSelected: { + alignItems: 'center', + borderWidth: 2, + borderColor: 'white', + borderRadius: 5, + padding: 8, + backgroundColor: '#fff2', + }, + crestLabel: { + color: 'white', + fontSize: normalize(15), + lineHeight: normalize(18), + fontWeight: '500', + }, +}); + +export default UniversitySelection; diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts index b790933f..fdb85090 100644 --- a/src/components/onboarding/index.ts +++ b/src/components/onboarding/index.ts @@ -10,3 +10,4 @@ export {default as TaggDropDown} from './TaggDropDown'; export {default as SocialMediaLinker} from './SocialMediaLinker'; export {default as LinkSocialMedia} from './LinkSocialMedia'; export {default as MomentCategory} from './MomentCategory'; +export {default as UniversitySelection} from './UniversitySelection'; -- cgit v1.2.3-70-g09d2 From 883a6c51d4c3e442df5e6c0f3dc6fada2f370f8e Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 26 Mar 2021 14:58:15 -0400 Subject: using university type --- src/components/onboarding/UniversitySelection.tsx | 12 ++++++++---- src/screens/onboarding/OnboardingStepThree.tsx | 23 ++++++++++++++--------- src/types/types.ts | 6 ++++++ 3 files changed, 28 insertions(+), 13 deletions(-) (limited to 'src/components') diff --git a/src/components/onboarding/UniversitySelection.tsx b/src/components/onboarding/UniversitySelection.tsx index 37a95790..8ef013d3 100644 --- a/src/components/onboarding/UniversitySelection.tsx +++ b/src/components/onboarding/UniversitySelection.tsx @@ -1,14 +1,18 @@ -import React, {useState} from 'react'; +import React from 'react'; import {Image, ImageSourcePropType, StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; +import {UniversityType} from '../../types'; import {normalize} from '../../utils'; interface UniversitySelectionProps { - selected: string; - setSelected: (selected: string) => void; + selected: UniversityType | undefined; + setSelected: (selected: UniversityType) => void; } -const UniversitySelection: React.FC = ({selected, setSelected}) => { +const UniversitySelection: React.FC = ({ + selected, + setSelected, +}) => { const crestData = [ { imagePath: require('../../assets/images/badges/brown_badge.png'), diff --git a/src/screens/onboarding/OnboardingStepThree.tsx b/src/screens/onboarding/OnboardingStepThree.tsx index 120380c1..81f4dc97 100644 --- a/src/screens/onboarding/OnboardingStepThree.tsx +++ b/src/screens/onboarding/OnboardingStepThree.tsx @@ -26,11 +26,12 @@ import { ERROR_SELECT_BIRTHDAY, ERROR_SELECT_CLASS_YEAR, ERROR_SELECT_GENDER, + ERROR_SELECT_UNIVERSITY, ERROR_UPLOAD_SMALL_PROFILE_PIC, } from '../../constants/strings'; import {OnboardingStackParams} from '../../routes/onboarding'; import {patchEditProfile} from '../../services'; -import {BackgroundGradientType} from '../../types'; +import {BackgroundGradientType, UniversityType} from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; type OnboardingStepThreeRouteProp = RouteProp< @@ -52,9 +53,10 @@ const OnboardingStepThree: React.FC = ({ }) => { const {userId, username} = route.params; let emptyDate: string | undefined; + let emptyUniversity: UniversityType | undefined; const [form, setForm] = React.useState({ smallPic: '', - university: '', + university: emptyUniversity, birthdate: emptyDate, gender: '', isValidGender: true, @@ -158,7 +160,7 @@ const OnboardingStepThree: React.FC = ({ Alert.alert(ERROR_SELECT_CLASS_YEAR); return; } - if (form.university === '') { + if (!form.university) { Alert.alert(ERROR_SELECT_UNIVERSITY); return; } @@ -243,12 +245,15 @@ const OnboardingStepThree: React.FC = ({ /> - { - setForm({ - ...form, - university: selected - }) - }}/> + { + setForm({ + ...form, + university: selected, + }); + }} + /> handleClassYearUpdate(value)} items={classYearList} diff --git a/src/types/types.ts b/src/types/types.ts index dc2817bd..412d9000 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -21,12 +21,18 @@ export interface CategoryPreviewType { export type FriendshipStatusType = 'friends' | 'requested' | 'no_record'; +export enum UniversityType { + brown = 'Brown', + cornell = 'Cornell', +} + export interface ProfileType { name: string; biography: string; website: string; gender: string; university_class: number; + university: UniversityType | undefined; profile_completion_stage: number; suggested_people_linked: number; birthday: Date | undefined; -- cgit v1.2.3-70-g09d2 From a7be1ca4e5490ed6a27bd4c90f15b9ac85b0356f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 26 Mar 2021 14:31:31 -0700 Subject: resolves undefined error --- src/components/profile/ProfileMoreInfoDrawer.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'src/components') diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx index 2fec5cca..a77a2e84 100644 --- a/src/components/profile/ProfileMoreInfoDrawer.tsx +++ b/src/components/profile/ProfileMoreInfoDrawer.tsx @@ -24,11 +24,9 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { const {setIsOpen, userXId, isBlocked, handleBlockUnblock, userXName} = props; const { user: {userId, username}, - } = useSelector((state: RootState) => state.user); + profile, + } = useSelector((state: RootState) => state?.user); const isOwnProfile = !userXId || userXName === username; - const {suggested_people_linked} = useSelector( - (state: RootState) => state.user.profile, - ); const goToEditProfile = () => { navigation.push('EditProfile', { @@ -39,7 +37,7 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { }; const goToUpdateSPProfile = () => { - if (suggested_people_linked === 0) { + if (profile.suggested_people_linked === 0) { Alert.alert(ERROR_ATTEMPT_EDIT_SP); } else { // Sending undefined for updatedSelectedBadges to mark that there was no update yet -- cgit v1.2.3-70-g09d2 From cb1781dc3294ad56ecd538c7aa30d3a9583ea330 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 26 Mar 2021 18:08:13 -0400 Subject: better enum type --- src/components/onboarding/UniversitySelection.tsx | 18 +++++----- src/screens/onboarding/Login.tsx | 23 +++++++------ src/screens/onboarding/OnboardingStepThree.tsx | 42 ++++++++++------------- src/types/types.ts | 6 ++-- 4 files changed, 45 insertions(+), 44 deletions(-) (limited to 'src/components') diff --git a/src/components/onboarding/UniversitySelection.tsx b/src/components/onboarding/UniversitySelection.tsx index 8ef013d3..9ca6822a 100644 --- a/src/components/onboarding/UniversitySelection.tsx +++ b/src/components/onboarding/UniversitySelection.tsx @@ -5,7 +5,7 @@ import {UniversityType} from '../../types'; import {normalize} from '../../utils'; interface UniversitySelectionProps { - selected: UniversityType | undefined; + selected: UniversityType; setSelected: (selected: UniversityType) => void; } @@ -17,23 +17,23 @@ const UniversitySelection: React.FC = ({ { imagePath: require('../../assets/images/badges/brown_badge.png'), title: 'Brown', - key: 'Brown University', + key: UniversityType.Brown, }, { imagePath: require('../../assets/images/badges/brown_badge.png'), title: 'Cornell', - key: 'Cornell University', - }, - { - imagePath: require('../../assets/images/badges/brown_badge.png'), - title: 'Harvard', - key: 'Harvard University', + key: UniversityType.Cornell, }, + // { + // imagePath: require('../../assets/images/badges/brown_badge.png'), + // title: 'Harvard', + // key: UniversityType.Harvard, + // }, ]; const renderButton = ( imagePath: ImageSourcePropType, title: string, - key: string, + key: UniversityType, ) => ( = ({navigation}: LoginProps) => { } catch (err) { Alert.alert(ERROR_INVALID_LOGIN); } - } else if (statusCode === 200 && data.university === '') { + } else if ( + statusCode === 200 && + data.university === UniversityType.Empty + ) { /** - * A user account was created during onboarding step 2 but user didn't - * finish step 3, thus does not have a universtiy. - * Redirecting user back to onboarding to finish the process - */ + * A user account was created during onboarding step 2 but user didn't + * finish step 3, thus does not have a universtiy. + * Redirecting user back to onboarding to finish the process + */ navigation.navigate('OnboardingStepThree', { userId: data.UserID, username: username, }); } else if (statusCode === 200 && !data.isOnboarded) { /** - * A user account was created and finished the onboarding process but - * did not have an invitation code at the time so the user's account - * is not activated (isOnboarded) yet. - */ + * A user account was created and finished the onboarding process but + * did not have an invitation code at the time so the user's account + * is not activated (isOnboarded) yet. + */ navigation.navigate('InvitationCodeVerification', { userId: data.UserID, username: username, diff --git a/src/screens/onboarding/OnboardingStepThree.tsx b/src/screens/onboarding/OnboardingStepThree.tsx index a91c36fe..29028421 100644 --- a/src/screens/onboarding/OnboardingStepThree.tsx +++ b/src/screens/onboarding/OnboardingStepThree.tsx @@ -47,17 +47,25 @@ interface OnboardingStepThreeProps { navigation: OnboardingStepThreeNavigationProp; } +type FormType = { + smallPic: string; + university: UniversityType; + birthdate: string | undefined; + gender: string; + isValidGender: boolean; + classYear: number; + attemptedSubmit: boolean; +}; + const OnboardingStepThree: React.FC = ({ route, navigation, }) => { const {userId, username} = route.params; - let emptyDate: string | undefined; - let emptyUniversity: UniversityType | undefined; - const [form, setForm] = React.useState({ + const [form, setForm] = React.useState({ smallPic: '', - university: emptyUniversity, - birthdate: emptyDate, + university: UniversityType.Empty, + birthdate: undefined, gender: '', isValidGender: true, classYear: -1, @@ -160,11 +168,11 @@ const OnboardingStepThree: React.FC = ({ Alert.alert(ERROR_SELECT_CLASS_YEAR); return; } - if (!form.university) { + if (form.university === UniversityType.Empty) { Alert.alert(ERROR_SELECT_UNIVERSITY); return; } - if (form.birthdate === emptyDate) { + if (!form.birthdate) { Alert.alert(ERROR_SELECT_BIRTHDAY); return; } @@ -178,7 +186,6 @@ const OnboardingStepThree: React.FC = ({ attemptedSubmit: true, }); } - let invalidFields: boolean = false; const request = new FormData(); if (form.smallPic) { request.append('smallProfilePicture', { @@ -188,16 +195,13 @@ const OnboardingStepThree: React.FC = ({ }); } - if (form.birthdate) { - request.append('birthday', form.birthdate); - } if (customGender) { if (form.isValidGender) { request.append('gender', form.gender); } else { setForm({...form, attemptedSubmit: false}); setTimeout(() => setForm({...form, attemptedSubmit: true})); - invalidFields = true; + return; } } else { if (form.isValidGender) { @@ -205,17 +209,9 @@ const OnboardingStepThree: React.FC = ({ } } - if (form.classYear !== -1) { - request.append('university_class', form.classYear); - } - - if (form.university) { - request.append('university', form.university); - } - - if (invalidFields) { - return; - } + request.append('birthday', form.birthdate); + request.append('university_class', form.classYear); + request.append('university', form.university); patchEditProfile(request, userId) .then((_) => diff --git a/src/types/types.ts b/src/types/types.ts index 360b2ffe..c1456e5f 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -22,8 +22,10 @@ export interface CategoryPreviewType { export type FriendshipStatusType = 'friends' | 'requested' | 'no_record'; export enum UniversityType { - brown = 'Brown University', - cornell = 'Cornell University', + Brown = 'Brown University', + Cornell = 'Cornell University', + // Harvard = 'Harvard University', + Empty = '', } export interface ProfileType { -- cgit v1.2.3-70-g09d2 From ca8b6c15856d3552b4a00ba36ef8a203d01f952e Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 26 Mar 2021 18:16:09 -0400 Subject: added correct badges --- src/assets/universities/cornell-clicked.png | Bin 0 -> 12362 bytes src/assets/universities/cornell-search.png | Bin 0 -> 12171 bytes src/assets/universities/cornell.png | Bin 0 -> 12353 bytes src/components/onboarding/UniversitySelection.tsx | 6 +++--- 4 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 src/assets/universities/cornell-clicked.png create mode 100644 src/assets/universities/cornell-search.png create mode 100644 src/assets/universities/cornell.png (limited to 'src/components') diff --git a/src/assets/universities/cornell-clicked.png b/src/assets/universities/cornell-clicked.png new file mode 100644 index 00000000..d6450b29 Binary files /dev/null and b/src/assets/universities/cornell-clicked.png differ diff --git a/src/assets/universities/cornell-search.png b/src/assets/universities/cornell-search.png new file mode 100644 index 00000000..ce41e7bc Binary files /dev/null and b/src/assets/universities/cornell-search.png differ diff --git a/src/assets/universities/cornell.png b/src/assets/universities/cornell.png new file mode 100644 index 00000000..bf15f8b2 Binary files /dev/null and b/src/assets/universities/cornell.png differ diff --git a/src/components/onboarding/UniversitySelection.tsx b/src/components/onboarding/UniversitySelection.tsx index 9ca6822a..92bec47f 100644 --- a/src/components/onboarding/UniversitySelection.tsx +++ b/src/components/onboarding/UniversitySelection.tsx @@ -15,17 +15,17 @@ const UniversitySelection: React.FC = ({ }) => { const crestData = [ { - imagePath: require('../../assets/images/badges/brown_badge.png'), + imagePath: require('../../assets/universities/brown.png'), title: 'Brown', key: UniversityType.Brown, }, { - imagePath: require('../../assets/images/badges/brown_badge.png'), + imagePath: require('../../assets/universities/cornell.png'), title: 'Cornell', key: UniversityType.Cornell, }, // { - // imagePath: require('../../assets/images/badges/brown_badge.png'), + // imagePath: require('../../assets/universities/harvard.png'), // title: 'Harvard', // key: UniversityType.Harvard, // }, -- cgit v1.2.3-70-g09d2