3 files changed, 47 insertions, 33 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 184e3f27..2bcee89e 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,22 +1,9 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {
-  ActivityIndicatorBase,
-  Alert,
-  Image,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import {Image, StyleSheet, Text, View} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {MomentCommentsScreen} from '../../screens';
-import {loadAvatar} from '../../services';
-import {
-  EMPTY_MOMENTS_LIST,
-  EMPTY_MOMENT_CATEGORIES,
-} from '../../store/initialStates';
-import {userSocialsReducer} from '../../store/reducers';
+import {loadAvatar, loadMomentThumbnail} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {NotificationType, ScreenType} from '../../types';
 import {
@@ -70,20 +57,21 @@ const Notification: React.FC<NotificationProps> = (props) => {
     };
   }, [id]);
 
-  // TODO: this should be moment thumbnail, waiting for that to complete
-  // useEffect(() => {
-  //   let mounted = true;
-  //   const loadMomentImage = async (user_id: string) => {
-  //     const response = await loadAvatar(user_id, true);
-  //     if (mounted) {
-  //       setMomentURI(response);
-  //     }
-  //   };
-  //   loadMomentImage(id);
-  //   return () => {
-  //     mounted = false;
-  //   };
-  // }, [id, notification_object]);
+  useEffect(() => {
+    let mounted = true;
+    const loadMomentImage = async (moment_id: string) => {
+      const response = await loadMomentThumbnail(moment_id);
+      if (mounted) {
+        setMomentURI(response);
+      }
+    };
+    if (notification_type === 'CMT' && notification_object) {
+      loadMomentImage(notification_object.moment_id);
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [id, notification_object, notification_type]);
 
   const onNotificationTap = async () => {
     switch (notification_type) {
@@ -144,13 +132,12 @@ const Notification: React.FC<NotificationProps> = (props) => {
         </Text>
         <Text>{verbage}</Text>
       </View>
-      {/* TODO: Still WIP */}
-      {/* {notification_type === 'CMT' && notification_object && (
+      {notification_type === 'CMT' && notification_object && (
         <Image
           style={styles.moment}
           source={{uri: momentURI, cache: 'only-if-cached'}}
         />
-      )} */}
+      )}
     </TouchableWithoutFeedback>
   );
 };
diff --git a/src/constants/api.ts b/src/constants/api.ts
index de43b94d..701070eb 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -18,6 +18,7 @@ export const GET_FB_POSTS_ENDPOINT: string = API_URL + 'posts-fb/';
 export const GET_TWITTER_POSTS_ENDPOINT: string = API_URL + 'posts-twitter/';
 export const SEARCH_ENDPOINT: string = API_URL + 'search/';
 export const MOMENTS_ENDPOINT: string = API_URL + 'moments/';
+export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/';
 export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/';
 export const COMMENTS_ENDPOINT: string = API_URL + 'comments/';
 export const FRIENDS_ENDPOINT: string = API_URL + 'friends/';
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 217b5857..6d16de96 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -1,6 +1,11 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {Alert} from 'react-native';
-import {COMMENTS_ENDPOINT, MOMENTS_ENDPOINT} from '../constants';
+import RNFetchBlob from 'rn-fetch-blob';
+import {
+  COMMENTS_ENDPOINT,
+  MOMENTS_ENDPOINT,
+  MOMENT_THUMBNAIL_ENDPOINT,
+} from '../constants';
 import {
   ERROR_FAILED_TO_COMMENT,
   ERROR_UPLOAD,
@@ -190,3 +195,24 @@ export const deleteMoment = async (momentId: string) => {
     return false;
   }
 };
+
+export const loadMomentThumbnail = async (momentId: string) => {
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const response = await RNFetchBlob.config({
+      fileCache: true,
+      appendExt: 'jpg',
+    }).fetch('GET', MOMENT_THUMBNAIL_ENDPOINT + `${momentId}/`, {
+      Authorization: 'Token ' + token,
+    });
+    const status = response.info().status;
+    if (status === 200) {
+      return response.path();
+    } else {
+      return '';
+    }
+  } catch (error) {
+    console.log(error);
+    return '';
+  }
+};