Merge pull request #379 from ankit-thanekar007/tma-794-806-badge-profile-view

[TMA-794/806] Badge profile view

3 files changed, 43 insertions, 7 deletions

diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx
index 4790743b..8252266e 100644
--- a/src/components/profile/FriendsCount.tsx
+++ b/src/components/profile/FriendsCount.tsx
@@ -62,6 +62,7 @@ const styles = StyleSheet.create({
     fontSize: normalize(14),
   },
   label: {
+    marginTop: 4,
     fontWeight: '500',
     fontSize: normalize(14),
   },
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 2c623c2b..9dc58501 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,10 +1,12 @@
 import React, {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 {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
 import {normalize} from '../../utils';
+import BadgeDetailView from '../common/BadgeDetailView';
 import Avatar from './Avatar';
 import FriendsCount from './FriendsCount';
 import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
@@ -29,8 +31,14 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
   } = 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(' ')];
+
   return (
     <View style={styles.container}>
       <ProfileMoreInfoDrawer
@@ -59,7 +67,18 @@ 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, needsShadow: true}}
+              />
+            </TouchableOpacity>
+            {showBadgeView && (
+              <BadgeDetailView
+                isEditable={userXName === username}
+                name={name}
+                setBadgeViewVisible={setBadgeViewVisible}
+              />
+            )}
           </View>
         </View>
       </View>
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 4cb1abe6..cfe1366d 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -8,6 +8,7 @@ export interface UniversityIconProps extends ViewProps {
   university: UniversityType;
   university_class?: number;
   imageStyle?: StyleProp<ImageStyle>;
+  needsShadow?: boolean;
 }
 
 /**
@@ -18,13 +19,16 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
   university,
   university_class,
   imageStyle,
+  needsShadow = false,
 }) => {
   return (
     <View style={[styles.container, style]}>
-      <Image
-        source={getUniversityBadge(university, 'Crest')}
-        style={[styles.icon, imageStyle]}
-      />
+      <View style={needsShadow && styles.shadowStyle}>
+        <Image
+          source={getUniversityBadge(university, 'Crest')}
+          style={[styles.icon, imageStyle]}
+        />
+      </View>
       {university_class && (
         <Text style={styles.univClass}>
           {getUniversityClass(university_class)}
@@ -47,8 +51,20 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
   icon: {
-    width: normalize(17),
-    height: normalize(19),
+    width: normalize(12),
+    height: normalize(13),
+  },
+  shadowStyle: {
+    padding: 5,
+    borderRadius: 30,
+    shadowOffset: {
+      width: 1,
+      height: 1,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 3,
+    shadowColor: 'rgba(0, 0, 0, 0.3)',
+    backgroundColor: 'white',
   },
 });