Convert local badges to display badges, Cleanup code

3 files changed, 54 insertions, 39 deletions

diff --git a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
index 9f8d2a5a..2c177e69 100644
--- a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
+++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
@@ -1,18 +1,15 @@
 import React, {useEffect, useState} from 'react';
-import {ImageSourcePropType, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated, {Easing} from 'react-native-reanimated';
 import {BadgeIcon, UniversityIcon} from '../..';
-import {UniversityBadge, UniversityType} from '../../../types';
+import {UniversityBadgeDisplayType, UniversityType} from '../../../types';
 import {normalize} from '../../../utils';
 import UniversityIconClicked from '../UniversityIconClicked';
 
 interface BadgesDropdownProps {
   university: UniversityType;
-  localBadges: {
-    badge: UniversityBadge;
-    img: ImageSourcePropType;
-  }[];
+  localBadges: UniversityBadgeDisplayType[];
 }
 
 const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
@@ -92,7 +89,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
         )}
       </TouchableOpacity>
       {localBadges &&
-        localBadges.map(({badge, img}, index) => (
+        localBadges.map((badge, index) => (
           <Animated.View
             key={badge.id}
             style={[
@@ -102,7 +99,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
                 zIndex: -1 * badge.id,
               },
             ]}>
-            <BadgeIcon badge={{...badge, img}} />
+            <BadgeIcon badge={badge} />
           </Animated.View>
         ))}
     </Animated.View>
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index c1064224..10ad63f0 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));
   }, []);
 
   const FriendButton = () => {
@@ -131,10 +118,10 @@ 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}} style={styles.badge} />
+      {displayBadges.map((displayBadge, index) => (
+        <BadgeIcon key={index} badge={displayBadge} style={styles.badge} />
       ))}
-      {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => (
+      {[0, 0, 0, 0, 0].splice(displayBadges.length, 5).map((_, index) => (
         <View key={index} style={styles.badge} />
       ))}
     </View>
@@ -159,7 +146,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>
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 95e77f64..6804558f 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,12 +1,18 @@
 import AsyncStorage from '@react-native-community/async-storage';
+import {HeaderTitle} from '@react-navigation/stack';
 import moment from 'moment';
 import {Linking} from 'react-native';
 import {getAll} from 'react-native-contacts';
-import {BROWSABLE_SOCIAL_URLS, TOGGLE_BUTTON_TYPE} from '../constants';
+import {
+  BADGE_DATA,
+  BROWSABLE_SOCIAL_URLS,
+  TOGGLE_BUTTON_TYPE,
+} from '../constants';
 import {
   ContactType,
   NotificationType,
-  UniversityBadgeType,
+  UniversityBadge,
+  UniversityBadgeDisplayType,
   UniversityType,
 } from './../types/types';
 
@@ -197,3 +203,28 @@ export const validateImageLink = async (url: string | undefined) => {
       return false;
     });
 };
+
+/**
+ * Turns a list badges into display badges (with img) by looking up the img source
+ * from our badge asset lookup constant.
+ * @param badges list of university badges
+ * @returns list of display badges
+ */
+export const badgesToDisplayBadges = (badges: UniversityBadge[]) => {
+  const displayBadges: UniversityBadgeDisplayType[] = [];
+  badges.forEach((badge) => {
+    BADGE_DATA[badge.university].forEach((category) => {
+      if (category.title === badge.category) {
+        category.data.forEach((badgeInfo) => {
+          if (badgeInfo.badgeName === badge.name) {
+            displayBadges.push({
+              ...badge,
+              img: badgeInfo.badgeImage,
+            });
+          }
+        });
+      }
+    });
+  });
+  return displayBadges;
+};