aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/onboarding/Checkpoint.tsx11
-rw-r--r--src/screens/onboarding/ProfileOnboarding.tsx26
-rw-r--r--src/screens/onboarding/SocialMedia.tsx180
-rw-r--r--src/screens/onboarding/index.ts1
4 files changed, 195 insertions, 23 deletions
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<CheckpointProps> = ({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<ProfileOnboardingProps> = ({route}) => {
+const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
+ route,
+ navigation,
+}) => {
const {userId, username} = route.params;
const [form, setForm] = React.useState({
largePic: '',
@@ -97,12 +100,6 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({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
*/
const LargeProfilePic = () => (
@@ -112,10 +109,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => {
onPress={goToGalleryLargePic}
style={styles.largeProfileUploader}>
{form.largePic ? (
- <Image
- source={{uri: form.largePic}}
- style={styles.largeProfilePic}
- />
+ <Image source={{uri: form.largePic}} style={styles.largeProfilePic} />
) : (
<Text style={styles.largeProfileText}>ADD LARGE PROFILE PIC HERE</Text>
)}
@@ -132,10 +126,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => {
onPress={goToGallerySmallPic}
style={styles.smallProfileUploader}>
{form.smallPic ? (
- <Image
- source={{uri: form.smallPic}}
- style={styles.smallProfilePic}
- />
+ <Image source={{uri: form.smallPic}} style={styles.smallProfilePic} />
) : (
<Text style={styles.smallProfileText}>ADD SMALLER PIC</Text>
)}
@@ -328,7 +319,10 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({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<OnboardingStackParams, 'SocialMedia'>;
+
+type SocialMediaNavigationProp = StackNavigationProp<
+ OnboardingStackParams,
+ 'SocialMedia'
+>;
+
+interface SocialMediaProps {
+ route: SocialMediaRouteProps;
+ navigation: SocialMediaNavigationProp;
+}
+
+const SocialMedia: React.FC<SocialMediaProps> = ({route, navigation}) => {
+ const {userId, username} = route.params;
+ const linkers: Array<LinkerType> = [];
+ 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 (
+ <Background style={styles.container}>
+ <StatusBar barStyle="light-content" />
+ <RegistrationWizard style={styles.wizard} step="seven" />
+ <KeyboardAvoidingView
+ behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+ style={styles.container}>
+ <View style={{marginBottom: '30%'}}>
+ <Text style={styles.header}>SOCIAL MEDIA</Text>
+ <Text style={styles.subtext}>
+ Select the social media you want to add
+ </Text>
+ </View>
+ <View style={styles.linkerContainer}>
+ {linkers.map((linker, index) => (
+ <LinkSocialMedia key={index} social={linker} />
+ ))}
+ </View>
+ </KeyboardAvoidingView>
+ <TouchableOpacity onPress={handleLogin} style={styles.loginButton}>
+ <Text style={styles.loginButtonLabel}>Login</Text>
+ </TouchableOpacity>
+ </Background>
+ );
+};
+
+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';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 06:49:15 +0000