Merge pull request #236 from IvanIFChen/tma626-people-tutorial

[TMA-626] Suggested People Tutorial (First 3 Screens)

2 files changed, 59 insertions, 67 deletions

diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx
index 8ebdaea6..bf34ba6e 100644
--- a/src/screens/suggestedPeople/AnimatedTutorial.tsx
+++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {Image} from 'react-native-animatable';
-import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import {useNavigation} from '@react-navigation/native';
 import {useDispatch, useSelector} from 'react-redux';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {suggestedPeopleAnimatedTutorialFinished} from '../../store/actions/user';
 import {RootState} from '../../store/rootReducer';
-import {updateSPSwipeTutorial} from '../../store/actions/user';
+import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
 
 const AnimatedTutorial: React.FC = () => {
   const navigation = useNavigation();
@@ -15,11 +15,7 @@ const AnimatedTutorial: React.FC = () => {
   const {user} = useSelector((state: RootState) => state.user);
 
   const handleCloseAnimationTutorial = async () => {
-    /* In user's store, check if profile.sp_swipe_tutorial === 0
-     * Make call to edit profile endpoint with suggested people === 1
-     */
-    const data = 1;
-    dispatch(updateSPSwipeTutorial(user, data));
+    dispatch(suggestedPeopleAnimatedTutorialFinished(user.userId));
     navigation.pop();
   };
   return (
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 4d8607a4..3437cd85 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,3 +1,4 @@
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import React, {useCallback} from 'react';
 import {
   StatusBar,
@@ -7,16 +8,15 @@ import {
   View,
 } from 'react-native';
 import {Image} from 'react-native-animatable';
-import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {TabsGradient, TaggsBar} from '../../components';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {normalize} from '../../utils';
 import Animated from 'react-native-reanimated';
-import {ScreenType} from '../../types';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import {useSelector} from 'react-redux';
-import {RootState} from '../../store/rootReducer';
-import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import {TabsGradient, TaggsBar} from '../../components';
 import {MutualFriends} from '../../components/suggestedPeople';
+import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
+import {RootState} from '../../store/rootReducer';
+import {ScreenType} from '../../types';
+import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * Bare bones for suggested people consisting of:
@@ -24,75 +24,71 @@ import {MutualFriends} from '../../components/suggestedPeople';
  */
 
 const SuggestedPeopleScreen: React.FC = () => {
+  const {suggested_people_linked} = useSelector(
+    (state: RootState) => state.user.profile,
+  ) ?? {suggested_people_linked: -1};
+  const y = Animated.useValue(0);
+
   // Can be removed once firstname, username props are received
   const firstName = 'Sarah';
 
   // Adviced to maintain username as a variable here to append @ symbol for maintainability
   const username = '@' + 'sarahmiller';
   const navigation = useNavigation();
-  const screenType = ScreenType.SuggestedPeople;
-  const {
-    profile: {sp_swipe_tutorial},
-  } = useSelector((state: RootState) => state.user);
 
   useFocusEffect(
     useCallback(() => {
       const navigateToAnimatedTutorial = () => {
-        /* In user's store, check if profile.sp_swipe_tutorial === 0
-         * If, true show tutorial.
-         */
-        if (sp_swipe_tutorial === 0) {
+        // if the user has finished the previous SP onboarding
+        if (suggested_people_linked === 1) {
           navigation.navigate('AnimatedTutorial');
         }
       };
       navigateToAnimatedTutorial();
-    }, [sp_swipe_tutorial, navigation]),
+    }, [navigation, suggested_people_linked]),
   );
 
-  return (
-    <>
-      <SafeAreaView>
-        <StatusBar barStyle={'light-content'} />
-        <Image
-          // !!! Displaying Sarah Miller's image
-          source={require('../../assets/images/sarah_miller_full.jpeg')}
-          style={styles.image}
-        />
-        <View style={styles.mainContainer}>
-          <Text style={styles.title}>Suggested People</Text>
-          <View style={styles.body}>
-            {/* First row contaning name, username, add button (w/o functionality) */}
-            <View style={styles.addUserContainer}>
-              <View style={styles.nameInfoContainer}>
-                <Text style={styles.firstName}>{firstName}</Text>
-                <Text style={styles.username}>{username}</Text>
-              </View>
-              <TouchableOpacity
-                activeOpacity={0.5}
-                // TODO: Call function to Add Friend
-                onPress={() => console.log('Call add friend function')}>
-                <View style={styles.addButton}>
-                  <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
-                </View>
-              </TouchableOpacity>
+  const mainContent = () => (
+    <SafeAreaView>
+      <StatusBar barStyle={'light-content'} />
+      <Image
+        // !!! Displaying Sarah Miller's image
+        source={require('../../assets/images/sarah_miller_full.jpeg')}
+        style={styles.image}
+      />
+      <View style={styles.mainContainer}>
+        <Text style={styles.title}>Suggested People</Text>
+        <View style={styles.body}>
+          <View style={styles.addUserContainer}>
+            <View style={styles.nameInfoContainer}>
+              <Text style={styles.firstName}>{firstName}</Text>
+              <Text style={styles.username}>{username}</Text>
             </View>
-            {/* Taggs Bar. Displays only linked profiles for user while viewing their own profile. */}
-            <TaggsBar
-              y={Animated.useValue(0)}
-              // :: For testing purposes, to view user's own profile, pass userXId=''
-              userXId={''}
-              profileBodyHeight={0}
-              screenType={screenType}
-            />
-            {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends 
-              * Needs to be displayed only if userX !user himself
-              */}
-            <MutualFriends />
+            <TouchableOpacity
+              activeOpacity={0.5}
+              onPress={() => console.log('Call add friend function')}>
+              <View style={styles.addButton}>
+                <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+              </View>
+            </TouchableOpacity>
           </View>
+          <TaggsBar
+            y={y}
+            userXId={undefined}
+            profileBodyHeight={0}
+            screenType={ScreenType.SuggestedPeople}
+          />
+          <MutualFriends />
         </View>
-        <TabsGradient />
-      </SafeAreaView>
-    </>
+      </View>
+      <TabsGradient />
+    </SafeAreaView>
+  );
+
+  return suggested_people_linked === 0 ? (
+    <SuggestedPeopleOnboardingStackScreen />
+  ) : (
+    mainContent()
   );
 };