done

1 files changed, 38 insertions, 5 deletions

diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index c5a4ce61..edab2865 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -1,4 +1,4 @@
-import {useNavigation} from '@react-navigation/native';
+import {RouteProp, useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {
   Alert,
@@ -26,12 +26,27 @@ import {uploadedSuggestedPeoplePhoto} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
+import {MainStackParams} from 'src/routes';
 
-const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
-  const {editing} = route.params;
+type SuggestedPeopleUploadPictureScreenRouteProp = RouteProp<
+  MainStackParams,
+  'UpdateSPPicture'
+>;
+
+type SuggestedPeopleUploadPictureScreenProps = {
+  route: SuggestedPeopleUploadPictureScreenRouteProp;
+};
+
+const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureScreenProps> = ({
+  route,
+}) => {
+  const {editing, updatedSelectedBadges} = route.params;
   const [image, setImage] = useState<string | undefined>(undefined);
   const [oldImage, setOldImage] = useState<string | undefined>(undefined);
   const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
+  const [extractedSelectedBadges, setExtractedSelectedBadges] = useState<
+    string[]
+  >([]);
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
   const navigation = useNavigation();
@@ -46,7 +61,6 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
         setImage(response.suggested_people_url);
         setSelectedBadges(response.badges);
         setOldImage(response.suggested_people_url);
-        console.log('Current Image: ', response.suggested_people_url);
       }
     };
     // if we're in edit SP, attempt to load current sp image
@@ -55,6 +69,25 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
     }
   }, []);
 
+  // Get list of badges from the backend and display here
+  useEffect(() => {
+    const extractBadgeNames = () => {
+      let extractedBadgeNames: string[] = updatedSelectedBadges
+        ? updatedSelectedBadges
+        : [];
+      // Receive undefined if you're coming from any screen
+      if (!updatedSelectedBadges) {
+        selectedBadges.forEach((badge) => {
+          if (!extractedBadgeNames.includes(badge.name)) {
+            extractedBadgeNames.push(badge.name);
+          }
+        });
+      }
+      setExtractedSelectedBadges(extractedBadgeNames);
+    };
+    extractBadgeNames();
+  }, [selectedBadges, updatedSelectedBadges]);
+
   const openImagePicker = () => {
     ImagePicker.openPicker({
       smartAlbums: [
@@ -155,7 +188,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
             <TouchableOpacity
               onPress={() => {
                 navigation.push('BadgeSelection', {
-                  selectedBadges,
+                  prevSelectedBadges: extractedSelectedBadges,
                 });
               }}>
               <FrontArrow style={styles.rightArrow} />