From 44a25bfabd356f5eee5ec4f580452407a7e40246 Mon Sep 17 00:00:00 2001 From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com> Date: Sat, 24 Oct 2020 17:53:37 -0700 Subject: [TMA 302] Social media linking to login (#71) * Social media linking to login * Social media linking to login --- src/screens/onboarding/Checkpoint.tsx | 11 +- src/screens/onboarding/ProfileOnboarding.tsx | 26 ++-- src/screens/onboarding/SocialMedia.tsx | 180 +++++++++++++++++++++++++++ src/screens/onboarding/index.ts | 1 + 4 files changed, 195 insertions(+), 23 deletions(-) create mode 100644 src/screens/onboarding/SocialMedia.tsx (limited to 'src/screens') diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx index 8ef7f307..aae2293e 100644 --- a/src/screens/onboarding/Checkpoint.tsx +++ b/src/screens/onboarding/Checkpoint.tsx @@ -30,14 +30,11 @@ interface CheckpointProps { const Checkpoint: React.FC = ({route, navigation}) => { const {userId, username} = route.params; - /** - * login: determines if user successully created an account to - * navigate to home and display main tab navigation bar - */ - const {login} = React.useContext(AuthContext); - const handleSkip = () => { - login(userId, username); + navigation.navigate('SocialMedia', { + userId: userId, + username: username, + }); }; const handleProceed = () => { diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx index e13ccc5a..7e489d6d 100644 --- a/src/screens/onboarding/ProfileOnboarding.tsx +++ b/src/screens/onboarding/ProfileOnboarding.tsx @@ -47,7 +47,10 @@ interface ProfileOnboardingProps { * @param navigation react-navigation navigation object */ -const ProfileOnboarding: React.FC = ({route}) => { +const ProfileOnboarding: React.FC = ({ + route, + navigation, +}) => { const {userId, username} = route.params; const [form, setForm] = React.useState({ largePic: '', @@ -96,12 +99,6 @@ const ProfileOnboarding: React.FC = ({route}) => { } }; - /** - * login: determines if user successully created an account to - * navigate to home and display main tab navigation bar - */ - const {login} = React.useContext(AuthContext); - /** * Profile screen "Add Large Profile Pic Here" button */ @@ -112,10 +109,7 @@ const ProfileOnboarding: React.FC = ({route}) => { onPress={goToGalleryLargePic} style={styles.largeProfileUploader}> {form.largePic ? ( - + ) : ( ADD LARGE PROFILE PIC HERE )} @@ -132,10 +126,7 @@ const ProfileOnboarding: React.FC = ({route}) => { onPress={goToGallerySmallPic} style={styles.smallProfileUploader}> {form.smallPic ? ( - + ) : ( ADD SMALLER PIC )} @@ -328,7 +319,10 @@ const ProfileOnboarding: React.FC = ({route}) => { let statusCode = response.status; let data = await response.json(); if (statusCode === 200) { - login(userId, username); + navigation.navigate('SocialMedia', { + userId: userId, + username: username, + }); } else if (statusCode === 400) { Alert.alert( 'Profile update failed. 😔', diff --git a/src/screens/onboarding/SocialMedia.tsx b/src/screens/onboarding/SocialMedia.tsx new file mode 100644 index 00000000..868368e3 --- /dev/null +++ b/src/screens/onboarding/SocialMedia.tsx @@ -0,0 +1,180 @@ +import React from 'react'; +import { + StyleSheet, + View, + TouchableOpacity, + Text, + StatusBar, + KeyboardAvoidingView, + Platform, + Alert, +} from 'react-native'; +import { + Background, + RegistrationWizard, + LinkSocialMedia, +} from '../../components'; +import {LinkerType} from 'src/types'; +import {SOCIAL_LIST} from '../../constants/'; +import {OnboardingStackParams, AuthContext} from '../../routes'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; + +/** + * Social Media Screen for displaying social media linkers + */ + +type SocialMediaRouteProps = RouteProp; + +type SocialMediaNavigationProp = StackNavigationProp< + OnboardingStackParams, + 'SocialMedia' +>; + +interface SocialMediaProps { + route: SocialMediaRouteProps; + navigation: SocialMediaNavigationProp; +} + +const SocialMedia: React.FC = ({route, navigation}) => { + const {userId, username} = route.params; + const linkers: Array = []; + const [state, setState] = React.useState({ + showMore: false, + }); + + /** + * login: determines if user successully created an account to + * navigate to home and display main tab navigation bar + */ + const {login} = React.useContext(AuthContext); + + // let numSocials: Number = state.showMore ? 9 : 3; + + for (let i = 0; i < SOCIAL_LIST.length; i++) { + let linker: LinkerType = { + label: SOCIAL_LIST[i], + }; + linkers.push(linker); + } + + /** + * Just commenting this out, in case we need it in the future + */ + // const handleShowPress = () => { + // setState({ + // ...state, + // showMore: !state.showMore, + // }); + // }; + + const handleLogin = () => { + try { + login(userId, username); + } catch (error) { + console.log(error); + Alert.alert('There was a problem logging you in'); + } + }; + + return ( + + + + + + SOCIAL MEDIA + + Select the social media you want to add + + + + {linkers.map((linker, index) => ( + + ))} + + + + Login + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + linkerContainer: { + position: 'relative', + bottom: '15%', + flexDirection: 'row', + height: '25%', + flexWrap: 'wrap', + justifyContent: 'center', + alignContent: 'center', + marginBottom: '10%', + }, + header: { + color: '#fff', + fontSize: 22, + fontWeight: '600', + textAlign: 'center', + marginBottom: '4%', + marginHorizontal: '10%', + }, + subtext: { + color: '#fff', + fontSize: 14, + fontWeight: '600', + textAlign: 'center', + marginBottom: '35%', + marginHorizontal: '10%', + }, + // show: { + // borderColor: '#fff', + // borderWidth: 1, + // borderRadius: 3, + // paddingHorizontal: '2%', + // paddingVertical: '1%', + // marginVertical: '3%', + // marginLeft: '65%', + // }, + wizard: { + ...Platform.select({ + ios: { + top: 50, + }, + android: { + bottom: 40, + }, + }), + }, + loginButton: { + backgroundColor: '#8F01FF', + justifyContent: 'center', + alignItems: 'center', + width: 150, + height: 40, + borderRadius: 5, + borderWidth: 1, + borderColor: '#8F01FF', + marginBottom: '15%', + }, + loginButtonLabel: { + fontSize: 16, + fontWeight: '500', + color: '#ddd', + }, + form: { + alignItems: 'center', + justifyContent: 'flex-start', + flex: 3, + }, +}); + +export default SocialMedia; diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts index 27a33d32..d8ae7644 100644 --- a/src/screens/onboarding/index.ts +++ b/src/screens/onboarding/index.ts @@ -7,3 +7,4 @@ export {default as Checkpoint} from './Checkpoint'; export {default as ProfileOnboarding} from './ProfileOnboarding'; export {default as Splash} from './Splash'; export {default as InvitationCodeVerification} from './InvitationCodeVerification'; +export {default as SocialMedia} from './SocialMedia'; -- cgit v1.2.3-70-g09d2