From a13dcb5110245bb554d79e779c4942e6f5aaf18a Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 27 Apr 2021 10:46:17 -0400
Subject: refactored avatar

---
 src/components/profile/Avatar.tsx         | 36 -------------------------------
 src/components/profile/ProfileHeader.tsx  |  4 ++--
 src/components/profile/ProfilePreview.tsx | 12 +++--------
 src/components/profile/TaggAvatar.tsx     | 35 ++++++++++++++++++++++++++++++
 src/components/profile/index.ts           |  1 +
 5 files changed, 41 insertions(+), 47 deletions(-)
 delete mode 100644 src/components/profile/Avatar.tsx
 create mode 100644 src/components/profile/TaggAvatar.tsx

(limited to 'src/components/profile')

diff --git a/src/components/profile/Avatar.tsx b/src/components/profile/Avatar.tsx
deleted file mode 100644
index e57a56a3..00000000
--- a/src/components/profile/Avatar.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import {Image, StyleSheet} from 'react-native';
-import {useSelector} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
-import {ScreenType} from '../../types';
-
-const PROFILE_DIM = 100;
-
-interface AvatarProps {
-  style?: object;
-  userXId: string | undefined;
-  screenType: ScreenType;
-}
-const Avatar: React.FC<AvatarProps> = ({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'}}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  image: {
-    height: PROFILE_DIM,
-    width: PROFILE_DIM,
-    borderRadius: PROFILE_DIM / 2,
-  },
-});
-
-export default Avatar;
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/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx
new file mode 100644
index 00000000..ea0bdb65
--- /dev/null
+++ b/src/components/profile/TaggAvatar.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+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 TaggAvatarProps {
+  style?: object;
+  userXId: string | undefined;
+  screenType: ScreenType;
+}
+const TaggAvatar: React.FC<TaggAvatarProps> = ({
+  style,
+  screenType,
+  userXId,
+}) => {
+  const {avatar} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.user,
+  );
+
+  return <Avatar style={[styles.image, style]} uri={avatar} />;
+};
+
+const styles = StyleSheet.create({
+  image: {
+    height: PROFILE_DIM,
+    width: PROFILE_DIM,
+    borderRadius: PROFILE_DIM / 2,
+  },
+});
+
+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';
-- 
cgit v1.2.3-70-g09d2