Badge view changes

4 files changed, 136 insertions, 88 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),
diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx
index 4790743b..18cd1400 100644
--- a/src/components/profile/FriendsCount.tsx
+++ b/src/components/profile/FriendsCount.tsx
@@ -62,6 +62,7 @@ const styles = StyleSheet.create({
     fontSize: normalize(14),
   },
   label: {
+    marginTop: 10,
     fontWeight: '500',
     fontSize: normalize(14),
   },
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index a17d9f6f..061bbd0d 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -40,47 +40,6 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [showBadgeView, setBadgeViewVisible] = useState(false);
   const [firstName, lastName] = [...name.split(' ')];
-  const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
-  const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
-    [],
-  );
-
-  const fetchBadges = async () => {
-    const uid = userXId ? userXId : userId;
-    if (uid) {
-      const response = await getSuggestedPeopleProfile(uid);
-      if (response) {
-        const data = response.badges;
-        let extractedBadgeNames: UniversityBadge[] = [];
-        data.forEach((badge) => {
-          extractedBadgeNames.push(badge);
-        });
-        setSelectedBadges(extractedBadgeNames);
-      }
-    }
-  };
-
-  useEffect(() => {
-    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);
-      });
-    });
-    setSelectedBadgesWithImage(badgesWithImage);
-  }, [selectedBadges]);
 
   return (
     <View style={styles.container}>
@@ -111,13 +70,14 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
           <View style={styles.friendsAndUniversity}>
             <FriendsCount screenType={screenType} userXId={userXId} />
             <TouchableOpacity onPress={() => setBadgeViewVisible(true)}>
-              <UniversityIcon {...{university, university_class}} />
+              <UniversityIcon
+                {...{university, university_class, needsShadow: true}}
+              />
             </TouchableOpacity>
             {showBadgeView && (
               <BadgeDetailView
                 isEditable={userXName === username}
                 name={name}
-                selectedBadges={selectedBadgesWithImage}
                 setBadgeViewVisible={setBadgeViewVisible}
               />
             )}
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 4cb1abe6..f1451f83 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -8,6 +8,7 @@ export interface UniversityIconProps extends ViewProps {
   university: UniversityType;
   university_class?: number;
   imageStyle?: StyleProp<ImageStyle>;
+  needsShadow?: boolean;
 }
 
 /**
@@ -18,13 +19,16 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
   university,
   university_class,
   imageStyle,
+  needsShadow = false,
 }) => {
   return (
     <View style={[styles.container, style]}>
-      <Image
-        source={getUniversityBadge(university, 'Crest')}
-        style={[styles.icon, imageStyle]}
-      />
+      <View style={needsShadow && styles.shadowStyle}>
+        <Image
+          source={getUniversityBadge(university, 'Crest')}
+          style={[styles.icon, imageStyle]}
+        />
+      </View>
       {university_class && (
         <Text style={styles.univClass}>
           {getUniversityClass(university_class)}
@@ -50,6 +54,17 @@ const styles = StyleSheet.create({
     width: normalize(17),
     height: normalize(19),
   },
+  shadowStyle: {
+    padding: 5,
+    borderRadius: 30,
+    shadowOffset: {
+      width: 1,
+      height: 1,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 3,
+    backgroundColor: 'white',
+  },
 });
 
 export default UniversityIcon;