From 38661e00281363b0f4ad32f0b29d739e1ca09164 Mon Sep 17 00:00:00 2001 From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com> Date: Wed, 30 Dec 2020 11:36:44 -0800 Subject: [TMA - 457]Change followers to friends (#149) * One commit to replace followers with friends * Move block unblock to drawer and some cosmetic changes * Options to edit own profile when viewing * Changes for University Class * Small fix * Made ProfileOnboarding a scroll view and other small changes * Small fix * Small fix thanks to ivan and tanmay * Add ? --- src/screens/onboarding/ProfileOnboarding.tsx | 210 +++++++++++++++++---------- src/screens/profile/FollowersListScreen.tsx | 83 ----------- src/screens/profile/FriendsListScreen.tsx | 71 +++++++++ src/screens/profile/index.ts | 2 +- 4 files changed, 202 insertions(+), 164 deletions(-) delete mode 100644 src/screens/profile/FollowersListScreen.tsx create mode 100644 src/screens/profile/FriendsListScreen.tsx (limited to 'src/screens') 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 = ({ isValidGender: true, attemptedSubmit: false, token: '', + classYear: -1, }); const [customGender, setCustomGender] = React.useState(Boolean); @@ -100,6 +105,12 @@ const ProfileOnboarding: React.FC = ({ } }; + var classYearList: Array = []; + + 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 = ({ } }; + 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 = ({ 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 = ({ } } + if (form.classYear !== -1) { + request.append('university_class', form.classYear); + } + if (invalidFields) { return; } @@ -344,96 +371,118 @@ const ProfileOnboarding: React.FC = ({ }; return ( - - - - - - - - handleFocusChange('bio')} - blurOnSubmit={false} - valid={form.isValidWebsite} - attemptedSubmit={form.attemptedSubmit} - invalidWarning={'Website must be a valid link to your website'} - width={280} - /> - 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} - /> - - handleGenderUpdate(value)} - items={[ - {label: 'Male', value: 'male'}, - {label: 'Female', value: 'female'}, - {label: 'Custom', value: 'custom'}, - ]} - placeholder={{ - label: 'Gender', - value: null, - color: '#ddd', - }} - /> - {customGender && ( + + + + + + + + handleFocusChange('bio')} + blurOnSubmit={false} + valid={form.isValidWebsite} + attemptedSubmit={form.attemptedSubmit} + invalidWarning={'Website must be a valid link to your website'} + width={280} + /> + 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} /> - )} - - Let's start! - - - + + handleClassYearUpdate(value)} + items={classYearList} + placeholder={{ + label: 'Class Year', + value: null, + color: '#ddd', + }} + /> + {customGender && ( + handleSubmit()} + valid={form.isValidGender} + attemptedSubmit={form.attemptedSubmit} + invalidWarning={ + 'Custom field can only contain letters and hyphens' + } + width={280} + /> + )} + handleGenderUpdate(value)} + items={[ + {label: 'Male', value: 'male'}, + {label: 'Female', value: 'female'}, + {label: 'Custom', value: 'custom'}, + ]} + placeholder={{ + label: 'Gender', + value: null, + color: '#ddd', + }} + /> + + Let's start! + + + + ); }; 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/FollowersListScreen.tsx deleted file mode 100644 index 874dd01b..00000000 --- a/src/screens/profile/FollowersListScreen.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, {useEffect, useState} from 'react'; -import {RouteProp} from '@react-navigation/native'; -import {TabsGradient, Followers, CenteredView} from '../../components'; -import {ScrollView} from 'react-native-gesture-handler'; -import {SCREEN_HEIGHT} from '../../utils'; -import {StyleSheet, View} from 'react-native'; -import {ProfileStackParams} from '../../routes'; -import {ProfilePreviewType} from '../../types'; -import {EMPTY_PROFILE_PREVIEW_LIST} from '../../store/initialStates'; -import {useSelector} from 'react-redux'; -import {RootState} from '../../store/rootReducer'; - -type FollowersListScreenRouteProp = RouteProp< - ProfileStackParams, - 'FollowersListScreen' ->; -interface FollowersListScreenProps { - route: FollowersListScreenRouteProp; -} - -const FollowersListScreen: React.FC = ({route}) => { - const {isFollowers, userXId, screenType} = route.params; - - const {followers, following} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.follow); - - const [list, setList] = useState( - EMPTY_PROFILE_PREVIEW_LIST, - ); - - useEffect(() => { - setList(isFollowers ? followers : following); - }, [followers, following, setList]); - - return ( - - - - - - - - - ); -}; - -const styles = StyleSheet.create({ - contentContainer: { - paddingBottom: SCREEN_HEIGHT / 15, - paddingHorizontal: 15, - marginTop: '5%', - }, - modalView: { - width: '85%', - height: '70%', - backgroundColor: '#fff', - shadowColor: '#000', - shadowOpacity: 30, - shadowOffset: {width: 0, height: 2}, - shadowRadius: 5, - borderRadius: 8, - paddingBottom: 15, - paddingHorizontal: 20, - justifyContent: 'space-between', - }, - modalScrollViewContent: { - justifyContent: 'center', - }, - modalScrollView: { - marginBottom: 10, - }, -}); - -export default FollowersListScreen; diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx new file mode 100644 index 00000000..f7192d10 --- /dev/null +++ b/src/screens/profile/FriendsListScreen.tsx @@ -0,0 +1,71 @@ +import React, {useState} from 'react'; +import {RouteProp} from '@react-navigation/native'; +import {TabsGradient, Friends, CenteredView} from '../../components'; +import {ScrollView} from 'react-native-gesture-handler'; +import {SCREEN_HEIGHT} from '../../utils'; +import {StyleSheet, View} from 'react-native'; +import {ProfileStackParams} from '../../routes'; +import {ProfilePreviewType} from '../../types'; +import {EMPTY_PROFILE_PREVIEW_LIST} from '../../store/initialStates'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../store/rootReducer'; + +type FriendsListScreenRouteProp = RouteProp< + ProfileStackParams, + 'FriendsListScreen' +>; +interface FriendsListScreenProps { + route: FriendsListScreenRouteProp; +} + +const FriendsListScreen: React.FC = ({route}) => { + const {userXId, screenType} = route.params; + + const {friends} = userXId + ? useSelector((state: RootState) => state.userX[screenType][userXId]) + : useSelector((state: RootState) => state.friends); + + return ( + + + + + + + + + ); +}; + +const styles = StyleSheet.create({ + contentContainer: { + paddingBottom: SCREEN_HEIGHT / 15, + paddingHorizontal: 15, + marginTop: '5%', + }, + modalView: { + width: '85%', + height: '70%', + backgroundColor: '#fff', + shadowColor: '#000', + shadowOpacity: 30, + shadowOffset: {width: 0, height: 2}, + shadowRadius: 5, + borderRadius: 8, + paddingBottom: 15, + paddingHorizontal: 20, + justifyContent: 'space-between', + }, + modalScrollViewContent: { + justifyContent: 'center', + }, + modalScrollView: { + marginBottom: 10, + }, +}); + +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'; -- cgit v1.2.3-70-g09d2