aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/onboarding/ProfileOnboarding.tsx210
-rw-r--r--src/screens/profile/FriendsListScreen.tsx (renamed from src/screens/profile/FollowersListScreen.tsx)36
-rw-r--r--src/screens/profile/index.ts2
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';