1 files changed, 65 insertions, 4 deletions
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 2c623c2b..a17d9f6f 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,10 +1,14 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
 import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
+import {BADGE_DATA} from '../../constants/badges';
+import {getSuggestedPeopleProfile} from '../../services';
 import {RootState} from '../../store/rootreducer';
-import {ScreenType} from '../../types';
+import {ScreenType, UniversityBadge} from '../../types';
 import {normalize} from '../../utils';
+import BadgeDetailView from '../common/BadgeDetailView';
 import Avatar from './Avatar';
 import FriendsCount from './FriendsCount';
 import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
@@ -25,12 +29,59 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
 }) => {
   const {
     profile: {name = '', university_class = 2021, university},
-    user: {username: userXName = ''},
+    user: {userId, username: userXName = ''},
   } = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
+
+  const {
+    user: {username = ''},
+  } = useSelector((state: RootState) => state.user);
   const [drawerVisible, setDrawerVisible] = useState(false);
+  const [showBadgeView, setBadgeViewVisible] = useState(false);
   const [firstName, lastName] = [...name.split(' ')];
+  const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
+  const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
+    [],
+  );
+
+  const fetchBadges = async () => {
+    const uid = userXId ? userXId : userId;
+    if (uid) {
+      const response = await getSuggestedPeopleProfile(uid);
+      if (response) {
+        const data = response.badges;
+        let extractedBadgeNames: UniversityBadge[] = [];
+        data.forEach((badge) => {
+          extractedBadgeNames.push(badge);
+        });
+        setSelectedBadges(extractedBadgeNames);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchBadges();
+  }, []);
+
+  useEffect(() => {
+    let badgesWithImage = [];
+    selectedBadges.forEach((e) => {
+      const uniData = BADGE_DATA[e.university];
+      const categoryData = uniData.filter((u) => {
+        return u.title === e.category;
+      });
+      const badgeData = categoryData[0].data.filter((c) => {
+        return c.badgeName === e.name;
+      });
+      badgeData.forEach((c) => {
+        const obj = {...e, badgeImage: c.badgeImage};
+        badgesWithImage.push(obj);
+      });
+    });
+    setSelectedBadgesWithImage(badgesWithImage);
+  }, [selectedBadges]);
+
   return (
     <View style={styles.container}>
       <ProfileMoreInfoDrawer
@@ -59,7 +110,17 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
           )}
           <View style={styles.friendsAndUniversity}>
             <FriendsCount screenType={screenType} userXId={userXId} />
-            <UniversityIcon {...{university, university_class}} />
+            <TouchableOpacity onPress={() => setBadgeViewVisible(true)}>
+              <UniversityIcon {...{university, university_class}} />
+            </TouchableOpacity>
+            {showBadgeView && (
+              <BadgeDetailView
+                isEditable={userXName === username}
+                name={name}
+                selectedBadges={selectedBadgesWithImage}
+                setBadgeViewVisible={setBadgeViewVisible}
+              />
+            )}
           </View>
         </View>
       </View>