removed loading icon, fetching badges from store

1 files changed, 24 insertions, 65 deletions

diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx
index bc4384e8..6504300c 100644
--- a/src/components/common/BadgeDetailView.tsx
+++ b/src/components/common/BadgeDetailView.tsx
@@ -1,24 +1,15 @@
 import {useNavigation} from '@react-navigation/core';
 import React, {useEffect, useState} from 'react';
-import {
-  ActivityIndicator,
-  FlatList,
-  Image,
-  Modal,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import {FlatList, Image, Modal, StyleSheet, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
-import {useSelector} from 'react-redux';
+import {useDispatch, 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 {ScreenType, UniversityBadge} from '../../types';
-import {getUniversityBadge, normalize} from '../../utils';
+import {ScreenType} from '../../types';
+import {getUniversityBadge, normalize, removeUserBadge} from '../../utils';
 
 interface BadgeDetailModalProps {
   userXId: string | undefined;
@@ -35,38 +26,21 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
   isEditable = true,
   setBadgeViewVisible,
 }) => {
-  const {user, profile} = useSelector((state: RootState) =>
+  const dispatch = useDispatch();
+  const {
+    user,
+    profile: {university, badges},
+  } = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
   const navigation = useNavigation();
-  const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
   const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
     [],
   );
 
-  const fetchBadges = async () => {
-    if (user.userId) {
-      const response = await getSuggestedPeopleProfile(user.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) => {
+    badges.forEach((e) => {
       const uniData = BADGE_DATA[e.university];
       const categoryData = uniData.filter((u) => {
         return u.title === e.category;
@@ -81,14 +55,11 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
     });
     setTimeout(() => {
       setSelectedBadgesWithImage(badgesWithImage);
-      setIsLoading(false);
     }, 250);
-  }, [selectedBadges]);
+  }, [badges]);
 
-  const removeBadgeCell = async (badge: string) => {
-    setIsLoading(true);
-    await removeBadgesService([badge], user.userId);
-    fetchBadges();
+  const removeBadgeCell = async (badgeName: string) => {
+    await removeUserBadge(badges, badgeName, user.userId, dispatch);
   };
 
   const badgeEditCell = ({item: {id, name, badgeImage}}) => {
@@ -175,38 +146,27 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
             <View style={styles.modalImageContainerStyles}>
               <Image
                 style={styles.modalImageStyles}
-                source={getUniversityBadge(profile.university, 'Crest')}
+                source={getUniversityBadge(university, 'Crest')}
               />
             </View>
           </View>
           {modalHeader()}
-          {!isLoading && (
-            <View>
-              <FlatList
-                contentContainerStyle={styles.modalListStyles}
-                scrollEnabled={false}
-                data={selectedBadgesWithImage}
-                numColumns={3}
-                renderItem={badgeEditCell}
-                keyExtractor={(item) => item.id.toString()}
-              />
-            </View>
-          )}
-          {isLoading && _loaderView()}
+          <View>
+            <FlatList
+              contentContainerStyle={styles.modalListStyles}
+              scrollEnabled={false}
+              data={selectedBadgesWithImage}
+              numColumns={3}
+              renderItem={badgeEditCell}
+              keyExtractor={(item) => item.id.toString()}
+            />
+          </View>
           {isEditable && addButton()}
         </View>
       </View>
     );
   };
 
-  const _loaderView = () => {
-    return (
-      <View style={styles.loaderStyles}>
-        <ActivityIndicator animating={isLoading} size="large" color="black" />
-      </View>
-    );
-  };
-
   return (
     <Modal
       animationType="fade"
@@ -269,7 +229,6 @@ const styles = StyleSheet.create({
     lineHeight: normalize(20.29),
     textAlign: 'center',
   },
-  loaderStyles: {justifyContent: 'center', marginVertical: 20},
   modalSubheadingStyles: {
     fontWeight: '600',
     fontSize: normalize(11),