1 files changed, 28 insertions, 12 deletions

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 13dc422b..80463b79 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, {useCallback} from 'react';
 import {
   StatusBar,
   StyleSheet,
@@ -7,20 +7,15 @@ import {
   View,
 } from 'react-native';
 import {Image} from 'react-native-animatable';
-import {
-  fetchUserX,
-  isIPhoneX,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-  userXInStore,
-} from '../../utils';
+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 {useDispatch, useStore} from 'react-redux';
+import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
 
 /**
  * Bare bones for suggested people consisting of:
@@ -33,6 +28,25 @@ const SuggestedPeopleScreen: React.FC = () => {
 
   // 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) {
+          navigation.navigate('AnimatedTutorial');
+        }
+      };
+      navigateToAnimatedTutorial();
+    }, [sp_swipe_tutorial, navigation]),
+  );
 
   return (
     <>
@@ -46,7 +60,7 @@ const SuggestedPeopleScreen: React.FC = () => {
         <View style={styles.mainContainer}>
           <Text style={styles.title}>Suggested People</Text>
           <View style={styles.body}>
-            {/* Added first row contaning name, username, add button (w/o functionality) */}
+            {/* First row contaning name, username, add button (w/o functionality) */}
             <View style={styles.addUserContainer}>
               <View style={styles.nameInfoContainer}>
                 <Text style={styles.firstName}>{firstName}</Text>
@@ -54,18 +68,20 @@ const SuggestedPeopleScreen: React.FC = () => {
               </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>
             </View>
-            {/* TODO: Add TaggsBar here */}
+            {/* 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.SuggestedPeople}
+              screenType={screenType}
             />
             {/* TODO: Add MutualFriends here */}
           </View>