2 files changed, 22 insertions, 32 deletions

diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx
index c02eef0d..ea443fce 100644
--- a/src/screens/profile/CategorySelection.tsx
+++ b/src/screens/profile/CategorySelection.tsx
@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useDispatch, useSelector} from 'react-redux';
-import PlusIcon from '../../assets/icons/plus_icon-01.svg';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
 import {Background, MomentCategory} from '../../components';
 import {MOMENT_CATEGORIES, TAGG_LIGHT_BLUE_2} from '../../constants';
 import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings';
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index eb80da49..fea67950 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -1,19 +1,24 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {Fragment, useEffect, useMemo, useState} from 'react';
-import {ImageSourcePropType, StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
 import {Image} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import RequestedButton from '../../assets/ionicons/requested-button.svg';
 import {UniversityIcon} from '../../components';
 import {BadgeIcon, MutualFriends} from '../../components/suggestedPeople';
-import {BADGE_DATA} from '../../constants/badges';
 import {
   ProfilePreviewType,
   ScreenType,
   SuggestedPeopleDataType,
-  UniversityBadge,
+  UniversityBadgeDisplayType,
 } from '../../types';
-import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  badgesToDisplayBadges,
+  isIPhoneX,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 
 interface SPBodyProps {
   item: SuggestedPeopleDataType;
@@ -39,30 +44,12 @@ const SPBody: React.FC<SPBodyProps> = ({
 }) => {
   const firstItem = itemIndex === 0;
   const screenType = ScreenType.SuggestedPeople;
-  const [localBadges, setLocalBadges] = useState<
-    {
-      badge: UniversityBadge;
-      img: ImageSourcePropType;
-    }[]
+  const [displayBadges, setDisplayBadges] = useState<
+    UniversityBadgeDisplayType[]
   >([]);
   const navigation = useNavigation();
   useEffect(() => {
-    const newBadges: {badge: UniversityBadge; img: any}[] = [];
-    const findBadgeIcons = (badge: UniversityBadge) => {
-      BADGE_DATA[university]?.forEach((item) => {
-        if (item.title === badge.category) {
-          item.data.forEach((object) => {
-            if (object.badgeName === badge.name) {
-              newBadges.push({badge, img: object.badgeImage});
-            }
-          });
-        }
-      });
-      setLocalBadges(newBadges);
-    };
-    badges
-      ? badges.forEach((badge) => findBadgeIcons(badge))
-      : console.log('NO BADGES FOUND');
+    setDisplayBadges(badgesToDisplayBadges(badges, university));
   }, []);
 
   const FriendButton = () => {
@@ -131,12 +118,15 @@ const SPBody: React.FC<SPBodyProps> = ({
   const Badges = () => (
     // Badges aligned left and spaced as if there are 5 items
     <View style={styles.badgeContainer}>
-      {localBadges.map(({badge, img}, index) => (
-        <BadgeIcon key={index} badge={badge} img={img} style={styles.badge} />
-      ))}
-      {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => (
-        <View key={index} style={styles.badge} />
+      {displayBadges.map((displayBadge, index) => (
+        <BadgeIcon key={index} badge={displayBadge} style={styles.badge} />
       ))}
+      {Array(5)
+        .fill(0)
+        .splice(displayBadges.length, 5)
+        .map((_, index) => (
+          <View key={index} style={styles.badge} />
+        ))}
     </View>
   );
 
@@ -159,7 +149,7 @@ const SPBody: React.FC<SPBodyProps> = ({
               {user.id !== loggedInUserId && <FriendButton />}
             </View>
           </View>
-          {localBadges.length !== 0 && <Badges />}
+          {displayBadges.length !== 0 && <Badges />}
           <View style={styles.marginManager}>
             <MutualFriends user={user} friends={mutual_friends} />
           </View>