Merge pull request #309 from IvanIFChen/tma707-login-after-invitation-code

[TMA-707] Login directly after entering correct invitation code

17 files changed, 60 insertions, 237 deletions

diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index f289cfc1..cb442b7b 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -55,7 +55,7 @@ export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to
 export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
 export const NO_RESULTS_FOUND = 'No Results Found!';
 export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on';
-export const SUCCESS_INVITATION_CODE = 'Perfect! You entered a valid invitation code, you are now able to login and explore Tagg!';
+export const SUCCESS_INVITATION_CODE = 'Welcome to Tagg!';
 export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`;
 export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
 export const SUCCESS_BADGES_UPDATE = 'Badges updated successfully!'
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index f848a5ab..26d9943b 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -87,6 +87,7 @@ export type MainStackParams = {
   InviteFriendsScreen: {
     screenType: ScreenType;
   };
+  SPWelcomeScreen: {};
 };
 
 export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index d2f0d460..8cefd3cc 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -25,6 +25,7 @@ import {
   SocialMediaTaggs,
   SuggestedPeopleScreen,
   SuggestedPeopleUploadPictureScreen,
+  SuggestedPeopleWelcomeScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
@@ -262,6 +263,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         component={MutualBadgeHolders}
         options={{...modalStyle}}
       />
+      <MainStack.Screen
+        name="SPWelcomeScreen"
+        component={SuggestedPeopleWelcomeScreen}
+        options={{
+          ...headerBarOptions('white', ''),
+        }}
+      />
     </MainStack.Navigator>
   );
 };
diff --git a/src/routes/onboarding/OnboardingStackNavigator.tsx b/src/routes/onboarding/OnboardingStackNavigator.tsx
index 0cdeecdf..a51a6c86 100644
--- a/src/routes/onboarding/OnboardingStackNavigator.tsx
+++ b/src/routes/onboarding/OnboardingStackNavigator.tsx
@@ -35,7 +35,7 @@ export type OnboardingStackParams = {
   PhoneVerification: {firstName: string; lastName: string; phone: string};
   OnboardingStepTwo: {firstName: string; lastName: string; phone: string};
   OnboardingStepThree: {userId: string; username: string};
-  InvitationCodeVerification: {userId: string};
+  InvitationCodeVerification: {userId: string; username: string};
 };
 
 export const OnboardingStack = createStackNavigator<OnboardingStackParams>();
diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx
deleted file mode 100644
index 30a83200..00000000
--- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {createStackNavigator} from '@react-navigation/stack';
-
-export type SuggestedPeopleOnboardingStackParams = {
-  WelcomeScreen: undefined;
-  UploadPicture: {
-    editing: boolean;
-  };
-  BadgeSelection: {
-    editing: boolean;
-  };
-};
-
-export const SuggestedPeopleOnboardingStack = createStackNavigator<SuggestedPeopleOnboardingStackParams>();
diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx
deleted file mode 100644
index a02e8373..00000000
--- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import {SuggestedPeopleOnboardingStack} from './SuggestedPeopleOnboardingStackNavigator';
-import {
-  SuggestedPeopleWelcomeScreen,
-  SuggestedPeopleUploadPictureScreen,
-  BadgeSelection,
-} from '../../screens';
-import {SCREEN_WIDTH} from '../../utils';
-import {headerBarOptions} from '../main';
-
-const SuggestedPeopleOnboardingStackScreen: React.FC = () => {
-  return (
-    <SuggestedPeopleOnboardingStack.Navigator
-      initialRouteName="WelcomeScreen"
-      screenOptions={{
-        headerShown: false,
-        gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
-      }}>
-      <SuggestedPeopleOnboardingStack.Screen
-        name="WelcomeScreen"
-        component={SuggestedPeopleWelcomeScreen}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <SuggestedPeopleOnboardingStack.Screen
-        name="UploadPicture"
-        component={SuggestedPeopleUploadPictureScreen}
-        initialParams={{editing: false}}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <SuggestedPeopleOnboardingStack.Screen
-        name="BadgeSelection"
-        component={BadgeSelection}
-        initialParams={{editing: false}}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-    </SuggestedPeopleOnboardingStack.Navigator>
-  );
-};
-
-export default SuggestedPeopleOnboardingStackScreen;
diff --git a/src/routes/suggestedPeopleOnboarding/index.ts b/src/routes/suggestedPeopleOnboarding/index.ts
deleted file mode 100644
index df711493..00000000
--- a/src/routes/suggestedPeopleOnboarding/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './SuggestedPeopleOnboardingStackNavigator';
-export * from './SuggestedPeopleOnboardingStackScreen';
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index cbd7dd88..335d4333 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -74,9 +74,11 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
               const success = await addBadgesService(selectedBadges);
               if (success) {
                 dispatch(suggestedPeopleBadgesFinished());
+                navigation.navigate('SuggestedPeople');
               }
             } else {
               dispatch(suggestedPeopleBadgesFinished());
+              navigation.navigate('SuggestedPeople');
             }
           }
         }}>
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index 41d17f29..7cd4b3bf 100644
--- a/src/screens/onboarding/InvitationCodeVerification.tsx
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -1,3 +1,4 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React from 'react';
@@ -9,6 +10,7 @@ import {
   useBlurOnFulfill,
   useClearByFocusCell,
 } from 'react-native-confirmation-code-field';
+import {useDispatch} from 'react-redux';
 import {
   ArrowButton,
   Background,
@@ -25,7 +27,7 @@ import {
 } from '../../constants/strings';
 import {OnboardingStackParams} from '../../routes';
 import {BackgroundGradientType} from '../../types';
-import {SCREEN_WIDTH} from '../../utils';
+import {SCREEN_WIDTH, userLogin} from '../../utils';
 
 type InvitationCodeVerificationRouteProp = RouteProp<
   OnboardingStackParams,
@@ -56,6 +58,7 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
     value,
     setValue,
   });
+  const dispatch = useDispatch();
 
   const handleInvitationCodeVerification = async () => {
     if (value.length === 6) {
@@ -71,10 +74,11 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
         );
 
         if (verifyInviteCodeResponse.status === 200) {
-          navigation.navigate('Login');
-          setTimeout(() => {
-            Alert.alert(SUCCESS_INVITATION_CODE);
-          }, 500);
+          const userId = route.params.userId;
+          const username = route.params.username;
+          await AsyncStorage.setItem('userId', userId);
+          await AsyncStorage.setItem('username', username);
+          userLogin(dispatch, {userId, username});
         } else {
           Alert.alert(ERROR_INVALID_INVITATION_CODE);
         }
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index cfa39dbd..6d9d3a97 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -170,6 +170,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
         } else if (statusCode === 200 && !data.isOnboarded) {
           navigation.navigate('InvitationCodeVerification', {
             userId: data.UserID,
+            username: username,
           });
           setTimeout(() => {
             Alert.alert(ERROR_NOT_ONBOARDED);
diff --git a/src/screens/onboarding/OnboardingStepThree.tsx b/src/screens/onboarding/OnboardingStepThree.tsx
index 64a2a2f7..f22d720f 100644
--- a/src/screens/onboarding/OnboardingStepThree.tsx
+++ b/src/screens/onboarding/OnboardingStepThree.tsx
@@ -57,7 +57,7 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
   route,
   navigation,
 }) => {
-  const {userId} = route.params;
+  const {userId, username} = route.params;
   let emptyDate: string | undefined;
   const [form, setForm] = React.useState({
     smallPic: '',
@@ -224,12 +224,12 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
         },
         body: request,
       });
-      console.log(route.params.userId);
       let statusCode = response.status;
       let data = await response.json();
       if (statusCode === 200) {
         navigation.navigate('InvitationCodeVerification', {
           userId: route.params.userId,
+          username: username,
         });
       } else if (statusCode === 400) {
         Alert.alert(
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 5edc6277..313e2f2c 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -38,11 +38,11 @@ const ProfileScreen: React.FC<ProfileOnboardingProps> = ({route}) => {
    * This is done to reset the users stored in our store for the Search screen.
    * Read more about useFocusEffect here : https://reactnavigation.org/docs/function-after-focusing-screen/
    */
-  useFocusEffect(() => {
-    if (!userXId) {
-      dispatch(resetScreenType(screenType));
-    }
-  });
+  // useFocusEffect(() => {
+  //   if (!userXId) {
+  //     dispatch(resetScreenType(screenType));
+  //   }
+  // });
 
   return (
     <>
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 06d3efb3..8e0801c2 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -121,7 +121,7 @@ const SPBody: React.FC<SPBodyProps> = ({
       <TouchableOpacity
         onPress={() => {
           navigation.push('Profile', {
-            userXId: user.id,
+            userXId: loggedInUserId === user.id ? undefined : user.id,
             screenType,
           });
         }}
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 4094b0a3..76889657 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,37 +1,31 @@
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState, useRef} from 'react';
-import {
-  FlatList,
-  RefreshControl,
-  StatusBar,
-  StyleSheet,
-  ViewToken,
-} from 'react-native';
-
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {FlatList, RefreshControl, StatusBar, ViewToken} from 'react-native';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {TabsGradient, TaggLoadingIndicator, Background} from '../../components';
+import {Background, TabsGradient, TaggLoadingIndicator} from '../../components';
 import {SP_PAGE_SIZE} from '../../constants';
+import {MainStack} from '../../routes';
+import MainStackScreen from '../../routes/main/MainStackScreen';
 import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
 import {getSuggestedPeople} from '../../services/SuggestedPeopleService';
 import {cancelFriendRequest, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {
+  BackgroundGradientType,
   FriendshipStatusType,
   ProfilePreviewType,
   ScreenType,
   SuggestedPeopleDataType,
-  BackgroundGradientType,
 } from '../../types';
 import {
   fetchUserX,
   getUserAsProfilePreviewType,
   handleAddFriend,
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
 } from '../../utils';
+import {SuggestedPeopleWelcomeScreen} from '../suggestedPeopleOnboarding';
 import {userXInStore} from './../../utils/';
 import SPBody from './SPBody';
+
 /**
  * Bare bones for suggested people consisting of:
  * * Image, title, name, username, add friend button [w/o functionality]
@@ -209,9 +203,13 @@ const SuggestedPeopleScreen: React.FC = () => {
     [],
   );
 
-  return suggested_people_linked === 0 ? (
-    <SuggestedPeopleOnboardingStackScreen />
-  ) : loading ? (
+  useFocusEffect(() => {
+    if (suggested_people_linked === 0) {
+      navigation.navigate('SPWelcomeScreen');
+    }
+  });
+
+  return loading ? (
     <>
       <TaggLoadingIndicator fullscreen />
       <Background gradientType={BackgroundGradientType.Dark} />
@@ -245,142 +243,4 @@ const SuggestedPeopleScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  mainContainer: {
-    flexDirection: 'column',
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-    paddingVertical: '15%',
-    paddingBottom: '20%',
-    justifyContent: 'space-between',
-    alignSelf: 'center',
-  },
-  marginManager: {marginHorizontal: '5%'},
-  image: {
-    position: 'absolute',
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-    zIndex: 0,
-  },
-  title: {
-    zIndex: 1,
-    paddingTop: '3%',
-    alignSelf: 'center',
-    fontSize: normalize(22),
-    lineHeight: normalize(26),
-    fontWeight: '800',
-    letterSpacing: normalize(3),
-    color: '#FFFEFE',
-    textShadowColor: 'rgba(0, 0, 0, 0.4)',
-    textShadowOffset: {width: normalize(2), height: normalize(2)},
-    textShadowRadius: normalize(2),
-  },
-  firstName: {
-    color: '#fff',
-    fontWeight: '800',
-    fontSize: normalize(24),
-    lineHeight: normalize(29),
-    textShadowColor: 'rgba(0, 0, 0, 0.3)',
-    textShadowOffset: {width: normalize(2), height: normalize(2)},
-    textShadowRadius: normalize(2),
-    letterSpacing: normalize(2.5),
-    alignSelf: 'baseline',
-  },
-  username: {
-    color: '#fff',
-    fontWeight: '600',
-    fontSize: normalize(15),
-    lineHeight: normalize(18),
-    textShadowColor: 'rgba(0, 0, 0, 0.3)',
-    textShadowOffset: {width: normalize(2), height: normalize(2)},
-    textShadowRadius: normalize(2),
-    letterSpacing: normalize(2),
-  },
-  nameInfoContainer: {},
-  addButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH * 0.3,
-    height: SCREEN_WIDTH * 0.085,
-    padding: 0,
-    borderWidth: 2,
-    borderColor: '#fff',
-    borderRadius: 1,
-    marginLeft: '1%',
-    marginTop: '4%',
-    shadowColor: 'rgb(0, 0, 0)',
-    shadowRadius: 2,
-    shadowOffset: {width: 2, height: 2},
-    shadowOpacity: 0.5,
-  },
-  addButtonTitle: {
-    color: 'white',
-    padding: 0,
-    fontSize: normalize(15),
-    lineHeight: normalize(18),
-    fontWeight: 'bold',
-    textAlign: 'center',
-    letterSpacing: normalize(1),
-  },
-  addUserContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    marginBottom: '5%',
-  },
-  requestedButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH * 0.3,
-    height: SCREEN_WIDTH * 0.085,
-    padding: 0,
-    borderWidth: 2,
-    borderColor: 'transparent',
-    borderRadius: 1,
-    marginLeft: '1%',
-    marginTop: '4%',
-    shadowColor: 'rgb(0, 0, 0)',
-    shadowRadius: 2,
-    shadowOffset: {width: 2, height: 2},
-    shadowOpacity: 0.5,
-  },
-  requestedButtonTitle: {
-    backgroundColor: 'transparent',
-    fontSize: normalize(15),
-    lineHeight: normalize(18),
-    fontWeight: 'bold',
-    textAlign: 'center',
-    letterSpacing: normalize(1),
-  },
-  body: {},
-
-  button: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
-    aspectRatio: 154 / 33,
-    borderWidth: 2,
-    borderColor: '#fff',
-    borderRadius: 3,
-    marginRight: '2%',
-    marginLeft: '1%',
-  },
-  transparentBG: {
-    backgroundColor: 'transparent',
-  },
-  lightBlueBG: {
-    backgroundColor: '#fff',
-  },
-  label: {
-    fontSize: normalize(15),
-    fontWeight: '700',
-    letterSpacing: 1,
-  },
-  blueLabel: {
-    color: '#fff',
-  },
-  whiteLabel: {
-    color: 'white',
-  },
-});
 export default SuggestedPeopleScreen;
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index 87e22d9e..0a4e5718 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -98,7 +98,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
       if (success) {
         dispatch(uploadedSuggestedPeoplePhoto(image));
         if (!editing) {
-          navigation.push('BadgeSelection', {editing: false});
+          navigation.navigate('BadgeSelection', {editing: false});
         }
       } else {
         Alert.alert(ERROR_UPLOAD);
@@ -106,12 +106,12 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
       setLoading(false);
       // Navigated back to Profile if user is editing their Suggested People Picture
       if (editing) {
+        navigation.goBack();
         setTimeout(() => {
           Alert.alert(success ? SUCCESS_PIC_UPLOAD : ERROR_UPLOAD_SP_PHOTO);
         }, 500);
       }
     }
-    navigation.goBack();
   };
 
   return (
@@ -161,7 +161,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
         {editing && (
           <TouchableOpacity
             onPress={() => {
-              navigation.push('BadgeSelection', {editing: true});
+              navigation.navigate('BadgeSelection', {editing: true});
             }}>
             <View style={styles.editBadgesMainContainer}>
               <View style={styles.editBadgesSubContainer}>
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
index 10f3b3a5..2f12d909 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
@@ -1,6 +1,6 @@
 import {BlurView} from '@react-native-community/blur';
 import {useNavigation} from '@react-navigation/native';
-import React from 'react';
+import React, {Fragment, useEffect} from 'react';
 import {Image, StatusBar, StyleSheet, TouchableOpacity} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {SafeAreaView} from 'react-native-safe-area-context';
@@ -9,6 +9,13 @@ import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 const SuggestedPeopleWelcomeScreen: React.FC = () => {
   const navigation = useNavigation();
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerBackImage: () => <Fragment />,
+    });
+  }, []);
+
   return (
     <>
       <StatusBar barStyle={'light-content'} />
@@ -35,7 +42,9 @@ const SuggestedPeopleWelcomeScreen: React.FC = () => {
       </BlurView>
       <TouchableOpacity
         style={styles.nextButton}
-        onPress={() => navigation.push('UploadPicture')}>
+        onPress={() =>
+          navigation.navigate('UpdateSPPicture', {editing: false})
+        }>
         <UpArrow color={'white'} />
       </TouchableOpacity>
     </>
diff --git a/src/services/UserFriendsService.ts b/src/services/UserFriendsService.ts
index cea20fbe..c36cdaa7 100644
--- a/src/services/UserFriendsService.ts
+++ b/src/services/UserFriendsService.ts
@@ -193,7 +193,6 @@ export const deleteFriendshipService = async (
 export const usersFromContactsService = async (
   contacts: Array<ContactType>,
 ) => {
-  console.log('Contacts: ', contacts);
   try {
     const token = await AsyncStorage.getItem('token');
     const response = await fetch(USERS_FROM_CONTACTS_ENDPOINT, {