Added service and changed border color

2 files changed, 107 insertions, 34 deletions

diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx
index adf74026..3141e662 100644
--- a/src/screens/badge/BadgeItem.tsx
+++ b/src/screens/badge/BadgeItem.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native';
 import {SCREEN_WIDTH, normalize} from '../../utils';
 import LinearGradient from 'react-native-linear-gradient';
-import {BADGE_GRADIENT_FIRST, BADGE_GRADIENT_REST} from '../../constants';
+import {
+  BACKGROUND_GRADIENT_MAP,
+  BADGE_GRADIENT_FIRST,
+  BADGE_GRADIENT_REST,
+} from '../../constants';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 
 interface BadgeItemProps {
@@ -21,32 +25,45 @@ const BadgeItem: React.FC<BadgeItemProps> = ({
   onSelection,
 }) => {
   return (
-    <TouchableOpacity onPress={() => onSelection(title)}>
-      <LinearGradient
-        colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
-        useAngle={true}
-        angle={136.69}
-        style={styles.item}>
-        <View
-          style={
-            selected ? styles.selectedDetailContainer : styles.detailContainer
-          }>
-          <Image source={resourcePath} style={styles.imageStyles} />
-          <View style={styles.textContainer}>
-            <Text style={styles.title}>{title}</Text>
+    <LinearGradient
+      colors={
+        selected ? BACKGROUND_GRADIENT_MAP[0] : ['transparent', 'transparent']
+      }
+      useAngle={true}
+      angle={136.69}
+      style={styles.border}>
+      <TouchableOpacity
+        onPress={() => onSelection(title)}
+        style={{alignSelf: 'center', marginTop: 3}}>
+        <LinearGradient
+          colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
+          // BACKGROUND_GRADIENT_MAP
+          useAngle={true}
+          angle={136.69}
+          style={styles.item}>
+          <View style={styles.detailContainer}>
+            <Image source={resourcePath} style={styles.imageStyles} />
+            <View style={styles.textContainer}>
+              <Text style={styles.title}>{title}</Text>
+            </View>
           </View>
-        </View>
-      </LinearGradient>
-    </TouchableOpacity>
+        </LinearGradient>
+      </TouchableOpacity>
+    </LinearGradient>
   );
 };
 
 const styles = StyleSheet.create({
+  border: {
+    width: SCREEN_WIDTH / 3 - 20 + 6,
+    height: 146,
+    marginLeft: 10,
+    marginBottom: 12,
+    borderRadius: 8,
+  },
   item: {
     width: SCREEN_WIDTH / 3 - 20,
     height: 140,
-    marginLeft: 15,
-    marginBottom: 12,
     borderRadius: 8,
   },
   detailContainer: {
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]}