From 016b0464be83227a7d38d44d01c2878378ba5e50 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 11 Mar 2021 08:18:45 -0800
Subject: Added service and changed border color

---
 src/screens/badge/BadgeSelection.tsx | 86 +++++++++++++++++++++++++++++-------
 1 file changed, 71 insertions(+), 15 deletions(-)

(limited to 'src/screens/badge/BadgeSelection.tsx')

diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index f1cd000c..7088821a 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -1,4 +1,5 @@
 import AsyncStorage from '@react-native-community/async-storage';
+import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useState} from 'react';
 import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
@@ -6,14 +7,19 @@ import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import {useDispatch} from 'react-redux';
-import {ADD_USER_BADGES, BACKGROUND_GRADIENT_MAP} from '../../constants';
+import {MainStackParams} from 'src/routes';
+import {
+  ADD_USER_BADGES,
+  BACKGROUND_GRADIENT_MAP,
+  UPDATE_USER_BADGES,
+} from '../../constants';
 import {BADGE_DATA} from '../../constants/badges';
 import {
   ERROR_BADGES_EXCEED_LIMIT,
   ERROR_UPLOAD_BADGES,
 } from '../../constants/strings';
 import {suggestedPeopleBadgesFinished} from '../../store/actions';
-import {BackgroundGradientType} from '../../types';
+import {BackgroundGradientType, UniversityBadge} from '../../types';
 import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
 import BadgeList from './BadgeList';
 import BadgeScreenHeader from './BadgeScreenHeader';
@@ -31,29 +37,54 @@ type BadgeSelectionScreenNavigationProp = StackNavigationProp<
   'BadgeList'
 >;
 
+type BadgeSelectionRouteProp = RouteProp<MainStackParams, 'BadgeSelection'>;
+
 type BadgeSelectionProps = {
   navigation: BadgeSelectionScreenNavigationProp;
+  route?: BadgeSelectionRouteProp;
 };
 
-const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
-  const [canSubmit, setCanSubmit] = useState(false);
+const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation, route}) => {
+  const dispatch = useDispatch();
   navigation.setOptions({
     headerRight: () => (
       <TouchableOpacity
         style={styles.rightButtonContainer}
-        onPress={() => {
-          if (canSubmit) {
-            uploadUserSelection();
+        onPress={async () => {
+          if (route?.params.editing) {
+            updateBadgesService();
+            navigation.goBack();
           } else {
-            dispatch(suggestedPeopleBadgesFinished());
+            if (selectedBadges.length !== 0) {
+              uploadUserSelection();
+            } else {
+              dispatch(suggestedPeopleBadgesFinished());
+            }
           }
         }}>
-        <Text style={styles.rightButton}>{canSubmit ? 'Done' : 'Skip'}</Text>
+        <Text style={styles.rightButton}>
+          {selectedBadges.length !== 0 ? 'Done' : 'Skip'}
+        </Text>
       </TouchableOpacity>
     ),
   });
 
   const [selectedBadges, setSelectedBadges] = useState<string[]>([]);
+
+  // Get list of badges from the backend and display here
+  useEffect(() => {
+    const extractBadgeNames = (badges: UniversityBadge[]) => {
+      let extractedBadgeNames: string[] = [];
+      badges.forEach((badge) => {
+        extractedBadgeNames.push(badge.name);
+      });
+      setSelectedBadges(extractedBadgeNames);
+    };
+    if (route && route.params.selectedBadges) {
+      extractBadgeNames(route.params.selectedBadges);
+    }
+  }, []);
+
   const selectKey = (key: string) => {
     if (selectedBadges.includes(key)) {
       const selectedBadgesArray = [...selectedBadges];
@@ -63,14 +94,14 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
       }
       setSelectedBadges(selectedBadgesArray);
     } else {
-      const selectedBadgesArray = [...selectedBadges, key];
-      setSelectedBadges(selectedBadgesArray);
+      if (selectedBadges.length < 5) {
+        const selectedBadgesArray = [...selectedBadges, key];
+        setSelectedBadges(selectedBadgesArray);
+      } else {
+        Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
+      }
     }
   };
-  const dispatch = useDispatch();
-  useEffect(() => {
-    setCanSubmit(selectedBadges.length !== 0);
-  }, [selectedBadges]);
 
   const uploadUserSelection = async () => {
     try {
@@ -96,6 +127,31 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
     }
   };
 
+  const updateBadgesService = async () => {
+    try {
+      const token = await AsyncStorage.getItem('token');
+      const form = new FormData();
+      console.log('selectedBadges: ', selectedBadges);
+      form.append('badges', JSON.stringify(selectedBadges));
+      const response = await fetch(UPDATE_USER_BADGES, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: 'Token ' + token,
+        },
+        body: form,
+      });
+      if (response.status === 400) {
+        Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
+        return;
+      }
+      console.log('response: ', response);
+    } catch (error) {
+      console.log(error);
+      Alert.alert(ERROR_UPLOAD_BADGES);
+    }
+  };
+
   return (
     <LinearGradient
       colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Dark]}
