From befc480c50d90d829c53953476ccfe99e26c9260 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 26 Jan 2021 18:10:23 -0500
Subject: thumbnail for profile preview and moments

---
 src/components/moments/MomentTile.tsx     |  3 +--
 src/components/profile/ProfilePreview.tsx | 43 +++++++++++--------------------
 2 files changed, 16 insertions(+), 30 deletions(-)

(limited to 'src/components')

diff --git a/src/components/moments/MomentTile.tsx b/src/components/moments/MomentTile.tsx
index 16e91c82..69701192 100644
--- a/src/components/moments/MomentTile.tsx
+++ b/src/components/moments/MomentTile.tsx
@@ -15,7 +15,6 @@ const MomentTile: React.FC<MomentTileProps> = ({
 }) => {
   const navigation = useNavigation();
 
-  const {path_hash} = moment;
   return (
     <TouchableOpacity
       onPress={() => {
@@ -26,7 +25,7 @@ const MomentTile: React.FC<MomentTileProps> = ({
         });
       }}>
       <View style={styles.image}>
-        <Image style={styles.image} source={{uri: path_hash}} />
+        <Image style={styles.image} source={{uri: moment.thumbnail_url}} />
       </View>
     </TouchableOpacity>
   );
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 389ca367..000dd5c5 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -12,21 +12,11 @@ import {
 } from 'react-native';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
-import {loadAvatar} from '../../services';
+import {loadImageFromURL} from '../../services';
 import {RootState} from '../../store/rootreducer';
-import {
-  PreviewType,
-  ProfilePreviewType,
-  ScreenType,
-  UserType,
-} from '../../types';
+import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
 import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
 
-const NO_USER: UserType = {
-  userId: '',
-  username: '',
-};
-
 /**
  * This component returns user's profile picture friended by username as a touchable component.
  * What happens when someone clicks on this component is partly decided by the prop isComment.
@@ -43,28 +33,24 @@ interface ProfilePreviewProps extends ViewProps {
 }
 
 const ProfilePreview: React.FC<ProfilePreviewProps> = ({
-  profilePreview: {username, first_name, last_name, id},
+  profilePreview: {username, first_name, last_name, id, thumbnail_url},
   previewType,
   screenType,
 }) => {
   const navigation = useNavigation();
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
-  const [avatarURI, setAvatarURI] = useState<string | null>(null);
-  const [user, setUser] = useState<UserType>(NO_USER);
+  const [avatar, setAvatar] = useState<string | null>(null);
   const dispatch = useDispatch();
+
   useEffect(() => {
-    let mounted = true;
-    const loadAvatarImage = async () => {
-      const response = await loadAvatar(id, true);
-      if (mounted) {
-        setAvatarURI(response);
+    (async () => {
+      console.log(thumbnail_url);
+      const response = await loadImageFromURL(thumbnail_url);
+      if (response) {
+        setAvatar(response);
       }
-    };
-    loadAvatarImage();
-    return () => {
-      mounted = false;
-    };
-  }, [id]);
+    })();
+  }, []);
 
   /**
    * Adds a searched user to the recently searched cache if they're tapped on.
@@ -80,6 +66,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       username,
       first_name,
       last_name,
+      thumbnail_url,
     };
 
     try {
@@ -211,8 +198,8 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       <Image
         style={avatarStyle}
         source={
-          avatarURI
-            ? {uri: avatarURI}
+          avatar
+            ? {uri: avatar}
             : require('../../assets/images/avatar-placeholder.png')
         }
       />
-- 
cgit v1.2.3-70-g09d2