Add UniversityBadgeDisplayType

6 files changed, 53 insertions, 16 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>
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index eb80da49..c1064224 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -132,7 +132,7 @@ const SPBody: React.FC<SPBodyProps> = ({
     // 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} />
+        <BadgeIcon key={index} badge={{...badge, img}} style={styles.badge} />
       ))}
       {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => (
         <View key={index} style={styles.badge} />
diff --git a/src/types/types.ts b/src/types/types.ts
index b294e3f1..e54c2201 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -1,3 +1,4 @@
+import {ImageSourcePropType} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {Channel as ChannelType, StreamChat} from 'stream-chat';
 
@@ -262,6 +263,10 @@ export type UniversityBadge = {
   category: string;
 };
 
+export interface UniversityBadgeDisplayType extends UniversityBadge {
+  img: ImageSourcePropType;
+}
+
 export type SuggestedPeopleDataType = {
   user: ProfilePreviewType;
   university: UniversityType;
@@ -291,7 +296,16 @@ export type ContactType = {
 };
 
 export type UniversityBadgeType = 'Search' | 'Crest';
-export type BadgeDataType = Record<UniversityType, any[]>;
+export type BadgeDataType = Record<
+  UniversityType,
+  {
+    title: string;
+    data: {
+      badgeName: string;
+      badgeImage: ImageSourcePropType;
+    }[];
+  }[]
+>;
 
 // Stream Chat Types
 export type LocalAttachmentType = Record<string, unknown>;