Merge branch 'master' into tma821-load-badges-faster-ft

# Conflicts:
#	src/utils/users.ts

4 files changed, 24 insertions, 33 deletions

diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 35ec0ea9..14f7dc71 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -8,7 +8,7 @@ import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
 import {hasSeenBadgeTutorial, normalize} from '../../utils';
 import BadgeDetailView from '../common/BadgeDetailView';
-import Avatar from './Avatar';
+import TaggAvatar from './TaggAvatar';
 import BadgeTutorial from './BadgeTutorial';
 import FriendsCount from './FriendsCount';
 import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
@@ -45,7 +45,6 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
 
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [showBadgeView, setBadgeViewVisible] = useState(false);
-  const [firstName, lastName] = [...name.split(' ')];
 
   const containerRef = useRef(null);
   const childRef = useRef(null);
@@ -86,6 +85,10 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
     }
   };
 
+  useEffect(() => {
+    setDrawerVisible(drawerVisible);
+  }, [drawerVisible]);
+
   return (
     <View ref={containerRef} style={styles.container}>
       <ProfileMoreInfoDrawer
@@ -96,6 +99,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
         userXName={userXName}
         setIsOpen={setDrawerVisible}
       />
+
       {userId === loggedInUserId && measure && (
         <BadgeTutorial
           uniIconProps={{
@@ -107,21 +111,15 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
         />
       )}
       <View style={styles.row}>
-        <Avatar
+        <TaggAvatar
           style={styles.avatar}
           userXId={userXId}
           screenType={screenType}
         />
         <View style={styles.header}>
-          {name.length <= 16 ? (
-            <Text style={styles.name}>{name}</Text>
-          ) : (
-            <View>
-              <Text style={styles.name}>{firstName}</Text>
-              <Text style={styles.name}>{lastName}</Text>
-            </View>
-          )}
-
+          <Text style={styles.name} numberOfLines={2}>
+            {name}
+          </Text>
           <View style={styles.friendsAndUniversity}>
             <FriendsCount screenType={screenType} userXId={userXId} />
             <TouchableOpacity
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index bea989d9..66d68d8f 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -2,7 +2,6 @@ import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {
   Alert,
-  Image,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -23,6 +22,7 @@ import {
   userXInStore,
 } from '../../utils';
 import {addUserToRecentlySearched} from '../../utils/search';
+import {Avatar} from '../common';
 
 /**
  * This component returns user's profile picture friended by username as a touchable component.
@@ -48,7 +48,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
 }) => {
   const navigation = useNavigation();
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
-  const [avatar, setAvatar] = useState<string | null>(null);
+  const [avatar, setAvatar] = useState<string>();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -187,14 +187,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
     <TouchableOpacity
       onPress={addToRecentlyStoredAndNavigateToProfile}
       style={containerStyle}>
-      <Image
-        style={avatarStyle}
-        source={
-          avatar
-            ? {uri: avatar}
-            : require('../../assets/images/avatar-placeholder.png')
-        }
-      />
+      <Avatar style={avatarStyle} uri={avatar} />
       <View style={nameContainerStyle}>
         {(previewType === 'Search' || previewType === 'Recent') && (
           <>
diff --git a/src/components/profile/Avatar.tsx b/src/components/profile/TaggAvatar.tsx
index e57a56a3..ea0bdb65 100644
--- a/src/components/profile/Avatar.tsx
+++ b/src/components/profile/TaggAvatar.tsx
@@ -1,28 +1,27 @@
 import React from 'react';
-import {Image, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
+import {Avatar} from '../common';
 
 const PROFILE_DIM = 100;
 
-interface AvatarProps {
+interface TaggAvatarProps {
   style?: object;
   userXId: string | undefined;
   screenType: ScreenType;
 }
-const Avatar: React.FC<AvatarProps> = ({style, screenType, userXId}) => {
+const TaggAvatar: React.FC<TaggAvatarProps> = ({
+  style,
+  screenType,
+  userXId,
+}) => {
   const {avatar} = useSelector((state: RootState) =>
     userXId ? state.userX[screenType][userXId] : state.user,
   );
 
-  return (
-    <Image
-      style={[styles.image, style]}
-      defaultSource={require('../../assets/images/avatar-placeholder.png')}
-      source={{uri: avatar, cache: 'reload'}}
-    />
-  );
+  return <Avatar style={[styles.image, style]} uri={avatar} />;
 };
 
 const styles = StyleSheet.create({
@@ -33,4 +32,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Avatar;
+export default TaggAvatar;
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index 260f4217..c544c3f2 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -8,3 +8,4 @@ export {default as Friends} from './Friends';
 export {default as ProfileMoreInfoDrawer} from './ProfileMoreInfoDrawer';
 export {default as MomentMoreInfoDrawer} from './MomentMoreInfoDrawer';
 export {default as UniversityIcon} from './UniversityIcon';
+export {default as TaggAvatar} from './TaggAvatar';