[TMA - 457]Change followers to friends (#149)

* One commit to replace followers with friends

* Move block unblock to drawer and some cosmetic changes

* Options to edit own profile when viewing

* Changes for University Class

* Small fix

* Made ProfileOnboarding a scroll view and other small changes

* Small fix

* Small fix thanks to ivan and tanmay

* Add ?

1 files changed, 41 insertions, 22 deletions

diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 0eb2d469..5c14b374 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,20 +1,31 @@
 import React, {useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {useSelector} from 'react-redux';
+import {UniversityIcon} from '.';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import Avatar from './Avatar';
-import FollowCount from './FollowCount';
+import FriendsCount from './FriendsCount';
 import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
 
 type ProfileHeaderProps = {
   userXId: string | undefined;
   screenType: ScreenType;
+  isBlocked: boolean;
+  handleBlockUnblock: () => void;
 };
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
-  const {profile: {name = ''} = {}} = userXId
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+  userXId,
+  screenType,
+  isBlocked,
+  handleBlockUnblock,
+}) => {
+  const {
+    profile: {name = '', university_class = 2021} = {},
+    user: {username: userXName = ''},
+  } = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.user);
 
@@ -22,12 +33,15 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
 
   return (
     <View style={styles.container}>
-      {!userXId && (
-        <ProfileMoreInfoDrawer
-          isOpen={drawerVisible}
-          setIsOpen={setDrawerVisible}
-        />
-      )}
+      <ProfileMoreInfoDrawer
+        isOpen={drawerVisible}
+        isBlocked={isBlocked}
+        handleBlockUnblock={handleBlockUnblock}
+        userXId={userXId}
+        userXName={userXName}
+        setIsOpen={setDrawerVisible}
+      />
+
       <View style={styles.row}>
         <Avatar
           style={styles.avatar}
@@ -36,18 +50,17 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
         />
         <View style={styles.header}>
           <Text style={styles.name}>{name}</Text>
-          <View style={styles.row}>
-            <FollowCount
-              style={styles.follows}
-              mode="followers"
+
+          <View style={styles.friendsAndUniversity}>
+            <FriendsCount
+              style={styles.friends}
               screenType={screenType}
               userXId={userXId}
             />
-            <FollowCount
-              style={styles.follows}
-              mode="following"
-              screenType={screenType}
-              userXId={userXId}
+            <UniversityIcon
+              style={styles.university}
+              university="brown"
+              university_class={university_class}
             />
           </View>
         </View>
@@ -66,8 +79,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   header: {
+    flexDirection: 'column',
     justifyContent: 'center',
-    alignItems: 'center',
     marginTop: SCREEN_HEIGHT / 40,
     marginLeft: SCREEN_WIDTH / 10,
     marginBottom: SCREEN_HEIGHT / 50,
@@ -77,13 +90,19 @@ const styles = StyleSheet.create({
     left: '10%',
   },
   name: {
+    marginHorizontal: '20%',
     fontSize: 20,
-    fontWeight: '700',
+    fontWeight: '500',
+    alignSelf: 'center',
     marginBottom: SCREEN_HEIGHT / 80,
   },
-  follows: {
-    marginHorizontal: SCREEN_HEIGHT / 50,
+  friends: {
+    marginRight: SCREEN_HEIGHT / 80,
+  },
+  university: {
+    marginLeft: SCREEN_HEIGHT / 50,
   },
+  friendsAndUniversity: {flexDirection: 'row', flex: 1, marginLeft: '20%'},
 });
 
 export default ProfileHeader;