1 files changed, 62 insertions, 53 deletions

diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index f1cd000c..cbd7dd88 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -1,59 +1,92 @@
-import AsyncStorage from '@react-native-community/async-storage';
-import {StackNavigationProp} from '@react-navigation/stack';
+import {RouteProp} from '@react-navigation/core';
 import React, {useEffect, useState} from 'react';
 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 {ADD_USER_BADGES, BACKGROUND_GRADIENT_MAP} from '../../constants';
-import {BADGE_DATA} from '../../constants/badges';
+import {useDispatch, useSelector} from 'react-redux';
+import {MainStackParams} from '../../routes';
 import {
-  ERROR_BADGES_EXCEED_LIMIT,
-  ERROR_UPLOAD_BADGES,
-} from '../../constants/strings';
+  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';
 import {suggestedPeopleBadgesFinished} from '../../store/actions';
 import {BackgroundGradientType} from '../../types';
 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
  **/
 
-type BadgeSelectionParamList = {
-  BadgeList: any[];
-};
-
-type BadgeSelectionScreenNavigationProp = StackNavigationProp<
-  BadgeSelectionParamList,
-  '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> = ({route}) => {
+  const {editing} = route.params;
+  const {userId: loggedInUserId} = useSelector(
+    (state: RootState) => state.user.user,
+  );
+  const [selectedBadges, setSelectedBadges] = useState<string[]>([]);
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
+
+  // Loading badges data and extracting into a string []
+  useEffect(() => {
+    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);
+      }
+    };
+    if (editing) {
+      loadData();
+    }
+  }, []);
+
   navigation.setOptions({
     headerRight: () => (
       <TouchableOpacity
         style={styles.rightButtonContainer}
-        onPress={() => {
-          if (canSubmit) {
-            uploadUserSelection();
+        onPress={async () => {
+          if (editing) {
+            updateBadgesService(selectedBadges);
+            navigation.navigate('UpdateSPPicture', {
+              editing: true,
+            });
           } else {
-            dispatch(suggestedPeopleBadgesFinished());
+            if (selectedBadges.length !== 0) {
+              const success = await addBadgesService(selectedBadges);
+              if (success) {
+                dispatch(suggestedPeopleBadgesFinished());
+              }
+            } else {
+              dispatch(suggestedPeopleBadgesFinished());
+            }
           }
         }}>
-        <Text style={styles.rightButton}>{canSubmit ? 'Done' : 'Skip'}</Text>
+        <Text style={styles.rightButton}>
+          {selectedBadges.length !== 0 || editing ? 'Done' : 'Skip'}
+        </Text>
       </TouchableOpacity>
     ),
   });
 
-  const [selectedBadges, setSelectedBadges] = useState<string[]>([]);
   const selectKey = (key: string) => {
     if (selectedBadges.includes(key)) {
       const selectedBadgesArray = [...selectedBadges];
@@ -63,36 +96,12 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
       }
       setSelectedBadges(selectedBadgesArray);
     } else {
-      const selectedBadgesArray = [...selectedBadges, key];
-      setSelectedBadges(selectedBadgesArray);
-    }
-  };
-  const dispatch = useDispatch();
-  useEffect(() => {
-    setCanSubmit(selectedBadges.length !== 0);
-  }, [selectedBadges]);
-
-  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) {
+      if (selectedBadges.length < 5) {
+        const selectedBadgesArray = [...selectedBadges, key];
+        setSelectedBadges(selectedBadgesArray);
+      } else {
         Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
-        return;
       }
-      dispatch(suggestedPeopleBadgesFinished());
-    } catch (error) {
-      console.log(error);
-      Alert.alert(ERROR_UPLOAD_BADGES);
     }
   };