-- 
cgit v1.2.3-70-g09d2


From c74285c0f53efc1c4d0794d2f7f563b45e1eb700 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 11 Mar 2021 09:18:16 -0800
Subject: refactoring

---
 src/constants/api.ts                   |  4 +-
 src/screens/badge/BadgeSelection.tsx   | 71 +++++-----------------------------
 src/screens/suggestedPeople/SPBody.tsx |  2 +-
 src/services/SuggestedPeopleService.ts | 57 ++++++++++++++++++++++++++-
 4 files changed, 68 insertions(+), 66 deletions(-)

(limited to 'src/screens/badge/BadgeSelection.tsx')

diff --git a/src/constants/api.ts b/src/constants/api.ts
index dd3d6e15..34ef9a1c 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -38,8 +38,8 @@ export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/';
 export const SP_USERS_ENDPOINT: string = API_URL + 'suggested_people/';
 export const SP_UPDATE_PICTURE_ENDPOINT: string = SP_USERS_ENDPOINT + 'update_picture/';
 export const SP_MUTUAL_BADGE_HOLDERS_ENDPOINT: string = SP_USERS_ENDPOINT + 'get_mutual_badge_holders/';
-export const ADD_USER_BADGES: string = SP_USERS_ENDPOINT + 'add_badges/';
-export const UPDATE_USER_BADGES: string = SP_USERS_ENDPOINT + 'update_badges/';
+export const ADD_BADGES_ENDPOINT: string = SP_USERS_ENDPOINT + 'add_badges/';
+export const UPDATE_BADGES_ENDPOINT: string = SP_USERS_ENDPOINT + 'update_badges/';
 
 // Register as FCM device
 export const FCM_ENDPOINT: string = API_URL + 'fcm/';
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index 7088821a..ed3f199d 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -1,4 +1,3 @@
-import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useState} from 'react';
@@ -7,17 +6,11 @@ import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import {useDispatch} from 'react-redux';
-import {MainStackParams} from 'src/routes';
-import {
-  ADD_USER_BADGES,
-  BACKGROUND_GRADIENT_MAP,
-  UPDATE_USER_BADGES,
-} from '../../constants';
+import {MainStackParams} from '../../routes';
+import {addBadgesService, updateBadgesService} from '../../services';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 import {BADGE_DATA} from '../../constants/badges';
-import {
-  ERROR_BADGES_EXCEED_LIMIT,
-  ERROR_UPLOAD_BADGES,
-} from '../../constants/strings';
+import {ERROR_BADGES_EXCEED_LIMIT} from '../../constants/strings';
 import {suggestedPeopleBadgesFinished} from '../../store/actions';
 import {BackgroundGradientType, UniversityBadge} from '../../types';
 import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
