use thumbnails for notification screen

1 files changed, 18 insertions, 28 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index e6d16f82..e648b554 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,25 +1,19 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {Image, StyleSheet, Text, View} from 'react-native';
-import {Button} from 'react-native-elements';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {useDispatch, useStore} from 'react-redux';
+import {loadImageFromURL, loadMomentThumbnail} from '../../services';
 import {
+  acceptFriendRequest,
   declineFriendRequest,
   loadUserNotifications,
   updateUserXFriends,
 } from '../../store/actions';
-import {acceptFriendRequest} from '../../store/actions';
-import {NotificationType, ProfilePreviewType, ScreenType, MomentType} from '../../types';
-import {
-  fetchUserX,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-  userXInStore,
-} from '../../utils';
+import {RootState} from '../../store/rootReducer';
+import {MomentType, NotificationType, ScreenType} from '../../types';
+import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
 import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
-import {loadAvatar, loadMomentThumbnail} from '../../services';
-
 
 interface NotificationProps {
   item: NotificationType;
@@ -30,7 +24,7 @@ interface NotificationProps {
 const Notification: React.FC<NotificationProps> = (props) => {
   const {
     item: {
-      actor: {id, username, first_name, last_name},
+      actor: {id, username, first_name, last_name, thumbnail_url},
       verbage,
       notification_type,
       notification_object,
@@ -44,22 +38,18 @@ const Notification: React.FC<NotificationProps> = (props) => {
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
 
-  const [avatarURI, setAvatarURI] = useState<string | undefined>(undefined);
+  const [avatar, setAvatar] = useState<string | undefined>(undefined);
   const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
   const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)';
+
   useEffect(() => {
-    let mounted = true;
-    const loadAvatarImage = async (user_id: string) => {
-      const response = await loadAvatar(user_id, true);
-      if (mounted) {
-        setAvatarURI(response);
+    (async () => {
+      const response = await loadImageFromURL(thumbnail_url);
+      if (response) {
+        setAvatar(response);
       }
-    };
-    loadAvatarImage(id);
-    return () => {
-      mounted = false;
-    };
-  }, [id]);
+    })();
+  }, []);
 
   useEffect(() => {
     let mounted = true;
@@ -137,8 +127,8 @@ const Notification: React.FC<NotificationProps> = (props) => {
           <Image
             style={styles.avatar}
             source={
-              avatarURI
-                ? {uri: avatarURI, cache: 'only-if-cached'}
+              avatar
+                ? {uri: avatar, cache: 'only-if-cached'}
                 : require('../../assets/images/avatar-placeholder.png')
             }
           />
@@ -159,8 +149,8 @@ const Notification: React.FC<NotificationProps> = (props) => {
           </View>
         )}
         {notification_type === 'CMT' && notification_object && (
-        <Image style={styles.moment} source={{uri: momentURI}} />
-      )}
+          <Image style={styles.moment} source={{uri: momentURI}} />
+        )}
       </TouchableWithoutFeedback>
     </>
   );