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

[TMA-479] Moment Thumbnails 

1 files changed, 29 insertions, 54 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,