diff options
Diffstat (limited to 'src/screens')
| -rw-r--r-- | src/screens/onboarding/ProfileOnboarding.tsx | 210 | ||||
| -rw-r--r-- | src/screens/profile/FriendsListScreen.tsx (renamed from src/screens/profile/FollowersListScreen.tsx) | 36 | ||||
| -rw-r--r-- | src/screens/profile/index.ts | 2 |
3 files changed, 143 insertions, 105 deletions
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx index 611f1598..d51aec95 100644 --- a/src/screens/onboarding/ProfileOnboarding.tsx +++ b/src/screens/onboarding/ProfileOnboarding.tsx @@ -25,9 +25,13 @@ import { websiteRegex, bioRegex, genderRegex, + CLASS_YEAR_LIST, } from '../../constants'; import AsyncStorage from '@react-native-community/async-storage'; import {BackgroundGradientType} from '../../types'; +import {PickerSelectProps} from 'react-native-picker-select'; +import Animated from 'react-native-reanimated'; +import {SCREEN_WIDTH} from '../../utils'; type ProfileOnboardingScreenRouteProp = RouteProp< OnboardingStackParams, @@ -65,6 +69,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({ isValidGender: true, attemptedSubmit: false, token: '', + classYear: -1, }); const [customGender, setCustomGender] = React.useState(Boolean); @@ -100,6 +105,12 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({ } }; + var classYearList: Array<any> = []; + + CLASS_YEAR_LIST.map((value) => { + classYearList.push({label: value, value: value}); + }); + /** * Profile screen "Add header image" button */ @@ -212,6 +223,14 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({ } }; + const handleClassYearUpdate = (value: string) => { + const classYear = Number.parseInt(value); + setForm({ + ...form, + classYear, + }); + }; + const handleCustomGenderUpdate = (gender: string) => { let isValidGender: boolean = genderRegex.test(gender); gender = gender.replace(' ', '-'); @@ -238,6 +257,10 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({ Alert.alert('Please select a Profile Picture!'); return; } + if (form.classYear === -1) { + Alert.alert('Please select Class Year'); + return; + } if (!form.attemptedSubmit) { setForm({ ...form, @@ -298,6 +321,10 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({ } } + if (form.classYear !== -1) { + request.append('university_class', form.classYear); + } + if (invalidFields) { return; } @@ -344,96 +371,118 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({ }; return ( - <Background centered gradientType={BackgroundGradientType.Light}> - <StatusBar barStyle="light-content" /> - <View style={styles.profile}> - <LargeProfilePic /> - <SmallProfilePic /> - </View> - <View style={styles.contentContainer}> - <TaggInput - accessibilityHint="Enter a website." - accessibilityLabel="Website input field." - placeholder="Website" - autoCompleteType="off" - textContentType="URL" - autoCapitalize="none" - returnKeyType="next" - onChangeText={handleWebsiteUpdate} - onSubmitEditing={() => handleFocusChange('bio')} - blurOnSubmit={false} - valid={form.isValidWebsite} - attemptedSubmit={form.attemptedSubmit} - invalidWarning={'Website must be a valid link to your website'} - width={280} - /> - <TaggBigInput - accessibilityHint="Enter a bio." - accessibilityLabel="Bio input field." - placeholder="Bio" - autoCompleteType="off" - textContentType="none" - autoCapitalize="none" - returnKeyType="next" - onChangeText={handleBioUpdate} - onSubmitEditing={() => handleFocusChange('bio')} - blurOnSubmit={false} - ref={bioRef} - valid={form.isValidBio} - attemptedSubmit={form.attemptedSubmit} - invalidWarning={ - 'Bio must be less than 150 characters and must contain valid characters' - } - width={280} - /> - <BirthDatePicker - ref={birthdateRef} - handleBDUpdate={handleBirthdateUpdate} - width={280} - date={form.birthdate} - showPresetdate={false} - /> - <TaggDropDown - onValueChange={(value: string) => handleGenderUpdate(value)} - items={[ - {label: 'Male', value: 'male'}, - {label: 'Female', value: 'female'}, - {label: 'Custom', value: 'custom'}, - ]} - placeholder={{ - label: 'Gender', - value: null, - color: '#ddd', - }} - /> - {customGender && ( + <Animated.ScrollView bounces={false}> + <Background + centered + gradientType={BackgroundGradientType.Light} + style={styles.container}> + <StatusBar barStyle="light-content" /> + <View style={styles.profile}> + <LargeProfilePic /> + <SmallProfilePic /> + </View> + <View style={styles.contentContainer}> <TaggInput - accessibilityHint="Custom" - accessibilityLabel="Gender input field." - placeholder="Enter your gender" + accessibilityHint="Enter a website." + accessibilityLabel="Website input field." + placeholder="Website" + autoCompleteType="off" + textContentType="URL" + autoCapitalize="none" + returnKeyType="next" + onChangeText={handleWebsiteUpdate} + onSubmitEditing={() => handleFocusChange('bio')} + blurOnSubmit={false} + valid={form.isValidWebsite} + attemptedSubmit={form.attemptedSubmit} + invalidWarning={'Website must be a valid link to your website'} + width={280} + /> + <TaggBigInput + accessibilityHint="Enter a bio." + accessibilityLabel="Bio input field." + placeholder="Bio" autoCompleteType="off" textContentType="none" autoCapitalize="none" returnKeyType="next" + onChangeText={handleBioUpdate} + onSubmitEditing={() => handleFocusChange('bio')} blurOnSubmit={false} - ref={customGenderRef} - onChangeText={handleCustomGenderUpdate} - onSubmitEditing={() => handleSubmit()} - valid={form.isValidGender} + ref={bioRef} + valid={form.isValidBio} attemptedSubmit={form.attemptedSubmit} - invalidWarning={'Custom field can only contain letters and hyphens'} + invalidWarning={ + 'Bio must be less than 150 characters and must contain valid characters' + } width={280} /> - )} - <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}> - <Text style={styles.submitBtnLabel}>Let's start!</Text> - </TouchableOpacity> - </View> - </Background> + <BirthDatePicker + ref={birthdateRef} + handleBDUpdate={handleBirthdateUpdate} + width={280} + date={form.birthdate} + showPresetdate={false} + /> + <TaggDropDown + onValueChange={(value: string) => handleClassYearUpdate(value)} + items={classYearList} + placeholder={{ + label: 'Class Year', + value: null, + color: '#ddd', + }} + /> + {customGender && ( + <TaggInput + accessibilityHint="Custom" + accessibilityLabel="Gender input field." + placeholder="Enter your gender" + autoCompleteType="off" + textContentType="none" + autoCapitalize="none" + returnKeyType="next" + blurOnSubmit={false} + ref={customGenderRef} + onChangeText={handleCustomGenderUpdate} + onSubmitEditing={() => handleSubmit()} + valid={form.isValidGender} + attemptedSubmit={form.attemptedSubmit} + invalidWarning={ + 'Custom field can only contain letters and hyphens' + } + width={280} + /> + )} + <TaggDropDown + onValueChange={(value: string) => handleGenderUpdate(value)} + items={[ + {label: 'Male', value: 'male'}, + {label: 'Female', value: 'female'}, + {label: 'Custom', value: 'custom'}, + ]} + placeholder={{ + label: 'Gender', + value: null, + color: '#ddd', + }} + /> + <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}> + <Text style={styles.submitBtnLabel}>Let's start!</Text> + </TouchableOpacity> + </View> + </Background> + </Animated.ScrollView> ); }; const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'space-around', + marginBottom: '10%', + }, profile: { flexDirection: 'row', marginBottom: '5%', @@ -449,7 +498,7 @@ const styles = StyleSheet.create({ padding: 15, backgroundColor: '#fff', marginLeft: '13%', - marginTop: '5%', + marginTop: '10%', height: 230, width: 230, borderRadius: 23, @@ -491,11 +540,12 @@ const styles = StyleSheet.create({ backgroundColor: '#8F01FF', justifyContent: 'center', alignItems: 'center', - width: 150, - height: 40, + width: SCREEN_WIDTH / 2.5, + height: SCREEN_WIDTH / 10, borderRadius: 5, marginTop: '5%', alignSelf: 'center', + marginBottom: SCREEN_WIDTH / 3, }, submitBtnLabel: { fontSize: 16, diff --git a/src/screens/profile/FollowersListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx index 874dd01b..f7192d10 100644 --- a/src/screens/profile/FollowersListScreen.tsx +++ b/src/screens/profile/FriendsListScreen.tsx @@ -1,6 +1,6 @@ -import React, {useEffect, useState} from 'react'; +import React, {useState} from 'react'; import {RouteProp} from '@react-navigation/native'; -import {TabsGradient, Followers, CenteredView} from '../../components'; +import {TabsGradient, Friends, CenteredView} from '../../components'; import {ScrollView} from 'react-native-gesture-handler'; import {SCREEN_HEIGHT} from '../../utils'; import {StyleSheet, View} from 'react-native'; @@ -10,28 +10,20 @@ import {EMPTY_PROFILE_PREVIEW_LIST} from '../../store/initialStates'; import {useSelector} from 'react-redux'; import {RootState} from '../../store/rootReducer'; -type FollowersListScreenRouteProp = RouteProp< +type FriendsListScreenRouteProp = RouteProp< ProfileStackParams, - 'FollowersListScreen' + 'FriendsListScreen' >; -interface FollowersListScreenProps { - route: FollowersListScreenRouteProp; +interface FriendsListScreenProps { + route: FriendsListScreenRouteProp; } -const FollowersListScreen: React.FC<FollowersListScreenProps> = ({route}) => { - const {isFollowers, userXId, screenType} = route.params; +const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => { + const {userXId, screenType} = route.params; - const {followers, following} = userXId + const {friends} = userXId ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.follow); - - const [list, setList] = useState<ProfilePreviewType[]>( - EMPTY_PROFILE_PREVIEW_LIST, - ); - - useEffect(() => { - setList(isFollowers ? followers : following); - }, [followers, following, setList]); + : useSelector((state: RootState) => state.friends); return ( <CenteredView> @@ -41,11 +33,7 @@ const FollowersListScreen: React.FC<FollowersListScreenProps> = ({route}) => { stickyHeaderIndices={[4]} contentContainerStyle={styles.contentContainer} showsVerticalScrollIndicator={false}> - <Followers - result={list} - sectionTitle={isFollowers ? 'Followers' : 'Following'} - screenType={screenType} - /> + <Friends result={friends} screenType={screenType} /> </ScrollView> <TabsGradient /> </View> @@ -80,4 +68,4 @@ const styles = StyleSheet.create({ }, }); -export default FollowersListScreen; +export default FriendsListScreen; diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts index 3bfe5d30..b6a13144 100644 --- a/src/screens/profile/index.ts +++ b/src/screens/profile/index.ts @@ -3,5 +3,5 @@ export {default as SocialMediaTaggs} from './SocialMediaTaggs'; export {default as CaptionScreen} from './CaptionScreen'; export {default as IndividualMoment} from './IndividualMoment'; export {default as MomentCommentsScreen} from './MomentCommentsScreen'; -export {default as FollowersListScreen} from './FollowersListScreen'; +export {default as FriendsListScreen} from './FriendsListScreen'; export {default as EditProfile} from './EditProfile'; |
