4 files changed, 28 insertions, 23 deletions

diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx
index 85f0a0dc..19f1e74d 100644
--- a/src/components/common/BadgeDetailView.tsx
+++ b/src/components/common/BadgeDetailView.tsx
@@ -44,7 +44,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
   const atLimit = badges.length >= BADGE_LIMIT;
 
   useEffect(() => {
-    setDisplayBadges(badgesToDisplayBadges(badges));
+    setDisplayBadges(badgesToDisplayBadges(badges, university));
   }, [badges]);
 
   const removeBadgeCell = async (badgeName: string) => {
diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx
index aef52903..8e68dc46 100644
--- a/src/components/profile/ProfileBadges.tsx
+++ b/src/components/profile/ProfileBadges.tsx
@@ -1,15 +1,15 @@
 import {useNavigation} from '@react-navigation/core';
 import React, {FC, useEffect, useState} from 'react';
-import {Image, StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
 import {BadgeIcon} from '..';
+import PlusIconImage from '../../assets/icons/plus-icon-thin.svg';
 import {BADGE_LIMIT} from '../../constants';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType, UniversityBadgeDisplayType} from '../../types';
 import {badgesToDisplayBadges, normalize} from '../../utils';
 import BadgeDetailView from '../common/BadgeDetailView';
-import PlusIconImage from '../../assets/icons/plus-icon-thin.svg';
 
 interface ProfileBadgesProps {
   userXId: string | undefined;
@@ -18,7 +18,7 @@ interface ProfileBadgesProps {
 
 const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
   const navigation = useNavigation();
-  const {badges, name} = useSelector((state: RootState) =>
+  const {badges, name, university} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId].profile : state.user.profile,
   );
   const [displayBadges, setDisplayBadges] = useState<
@@ -28,7 +28,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
   const isOwnProfile = userXId === undefined;
 
   useEffect(() => {
-    setDisplayBadges(badgesToDisplayBadges(badges));
+    setDisplayBadges(badgesToDisplayBadges(badges, university));
   }, [badges]);
 
   const PlusIcon: FC = () => (
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index c37b4c44..fea67950 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -49,7 +49,7 @@ const SPBody: React.FC<SPBodyProps> = ({
   >([]);
   const navigation = useNavigation();
   useEffect(() => {
-    setDisplayBadges(badgesToDisplayBadges(badges));
+    setDisplayBadges(badgesToDisplayBadges(badges, university));
   }, []);
 
   const FriendButton = () => {
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 7e54eeaf..cfd9244a 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,6 +1,6 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import moment from 'moment';
-import {Linking} from 'react-native';
+import {ImageSourcePropType, Linking} from 'react-native';
 import {getAll} from 'react-native-contacts';
 import {
   BADGE_DATA,
@@ -205,26 +205,31 @@ export const validateImageLink = async (url: string | undefined) => {
 };
 
 /**
- * Turns a list badges into display badges (with img) by looking up the img source
- * from our badge asset lookup constant.
+ * Turns a list of badges into display badges (just a badge with img) by
+ * looking up the img source from our badge asset lookup constant.
+ *
+ * WARNING: Assumes a small list of badges, complexity goes up exponentially.
+ *
  * @param badges list of university badges
+ * @param university university of which all the badges belong
  * @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,
-            });
-          }
-        });
+export const badgesToDisplayBadges = (
+  badges: UniversityBadge[],
+  university: UniversityType,
+) => {
+  const badgeSet: Set<string> = new Set(badges.map((b) => b.category + b.name));
+  const badgeToImgMap: Record<string, ImageSourcePropType> = {};
+  BADGE_DATA[university].forEach((category) => {
+    category.data.forEach((badgeInfo) => {
+      const key = category.title + badgeInfo.badgeName;
+      if (badgeSet.has(key)) {
+        badgeToImgMap[key] = badgeInfo.badgeImage;
       }
     });
   });
-  return displayBadges;
+  return <UniversityBadgeDisplayType[]>badges.map((b) => ({
+    ...b,
+    img: badgeToImgMap[b.category + b.name],
+  }));
 };