Badge view changes

1 files changed, 113 insertions, 41 deletions

diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx
index 1dc50c32..f4271099 100644
--- a/src/components/common/BadgeDetailView.tsx
+++ b/src/components/common/BadgeDetailView.tsx
@@ -1,39 +1,90 @@
 import {useNavigation} from '@react-navigation/core';
-import React, {useState} from 'react';
-import {FlatList, Image, Modal, StyleSheet, Text, View} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  Modal,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
-import {BADGE_GRADIENT_FIRST} from '../../constants';
+import {useSelector} from 'react-redux';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {BADGE_GRADIENT_FIRST} from '../../constants';
+import {BADGE_DATA} from '../../constants/badges';
+import {getSuggestedPeopleProfile, removeBadgesService} from '../../services';
+import {RootState} from '../../store/rootreducer';
 import {UniversityBadge, UniversityType} from '../../types';
 import {getUniversityBadge, normalize} from '../../utils';
-import {removeBadgesService} from '../../services';
-import {useSelector} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
 
 interface BadgeDetailModalProps {
   isEditable: boolean;
   setBadgeViewVisible: Function;
-  selectedBadges: UniversityBadge[];
   name?: string;
-  userId: string;
 }
 
 const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
   name,
   isEditable = true,
   setBadgeViewVisible,
-  selectedBadges,
 }) => {
-  const navigation = useNavigation();
-  const [removableBadges, setRemovableBadges] = useState([]);
-
   const {
     user: {userId = ''},
   } = useSelector((state: RootState) => state.user);
+  const navigation = useNavigation();
+  const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
+    [],
+  );
+
+  const fetchBadges = async () => {
+    if (userId) {
+      const response = await getSuggestedPeopleProfile(userId);
+      if (response) {
+        const data = response.badges;
+        let extractedBadgeNames: UniversityBadge[] = [];
+        data.forEach((badge) => {
+          extractedBadgeNames.push(badge);
+        });
+        setSelectedBadges(extractedBadgeNames);
+      }
+    }
+  };
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetchBadges();
+  }, []);
+
+  useEffect(() => {
+    let badgesWithImage = [];
+    selectedBadges.forEach((e) => {
+      const uniData = BADGE_DATA[e.university];
+      const categoryData = uniData.filter((u) => {
+        return u.title === e.category;
+      });
+      const badgeData = categoryData[0].data.filter((c) => {
+        return c.badgeName === e.name;
+      });
+      badgeData.forEach((c) => {
+        const obj = {...e, badgeImage: c.badgeImage};
+        badgesWithImage.push(obj);
+      });
+    });
+    setTimeout(() => {
+      setSelectedBadgesWithImage(badgesWithImage);
+      setIsLoading(false);
+    }, 500);
+  }, [selectedBadges]);
 
-  const removeBadgeCell = async () => {
-    await removeBadgesService(removableBadges, userId);
+  const removeBadgeCell = async (badge: string) => {
+    setIsLoading(true);
+    await removeBadgesService([badge], userId);
+    fetchBadges();
   };
 
   const badgeEditCell = ({item: {id, name, badgeImage}}) => {
@@ -61,27 +112,20 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
             angle={136.69}>
             <Image
               resizeMode="cover"
-              style={{
-                width: 70,
-                height: 70,
-                alignSelf: 'center',
-              }}
+              style={styles.badgeImageStyles}
               source={badgeImage}
             />
           </LinearGradient>
           {isEditable && (
             <TouchableOpacity
               onPress={() => {
-                selectedBadges = selectedBadges.filter((b) => b.id === id);
-                const obj = {id, name};
-                removableBadges.push(obj);
-                removeBadgeCell();
+                removeBadgeCell(name);
               }}>
               <CloseIcon height={25} width={25} color="gray" />
             </TouchableOpacity>
           )}
         </View>
-        <View style={{marginTop: 10}}>
+        <View style={styles.userNameContainerStyles}>
           <Text style={styles.badgeCellTextStyles}>{name}</Text>
         </View>
       </TouchableOpacity>
@@ -114,17 +158,13 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
     );
   };
 
-  return (
-    <Modal
-      animationType="slide"
-      transparent
-      visible={true}
-      presentationStyle="overFullScreen">
+  const _modalContent = () => {
+    return (
       <View style={styles.viewWrapper}>
         <View style={styles.modalView}>
           <View style={styles.modalUpperContainerStyles}>
             <TouchableOpacity
-              style={{marginTop: 10, marginLeft: 10}}
+              style={styles.crossButtonStyles}
               onPress={() => setBadgeViewVisible(false)}>
               <CloseIcon height={25} width={25} color="gray" />
             </TouchableOpacity>
@@ -136,19 +176,40 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
             </View>
           </View>
           {modalHeader()}
-          <View>
-            <FlatList
-              contentContainerStyle={styles.modalListStyles}
-              scrollEnabled={false}
-              data={selectedBadges}
-              numColumns={3}
-              renderItem={badgeEditCell}
-              keyExtractor={(item) => item.id.toString()}
-            />
-          </View>
+          {!isLoading && (
+            <View>
+              <FlatList
+                contentContainerStyle={styles.modalListStyles}
+                scrollEnabled={false}
+                data={selectedBadgesWithImage}
+                numColumns={3}
+                renderItem={badgeEditCell}
+                keyExtractor={(item) => item.id.toString()}
+              />
+            </View>
+          )}
+          {isLoading && _loaderView()}
           {isEditable && addButton()}
         </View>
       </View>
+    );
+  };
+
+  const _loaderView = () => {
+    return (
+      <View style={styles.loaderStyles}>
+        <ActivityIndicator animating={isLoading} size="large" color="black" />
+      </View>
+    );
+  };
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent
+      visible={true}
+      presentationStyle="overFullScreen">
+      {_modalContent()}
     </Modal>
   );
 };
@@ -163,12 +224,20 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginLeft: 25,
   },
+  badgeImageStyles: {
+    width: '50%',
+    height: '50%',
+    alignSelf: 'center',
+  },
   badgeCellImageNoEditContainerStyles: {
     flexDirection: 'row',
     marginHorizontal: 25,
   },
   badgeCellImageStyles: {
     borderRadius: 50,
+    width: 70,
+    height: 70,
+    justifyContent: 'center',
   },
   badgeCellTextStyles: {
     fontWeight: '600',
@@ -176,6 +245,8 @@ const styles = StyleSheet.create({
     lineHeight: normalize(16),
     textAlign: 'center',
   },
+  userNameContainerStyles: {marginTop: 10},
+  crossButtonStyles: {marginTop: 10, marginLeft: 10},
   addButtonStyles: {
     height: 40,
     borderRadius: 5,
@@ -194,6 +265,7 @@ const styles = StyleSheet.create({
     lineHeight: normalize(20.29),
     textAlign: 'center',
   },
+  loaderStyles: {justifyContent: 'center', marginVertical: 20},
   modalSubheadingStyles: {
     fontWeight: '600',
     fontSize: normalize(11),