Add UniversityBadgeDisplayType

4 files changed, 37 insertions, 14 deletions

diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx
new file mode 100644
index 00000000..838f7987
--- /dev/null
+++ b/src/components/profile/ProfileBadges.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
+import {useSelector} from 'react-redux';
+import {RootState} from '../../store/rootReducer';
+import {ScreenType} from '../../types';
+
+interface ProfileBadgesProps {
+  userXId: string | undefined;
+  screenType: ScreenType;
+}
+
+const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
+  const {badges, university} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId].profile : state.user.profile,
+  );
+  return (
+    <ScrollView horizontal>
+      {badges.map((badge) => (
+        <> </>
+        // <BadgeIcon key={badge.id} badge={{...badge, img: }} />
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default ProfileBadges;
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index c544c3f2..faf273d9 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -9,3 +9,4 @@ export {default as ProfileMoreInfoDrawer} from './ProfileMoreInfoDrawer';
 export {default as MomentMoreInfoDrawer} from './MomentMoreInfoDrawer';
 export {default as UniversityIcon} from './UniversityIcon';
 export {default as TaggAvatar} from './TaggAvatar';
+export {default as ProfileBadges} from './ProfileBadges';
diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx
index 8f576a43..616bac93 100644
--- a/src/components/suggestedPeople/BadgeIcon.tsx
+++ b/src/components/suggestedPeople/BadgeIcon.tsx
@@ -1,24 +1,17 @@
 import {useNavigation} from '@react-navigation/core';
 import React from 'react';
-import {
-  Image,
-  ImageSourcePropType,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
+import {Image, StyleProp, StyleSheet, ViewStyle} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
-import {UniversityBadge} from '../../types';
+import {UniversityBadgeDisplayType} from '../../types';
 import {normalize} from '../../utils';
 
 interface BadgeIconProps {
-  badge: UniversityBadge;
-  img: ImageSourcePropType;
+  badge: UniversityBadgeDisplayType;
   style?: StyleProp<ViewStyle>;
 }
 
-const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
+const BadgeIcon: React.FC<BadgeIconProps> = ({badge, style}) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
@@ -27,7 +20,7 @@ const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
         navigation.navigate('MutualBadgeHolders', {
           badge_id: badge.id,
           badge_title: badge.name,
-          badge_img: img,
+          badge_img: badge.img,
         });
       }}>
       <LinearGradient
@@ -36,7 +29,7 @@ const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
         angle={154.72}
         angleCenter={{x: 0.5, y: 0.5}}
         style={styles.badgeBackground}>
-        <Image source={img} style={styles.icon} />
+        <Image source={badge.img} style={styles.icon} />
       </LinearGradient>
     </TouchableOpacity>
   );
diff --git a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
index 267355f3..9f8d2a5a 100644
--- a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
+++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
@@ -102,7 +102,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
                 zIndex: -1 * badge.id,
               },
             ]}>
-            <BadgeIcon badge={badge} img={img} />
+            <BadgeIcon badge={{...badge, img}} />
           </Animated.View>
         ))}
     </Animated.View>