Merge pull request #455 from IvanIFChen/tma878-profile-badges

[TMA-878] Profile Badges

1 files changed, 38 insertions, 33 deletions

diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx
index 6504300c..19f1e74d 100644
--- a/src/components/common/BadgeDetailView.tsx
+++ b/src/components/common/BadgeDetailView.tsx
@@ -5,11 +5,15 @@ import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 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 {BADGE_GRADIENT_FIRST, BADGE_LIMIT} from '../../constants';
+import {removeUserBadge} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
-import {ScreenType} from '../../types';
-import {getUniversityBadge, normalize, removeUserBadge} from '../../utils';
+import {ScreenType, UniversityBadgeDisplayType} from '../../types';
+import {
+  badgesToDisplayBadges,
+  getUniversityBadge,
+  normalize,
+} from '../../utils';
 
 interface BadgeDetailModalProps {
   userXId: string | undefined;
@@ -34,35 +38,24 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
     userXId ? state.userX[screenType][userXId] : state.user,
   );
   const navigation = useNavigation();
-  const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
-    [],
-  );
+  const [displayBadges, setDisplayBadges] = useState<
+    UniversityBadgeDisplayType[]
+  >([]);
+  const atLimit = badges.length >= BADGE_LIMIT;
 
   useEffect(() => {
-    let badgesWithImage = [];
-    badges.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);
-    }, 250);
+    setDisplayBadges(badgesToDisplayBadges(badges, university));
   }, [badges]);
 
   const removeBadgeCell = async (badgeName: string) => {
-    await removeUserBadge(badges, badgeName, user.userId, dispatch);
+    dispatch(removeUserBadge(badgeName, user.userId));
   };
 
-  const badgeEditCell = ({item: {id, name, badgeImage}}) => {
+  const badgeEditCell = ({
+    item: {id, name, img},
+  }: {
+    item: UniversityBadgeDisplayType;
+  }) => {
     return (
       <TouchableOpacity
         style={styles.badgeCellContainerStyles}
@@ -71,7 +64,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
           navigation.navigate('MutualBadgeHolders', {
             badge_id: id,
             badge_title: name,
-            badge_img: badgeImage,
+            badge_img: img,
           });
         }}>
         <View
@@ -88,7 +81,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
             <Image
               resizeMode="cover"
               style={styles.badgeImageStyles}
-              source={badgeImage}
+              source={img}
             />
           </LinearGradient>
           {isEditable && (
@@ -121,10 +114,20 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
   };
 
   const modalHeader = () => {
-    const heading = isEditable ? 'Edit your badges!' : userFullName;
-    const subheading = isEditable
-      ? 'Add or delete your badges'
-      : 'View badges to discover groups!';
+    let heading = '';
+    let subheading = '';
+    if (isEditable) {
+      if (atLimit) {
+        heading = 'You have reached your badge limit';
+        subheading = 'Remove a badge if you wish to add more';
+      } else {
+        heading = 'Edit your badges!';
+        subheading = 'Add or delete your badges';
+      }
+    } else {
+      heading = userFullName!;
+      subheading = 'View badges to discover groups!';
+    }
     return (
       <View>
         <Text style={styles.modalHeadingStyles}>{heading}</Text>
@@ -155,7 +158,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
             <FlatList
               contentContainerStyle={styles.modalListStyles}
               scrollEnabled={false}
-              data={selectedBadgesWithImage}
+              data={displayBadges}
               numColumns={3}
               renderItem={badgeEditCell}
               keyExtractor={(item) => item.id.toString()}
@@ -228,6 +231,8 @@ const styles = StyleSheet.create({
     fontSize: normalize(17),
     lineHeight: normalize(20.29),
     textAlign: 'center',
+    marginVertical: normalize(10),
+    marginTop: normalize(20),
   },
   modalSubheadingStyles: {
     fontWeight: '600',