@@ -52,11 +45,14 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation, route}) => {
         style={styles.rightButtonContainer}
         onPress={async () => {
           if (route?.params.editing) {
-            updateBadgesService();
+            updateBadgesService(selectedBadges);
             navigation.goBack();
           } else {
             if (selectedBadges.length !== 0) {
-              uploadUserSelection();
+              const success = await addBadgesService(selectedBadges);
+              if (success) {
+                dispatch(suggestedPeopleBadgesFinished());
+              }
             } else {
               dispatch(suggestedPeopleBadgesFinished());
             }
@@ -103,55 +99,6 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation, route}) => {
     }
   };
 
-  const uploadUserSelection = async () => {
-    try {
-      const token = await AsyncStorage.getItem('token');
-      const form = new FormData();
-      form.append('badges', JSON.stringify(selectedBadges));
-      const response = await fetch(ADD_USER_BADGES, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          Authorization: 'Token ' + token,
-        },
-        body: form,
-      });
-      if (response.status === 400) {
-        Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
-        return;
-      }
-      dispatch(suggestedPeopleBadgesFinished());
-    } catch (error) {
-      console.log(error);
-      Alert.alert(ERROR_UPLOAD_BADGES);
-    }
-  };
-
-  const updateBadgesService = async () => {
-    try {
-      const token = await AsyncStorage.getItem('token');
-      const form = new FormData();
-      console.log('selectedBadges: ', selectedBadges);
-      form.append('badges', JSON.stringify(selectedBadges));
-      const response = await fetch(UPDATE_USER_BADGES, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          Authorization: 'Token ' + token,
-        },
-        body: form,
-      });
-      if (response.status === 400) {
-        Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
-        return;
-      }
-      console.log('response: ', response);
-    } catch (error) {
-      console.log(error);
-      Alert.alert(ERROR_UPLOAD_BADGES);
-    }
-  };
-
   return (
     <LinearGradient
       colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Dark]}
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 6572dc55..bba137c0 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -50,7 +50,7 @@ const SPBody: React.FC<SPBodyProps> = ({
   let array = [];
   useEffect(() => {
     const findBadgeIcons = (badge: UniversityBadge) => {
-      DATA.forEach((item) => {
+      DATA?.forEach((item) => {
         if (item.title === badge.category) {
           item.data.forEach((object) => {
             if (object.badgeName === badge.name) {
diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts
index d0032458..7b0131d8 100644
--- a/src/services/SuggestedPeopleService.ts
+++ b/src/services/SuggestedPeopleService.ts
@@ -1,11 +1,18 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {
+  ERROR_BADGES_EXCEED_LIMIT,
+  ERROR_UPLOAD_BADGES,
+} from '../constants/strings';
+import {
+  ADD_BADGES_ENDPOINT,
   EDIT_PROFILE_ENDPOINT,
   SP_MUTUAL_BADGE_HOLDERS_ENDPOINT,
   SP_UPDATE_PICTURE_ENDPOINT,
   SP_USERS_ENDPOINT,
-} from '../constants';
+  UPDATE_BADGES_ENDPOINT,
+} from '../constants/api';
 import {ProfilePreviewType, SuggestedPeopleDataType} from '../types';
+import { Alert } from 'react-native';
 
 export const sendSuggestedPeopleLinked = async (
   userId: string,
@@ -119,3 +126,51 @@ export const getMutualBadgeHolders = async () => {
     return undefined;
   }
 };
+
+export const addBadgesService = async (selectedBadges: string[]) => {
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const form = new FormData();
+    form.append('badges', JSON.stringify(selectedBadges));
+    const response = await fetch(ADD_BADGES_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        Authorization: 'Token ' + token,
+      },
+      body: form,
+    });
+    if (response.status === 400) {
+      Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
+      return false;
+    }
+    return true;
+  } catch (error) {
+    console.log(error);
+    Alert.alert(ERROR_UPLOAD_BADGES);
+    return false;
+  }
+};
+
+export const updateBadgesService = async (selectedBadges: string[]) => {
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const form = new FormData();
+    form.append('badges', JSON.stringify(selectedBadges));
+    const response = await fetch(UPDATE_BADGES_ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        Authorization: 'Token ' + token,
+      },
+      body: form,
+    });
+    if (response.status === 400) {
+      Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
+      return;
+    }
+  } catch (error) {
+    console.log(error);
+    Alert.alert(ERROR_UPLOAD_BADGES);
+  }
+};
-- 
cgit v1.2.3-70-g09d2


From 803b7a7bcb173d6a263c9d43fec41e5cddfe98f4 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 11 Mar 2021 13:36:34 -0800
Subject: done; except: update state on previous screen;

---
 src/assets/icons/front-arrow.svg                   |  1 +
 src/constants/strings.ts                           |  1 +
 src/screens/badge/BadgeSelection.tsx               |  4 ++-
 .../SuggestedPeopleUploadPictureScreen.tsx         | 32 ++++++++++++----------
 src/services/SuggestedPeopleService.ts             |  5 ++++
 5 files changed, 28 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/icons/front-arrow.svg

(limited to 'src/screens/badge/BadgeSelection.tsx')

diff --git a/src/assets/icons/front-arrow.svg b/src/assets/icons/front-arrow.svg
new file mode 100644
index 00000000..7beeb83e
--- /dev/null
+++ b/src/assets/icons/front-arrow.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="205.65 669.79 514.35 356.69 205.65 50.2"/></svg>
\ No newline at end of file
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 93da6e59..3c2100f4 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -57,6 +57,7 @@ export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its m
 export const SUCCESS_INVITATION_CODE = 'Perfect! You entered a valid invitation code, you are now able to login and explore 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!'
 export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
 export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code';
 export const UP_TO_DATE = 'Up-to-Date!';
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index ed3f199d..ba2e6af4 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -59,7 +59,9 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation, route}) => {
           }
         }}>
         <Text style={styles.rightButton}>
-          {selectedBadges.length !== 0 ? 'Done' : 'Skip'}
+          {selectedBadges.length !== 0 || route?.params.editing
+            ? 'Done'
+            : 'Skip'}
         </Text>
       </TouchableOpacity>
     ),
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index eb8494f4..c5a4ce61 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -25,11 +25,12 @@ import {
 import {uploadedSuggestedPeoplePhoto} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import BackArrow from '../../assets/icons/back-arrow.svg';
+import FrontArrow from '../../assets/icons/front-arrow.svg';
 
 const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
   const {editing} = route.params;
   const [image, setImage] = useState<string | undefined>(undefined);
+  const [oldImage, setOldImage] = useState<string | undefined>(undefined);
   const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
   const [loading, setLoading] = useState(false);
   const dispatch = useDispatch();
@@ -44,6 +45,8 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
       if (response) {
         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
@@ -76,8 +79,8 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
   };
 
   const uploadImage = async () => {
-    setLoading(true);
-    if (image) {
+    if (image && oldImage !== image) {
+      setLoading(true);
       const success = await sendSuggestedPeoplePhoto(image);
       if (success) {
         dispatch(uploadedSuggestedPeoplePhoto(image));
@@ -87,16 +90,15 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
       } else {
         Alert.alert(ERROR_UPLOAD);
       }
+      setLoading(false);
+      // Navigated back to Profile if user is editing their Suggested People Picture
+      if (editing) {
+        setTimeout(() => {
+          Alert.alert(SUCCESS_PIC_UPLOAD);
+        }, 500);
+      }
     }
-    setLoading(false);
-
-    // Navigated back to Profile if user is editing their Suggested People Picture
-    if (editing) {
-      navigation.goBack();
-      setTimeout(() => {
-        Alert.alert(SUCCESS_PIC_UPLOAD);
-      }, 500);
-    }
+    navigation.goBack();
   };
 
   return (
@@ -152,9 +154,11 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
             </View>
             <TouchableOpacity
               onPress={() => {
-                navigation.push('BadgeSelection', {selectedBadges});
+                navigation.push('BadgeSelection', {
+                  selectedBadges,
+                });
               }}>
-              <BackArrow style={styles.rightArrow} />
+              <FrontArrow style={styles.rightArrow} />
             </TouchableOpacity>
           </View>
         )}
diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts
index 7b0131d8..a65b91ef 100644
--- a/src/services/SuggestedPeopleService.ts
+++ b/src/services/SuggestedPeopleService.ts
@@ -2,6 +2,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import {
   ERROR_BADGES_EXCEED_LIMIT,
   ERROR_UPLOAD_BADGES,
+  SUCCESS_BADGES_UPDATE,
 } from '../constants/strings';
 import {
   ADD_BADGES_ENDPOINT,
@@ -169,6 +170,10 @@ export const updateBadgesService = async (selectedBadges: string[]) => {
       Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
       return;
     }
+    if (response.status === 200) {
+      Alert.alert(SUCCESS_BADGES_UPDATE);
+      return;
+    }
   } catch (error) {
     console.log(error);
     Alert.alert(ERROR_UPLOAD_BADGES);
-- 
cgit v1.2.3-70-g09d2


From f399478fb2fe460ead185b0da7769faed8a8c515 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 12 Mar 2021 08:42:46 -0800
Subject: done

---
 src/components/profile/ProfileMoreInfoDrawer.tsx   |  6 ++-
 src/routes/main/MainStackNavigator.tsx             |  3 +-
 src/screens/badge/BadgeSelection.tsx               | 47 ++++++++--------------
 .../SuggestedPeopleUploadPictureScreen.tsx         | 43 +++++++++++++++++---
 4 files changed, 61 insertions(+), 38 deletions(-)

(limited to 'src/screens/badge/BadgeSelection.tsx')

diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 90f5da48..d8f91abe 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -42,7 +42,11 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
     if (suggested_people_linked === 0) {
       Alert.alert(ERROR_ATTEMPT_EDIT_SP);
     } else {
-      navigation.push('UpdateSPPicture');
+      // Sending undefined for updatedSelectedBadges to mark that there was no update yet
+      navigation.push('UpdateSPPicture', {
+        editing: true,
+        updatedSelectedBadges: undefined,
+      });
       setIsOpen(false);
     }
   };
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 22819824..6992f83f 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -77,10 +77,11 @@ export type MainStackParams = {
   };
   UpdateSPPicture: {
     editing: boolean;
+    updatedSelectedBadges: string[] | undefined;
   };
   BadgeSelection: {
     editing: boolean;
-    selectedBadges: UniversityBadge[];
+    prevSelectedBadges: string[];
   };
   MutualBadgeHolders: {
     badge_id: string;
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index ba2e6af4..a67206c4 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -1,5 +1,4 @@
 import {RouteProp} from '@react-navigation/core';
-import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useState} from 'react';
 import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
@@ -12,33 +11,32 @@ import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 import {BADGE_DATA} from '../../constants/badges';
 import {ERROR_BADGES_EXCEED_LIMIT} from '../../constants/strings';
 import {suggestedPeopleBadgesFinished} from '../../store/actions';
-import {BackgroundGradientType, UniversityBadge} from '../../types';
+import {BackgroundGradientType} from '../../types';
 import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
 import BadgeList from './BadgeList';
 import BadgeScreenHeader from './BadgeScreenHeader';
+import {useNavigation} from '@react-navigation/native';
 
 /**
  * Home Screen for displaying Tagg Badge Selections
  **/
 
-type BadgeSelectionParamList = {
-  BadgeList: any[];
-};
-
-type BadgeSelectionScreenNavigationProp = StackNavigationProp<
-  BadgeSelectionParamList,
-  'BadgeList'
->;
-
 type BadgeSelectionRouteProp = RouteProp<MainStackParams, 'BadgeSelection'>;
 
 type BadgeSelectionProps = {
-  navigation: BadgeSelectionScreenNavigationProp;
-  route?: BadgeSelectionRouteProp;
+  route: BadgeSelectionRouteProp;
 };
 
-const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation, route}) => {
+const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
+  const prevSelectedBadges = route.params.prevSelectedBadges;
+  const [selectedBadges, setSelectedBadges] = useState<string[]>([]);
   const dispatch = useDispatch();
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    setSelectedBadges(prevSelectedBadges);
+  }, [prevSelectedBadges]);
+
   navigation.setOptions({
     headerRight: () => (
       <TouchableOpacity
@@ -46,7 +44,10 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation, route}) => {
         onPress={async () => {
           if (route?.params.editing) {
             updateBadgesService(selectedBadges);
-            navigation.goBack();
+            navigation.navigate('UpdateSPPicture', {
+              editing: true,
+              updatedSelectedBadges: selectedBadges,
+            });
           } else {
             if (selectedBadges.length !== 0) {
               const success = await addBadgesService(selectedBadges);
@@ -67,22 +68,6 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation, route}) => {
     ),
   });
 
-  const [selectedBadges, setSelectedBadges] = useState<string[]>([]);
-
-  // Get list of badges from the backend and display here
-  useEffect(() => {
-    const extractBadgeNames = (badges: UniversityBadge[]) => {
-      let extractedBadgeNames: string[] = [];
-      badges.forEach((badge) => {
-        extractedBadgeNames.push(badge.name);
-      });
-      setSelectedBadges(extractedBadgeNames);
-    };
-    if (route && route.params.selectedBadges) {
-      extractBadgeNames(route.params.selectedBadges);
-    }
-  }, []);
-
   const selectKey = (key: string) => {
     if (selectedBadges.includes(key)) {
       const selectedBadgesArray = [...selectedBadges];
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} />
-- 
cgit v1.2.3-70-g09d2


From 2c97108964e5a8fc89f3a9839ea13103e86b340b Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 12 Mar 2021 10:32:31 -0800
Subject: making call on badge selection to get badges

---
 src/routes/main/MainStackNavigator.tsx             |  1 -
 src/screens/badge/BadgeSelection.tsx               | 28 +++++++++++++++----
 .../SuggestedPeopleUploadPictureScreen.tsx         | 31 ++--------------------
 3 files changed, 25 insertions(+), 35 deletions(-)

(limited to 'src/screens/badge/BadgeSelection.tsx')

diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 6992f83f..fea375f6 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -81,7 +81,6 @@ export type MainStackParams = {
   };
   BadgeSelection: {
     editing: boolean;
-    prevSelectedBadges: string[];
   };
   MutualBadgeHolders: {
     badge_id: string;
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index a67206c4..755bb581 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -4,9 +4,13 @@ import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
-import {useDispatch} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import {MainStackParams} from '../../routes';
-import {addBadgesService, updateBadgesService} from '../../services';
+import {
+  addBadgesService,
+  getSuggestedPeopleProfile,
+  updateBadgesService,
+} from '../../services';
 import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 import {BADGE_DATA} from '../../constants/badges';
 import {ERROR_BADGES_EXCEED_LIMIT} from '../../constants/strings';
@@ -16,6 +20,7 @@ import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
 import BadgeList from './BadgeList';
 import BadgeScreenHeader from './BadgeScreenHeader';
 import {useNavigation} from '@react-navigation/native';
+import {RootState} from '../../store/rootReducer';
 
 /**
  * Home Screen for displaying Tagg Badge Selections
@@ -28,14 +33,27 @@ type BadgeSelectionProps = {
 };
 
 const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
-  const prevSelectedBadges = route.params.prevSelectedBadges;
+  const {userId: loggedInUserId} = useSelector(
+    (state: RootState) => state.user.user,
+  );
   const [selectedBadges, setSelectedBadges] = useState<string[]>([]);
   const dispatch = useDispatch();
   const navigation = useNavigation();
 
   useEffect(() => {
-    setSelectedBadges(prevSelectedBadges);
-  }, [prevSelectedBadges]);
+    const loadData = async () => {
+      const response = await getSuggestedPeopleProfile(loggedInUserId);
+      if (response) {
+        const data = response.badges;
+        let extractedBadgeNames: string[] = [];
+        data.forEach((badge) => {
+          extractedBadgeNames.push(badge.name);
+        });
+        setSelectedBadges(extractedBadgeNames);
+      }
+    };
+    loadData();
+  }, []);
 
   navigation.setOptions({
     headerRight: () => (
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index edab2865..5a9e23da 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -13,7 +13,6 @@ 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, useSelector} from 'react-redux';
-import {UniversityBadge} from '../../types';
 import {TaggSquareButton, UniversityIcon} from '../../components';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {SP_HEIGHT, SP_WIDTH} from '../../constants';
@@ -40,13 +39,9 @@ type SuggestedPeopleUploadPictureScreenProps = {
 const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureScreenProps> = ({
   route,
 }) => {
-  const {editing, updatedSelectedBadges} = route.params;
+  const {editing} = 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();
@@ -59,7 +54,6 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
       const response = await getSuggestedPeopleProfile(loggedInUserId);
       if (response) {
         setImage(response.suggested_people_url);
-        setSelectedBadges(response.badges);
         setOldImage(response.suggested_people_url);
       }
     };
@@ -69,25 +63,6 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
     }
   }, []);
 
-  // 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: [
@@ -187,9 +162,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
             </View>
             <TouchableOpacity
               onPress={() => {
-                navigation.push('BadgeSelection', {
-                  prevSelectedBadges: extractedSelectedBadges,
-                });
+                navigation.push('BadgeSelection');
               }}>
               <FrontArrow style={styles.rightArrow} />
             </TouchableOpacity>
-- 
cgit v1.2.3-70-g09d2


From b34da6e2d3f78a3d846665ded5d5a0c508873c6c Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 12 Mar 2021 11:11:10 -0800
Subject: comments, removed unused code

---
 src/components/profile/ProfileMoreInfoDrawer.tsx                        | 1 -
 src/routes/main/MainStackNavigator.tsx                                  | 1 -
 src/screens/badge/BadgeSelection.tsx                                    | 2 +-
 .../suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx    | 1 +
 4 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'src/screens/badge/BadgeSelection.tsx')

diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index d8f91abe..2fec5cca 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -45,7 +45,6 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
       // Sending undefined for updatedSelectedBadges to mark that there was no update yet
       navigation.push('UpdateSPPicture', {
         editing: true,
-        updatedSelectedBadges: undefined,
       });
       setIsOpen(false);
     }
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index fea375f6..c60c8602 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -77,7 +77,6 @@ export type MainStackParams = {
   };
   UpdateSPPicture: {
     editing: boolean;
-    updatedSelectedBadges: string[] | undefined;
   };
   BadgeSelection: {
     editing: boolean;
diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index 755bb581..e8a060ee 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -40,6 +40,7 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
   const dispatch = useDispatch();
   const navigation = useNavigation();
 
+  // Loading badges data and extracting into a string []
   useEffect(() => {
     const loadData = async () => {
       const response = await getSuggestedPeopleProfile(loggedInUserId);
@@ -64,7 +65,6 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
             updateBadgesService(selectedBadges);
             navigation.navigate('UpdateSPPicture', {
               editing: true,
-              updatedSelectedBadges: selectedBadges,
             });
           } else {
             if (selectedBadges.length !== 0) {
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index 74034287..0c34e90c 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -87,6 +87,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
   };
 
   const uploadImage = async () => {
+    // Uploading image only if initially loaded image is not the same as the image being uploaded
     if (image && oldImage !== image) {
       setLoading(true);
       const success = await sendSuggestedPeoplePhoto(image);
-- 
cgit v1.2.3-70-g09d2


From ab961d9ecabed368e66ab15a24578bb98e696889 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 12 Mar 2021 11:35:39 -0800
Subject: loading badges data only if editing

---
 src/screens/badge/BadgeSelection.tsx                          | 11 ++++++-----
 .../SuggestedPeopleUploadPictureScreen.tsx                    |  4 ++--
 2 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'src/screens/badge/BadgeSelection.tsx')

diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index e8a060ee..cbd7dd88 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -33,6 +33,7 @@ type BadgeSelectionProps = {
 };
 
 const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
+  const {editing} = route.params;
   const {userId: loggedInUserId} = useSelector(
     (state: RootState) => state.user.user,
   );
@@ -53,7 +54,9 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
         setSelectedBadges(extractedBadgeNames);
       }
     };
-    loadData();
+    if (editing) {
+      loadData();
+    }
   }, []);
 
   navigation.setOptions({
@@ -61,7 +64,7 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
       <TouchableOpacity
         style={styles.rightButtonContainer}
         onPress={async () => {
-          if (route?.params.editing) {
+          if (editing) {
             updateBadgesService(selectedBadges);
             navigation.navigate('UpdateSPPicture', {
               editing: true,
@@ -78,9 +81,7 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
           }
         }}>
         <Text style={styles.rightButton}>
-          {selectedBadges.length !== 0 || route?.params.editing
-            ? 'Done'
-            : 'Skip'}
+          {selectedBadges.length !== 0 || editing ? 'Done' : 'Skip'}
         </Text>
       </TouchableOpacity>
     ),
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index 0c34e90c..cb0a6417 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -94,7 +94,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
       if (success) {
         dispatch(uploadedSuggestedPeoplePhoto(image));
         if (!editing) {
-          navigation.push('BadgeSelection');
+          navigation.push('BadgeSelection', {editing: false});
         }
       } else {
         Alert.alert(ERROR_UPLOAD);
@@ -165,7 +165,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
             </View>
             <TouchableOpacity
               onPress={() => {
-                navigation.push('BadgeSelection');
+                navigation.push('BadgeSelection', {editing: false});
               }}>
               <FrontArrow style={styles.rightArrow} />
             </TouchableOpacity>
-- 
cgit v1.2.3-70-g09d2

