2 files changed, 55 insertions, 19 deletions

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 3437cd85..ba9c36a7 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -59,26 +59,31 @@ const SuggestedPeopleScreen: React.FC = () => {
       <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>
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={() => console.log('Call add friend function')}>
-              <View style={styles.addButton}>
-                <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+          <View style={styles.marginManager}>
+            <View style={styles.addUserContainer}>
+              <View style={styles.nameInfoContainer}>
+                <Text style={styles.firstName}>{firstName}</Text>
+                <Text style={styles.username}>{username}</Text>
               </View>
-            </TouchableOpacity>
+              <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>
           </View>
           <TaggsBar
             y={y}
             userXId={undefined}
             profileBodyHeight={0}
             screenType={ScreenType.SuggestedPeople}
+            whiteRing={true}
           />
-          <MutualFriends />
+          <View style={styles.marginManager}>
+            <MutualFriends />
+          </View>
         </View>
       </View>
       <TabsGradient />
@@ -95,12 +100,12 @@ const SuggestedPeopleScreen: React.FC = () => {
 const styles = StyleSheet.create({
   mainContainer: {
     flexDirection: 'column',
-    width: SCREEN_WIDTH * 0.9,
+    width: SCREEN_WIDTH,
     height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88,
     justifyContent: 'space-between',
     alignSelf: 'center',
-    marginHorizontal: '5%',
   },
+  marginManager: {marginHorizontal: '5%'},
   image: {
     position: 'absolute',
     width: SCREEN_WIDTH,
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index 1b30c72f..b49761a0 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -1,4 +1,5 @@
-import React, {useState} from 'react';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
 import {
   Alert,
   Image,
@@ -10,19 +11,41 @@ import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import ImagePicker from 'react-native-image-crop-picker';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import {useDispatch} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import {TaggSquareButton} from '../../components';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {SP_HEIGHT, SP_WIDTH} from '../../constants';
-import {ERROR_UPLOAD} from '../../constants/strings';
-import {sendSuggestedPeoplePhoto} from '../../services';
+import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings';
+import {
+  getSuggestedPeopleProfile,
+  sendSuggestedPeoplePhoto,
+} from '../../services';
 import {uploadedSuggestedPeoplePhoto} from '../../store/actions';
+import {RootState} from '../../store/rootReducer';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
-const SuggestedPeopleUploadPictureScreen: React.FC = () => {
+const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
+  const {goTo} = route.params;
   const [image, setImage] = useState<string | undefined>(undefined);
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
+  const navigation = useNavigation();
+  const {userId: loggedInUserId} = useSelector(
+    (state: RootState) => state.user.user,
+  );
+
+  useEffect(() => {
+    const loadData = async () => {
+      const response = await getSuggestedPeopleProfile(loggedInUserId);
+      if (response) {
+        setImage(response.suggested_people_url);
+      }
+    };
+    // if we're in edit SP, attempt to load current sp image
+    if (goTo === 'Profile') {
+      loadData();
+    }
+  }, []);
 
   const openImagePicker = () => {
     ImagePicker.openPicker({
@@ -58,6 +81,14 @@ const SuggestedPeopleUploadPictureScreen: React.FC = () => {
       }
     }
     setLoading(false);
+
+    // Navigated back to Profile if user is editing their Suggested People Picture
+    if (goTo === 'Profile') {
+      navigation.goBack();
+      setTimeout(() => {
+        Alert.alert(SUCCESS_PIC_UPLOAD);
+      }, 500);
+    }
   };
 
   return (