Merge pull request #160 from IvanIFChen/tma479-moment-thumbnails

[TMA-479] Moment Thumbnails 

4 files changed, 64 insertions, 61 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 184e3f27..94937053 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,35 +1,17 @@
 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 {useDispatch, useStore} from 'react-redux';
+import {loadAvatar, loadMomentThumbnail} from '../../services';
 import {RootState} from '../../store/rootReducer';
-import {NotificationType, ScreenType} from '../../types';
-import {
-  fetchUserX,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-  userXInStore,
-} from '../../utils';
+import {MomentType, NotificationType, ScreenType} from '../../types';
+import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
 
 interface NotificationProps {
   item: NotificationType;
-  userXId: string | undefined;
   screenType: ScreenType;
+  moments: MomentType[];
 }
 
 const Notification: React.FC<NotificationProps> = (props) => {
@@ -41,16 +23,12 @@ const Notification: React.FC<NotificationProps> = (props) => {
       notification_object,
       unread,
     },
-    userXId,
     screenType,
+    moments: loggedInUserMoments,
   } = props;
   const navigation = useNavigation();
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
-  const {moments: loggedInUserMoments} =
-    notification_type === 'CMT'
-      ? useSelector((state: RootState) => state.moments)
-      : {moments: undefined};
 
   const [avatarURI, setAvatarURI] = useState<string | undefined>(undefined);
   const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
@@ -70,20 +48,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 && response) {
+        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) {
@@ -108,7 +87,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
         if (moment) {
           navigation.push('IndividualMoment', {
             moment,
-            userXId,
+            userXId: undefined, // we're only viewing our own moment here
             screenType,
           });
           setTimeout(() => {
@@ -133,7 +112,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
           style={styles.avatar}
           source={
             avatarURI
-              ? {uri: avatarURI, cache: 'only-if-cached'}
+              ? {uri: avatarURI}
               : require('../../assets/images/avatar-placeholder.png')
           }
         />
@@ -144,13 +123,9 @@ const Notification: React.FC<NotificationProps> = (props) => {
         </Text>
         <Text>{verbage}</Text>
       </View>
-      {/* TODO: Still WIP */}
-      {/* {notification_type === 'CMT' && notification_object && (
-        <Image
-          style={styles.moment}
-          source={{uri: momentURI, cache: 'only-if-cached'}}
-        />
-      )} */}
+      {notification_type === 'CMT' && notification_object && (
+        <Image style={styles.moment} source={{uri: momentURI}} />
+      )}
     </TouchableWithoutFeedback>
   );
 };
@@ -163,7 +138,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   avatarContainer: {
-    marginLeft: '5%',
+    marginLeft: '8%',
     flex: 1,
     justifyContent: 'center',
   },
@@ -178,7 +153,7 @@ const styles = StyleSheet.create({
     height: '80%',
     flexDirection: 'column',
     justifyContent: 'space-around',
-    marginRight: SCREEN_WIDTH / 6,
+    marginRight: '15%',
   },
   actorName: {
     fontSize: 15,
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/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 8aa47299..219a0be9 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -18,6 +18,9 @@ import {getDateAge, SCREEN_HEIGHT} from '../../utils';
 
 const NotificationsScreen: React.FC = () => {
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
+  const {moments: loggedInUserMoments} = useSelector(
+    (state: RootState) => state.moments,
+  );
   const [refreshing, setRefreshing] = useState(false);
   // used for figuring out which ones are unread
   const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
@@ -98,10 +101,8 @@ const NotificationsScreen: React.FC = () => {
   const renderNotification = ({item}: {item: NotificationType}) => (
     <Notification
       item={item}
-      userXId={
-        item.actor.id === loggedInUser.userId ? undefined : item.actor.id
-      }
       screenType={ScreenType.Notifications}
+      moments={item.notification_type === 'CMT' ? loggedInUserMoments : []}
     />
   );
 
@@ -134,7 +135,7 @@ const NotificationsScreen: React.FC = () => {
 
 const styles = StyleSheet.create({
   header: {
-    marginLeft: '5%',
+    marginLeft: '8%',
     marginTop: '5%',
     alignSelf: 'flex-start',
     flexDirection: 'column',
@@ -156,10 +157,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#f3f2f2',
   },
   sectionHeader: {
-    marginLeft: '5%',
+    marginLeft: '8%',
     marginTop: '5%',
     marginBottom: '2%',
-    fontSize: 16,
+    fontSize: 15,
   },
 });
 
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 217b5857..514b674c 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 undefined;
+    }
+  } catch (error) {
+    console.log(error);
+    return undefined;
+  }
+};