refactored avatar

4 files changed, 16 insertions, 22 deletions

diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 35ec0ea9..db56b216 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';
@@ -107,7 +107,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
         />
       )}
       <View style={styles.row}>
-        <Avatar
+        <TaggAvatar
           style={styles.avatar}
           userXId={userXId}
           screenType={screenType}
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index bea989d9..242a17e3 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -23,6 +23,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 +49,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 +188,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';