Merge pull request #203 from IvanIFChen/tma577-profile-slowness

[TMA-577] Profile Slowness

1 files changed, 14 insertions, 28 deletions

diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 389ca367..38defb8d 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,23 @@ 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 () => {
+      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 +65,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       username,
       first_name,
       last_name,
+      thumbnail_url,
     };
 
     try {
@@ -211,8 +197,8 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       <Image
         style={avatarStyle}
         source={
-          avatarURI
-            ? {uri: avatarURI}
+          avatar
+            ? {uri: avatar}
             : require('../../assets/images/avatar-placeholder.png')
         }
       />