1 files changed, 44 insertions, 26 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index efbda46f..e6d16f82 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -9,10 +9,8 @@ import {
   loadUserNotifications,
   updateUserXFriends,
 } from '../../store/actions';
-import {loadAvatar} from '../../services';
 import {acceptFriendRequest} from '../../store/actions';
-import {RootState} from '../../store/rootReducer';
-import {NotificationType, ProfilePreviewType, ScreenType} from '../../types';
+import {NotificationType, ProfilePreviewType, ScreenType, MomentType} from '../../types';
 import {
   fetchUserX,
   SCREEN_HEIGHT,
@@ -20,10 +18,13 @@ import {
   userXInStore,
 } from '../../utils';
 import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
+import {loadAvatar, loadMomentThumbnail} from '../../services';
+
 
 interface NotificationProps {
   item: NotificationType;
   screenType: ScreenType;
+  moments: MomentType[];
 }
 
 const Notification: React.FC<NotificationProps> = (props) => {
@@ -36,6 +37,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
       unread,
     },
     screenType,
+    moments: loggedInUserMoments,
   } = props;
 
   const navigation = useNavigation();
@@ -59,20 +61,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) {
@@ -90,6 +93,25 @@ const Notification: React.FC<NotificationProps> = (props) => {
           screenType,
         });
         break;
+      case 'CMT':
+        // find the moment we need to display
+        const moment = loggedInUserMoments?.find(
+          (m) => m.moment_id === notification_object?.moment_id,
+        );
+        if (moment) {
+          navigation.push('IndividualMoment', {
+            moment,
+            userXId: undefined, // we're only viewing our own moment here
+            screenType,
+          });
+          setTimeout(() => {
+            navigation.push('MomentCommentsScreen', {
+              moment_id: moment.moment_id,
+              screenType,
+            });
+          }, 500);
+        }
+        break;
       default:
         break;
     }
@@ -136,14 +158,10 @@ const Notification: React.FC<NotificationProps> = (props) => {
             />
           </View>
         )}
+        {notification_type === 'CMT' && notification_object && (
+        <Image style={styles.moment} source={{uri: momentURI}} />
+      )}
       </TouchableWithoutFeedback>
-      {/* TODO: Still WIP */}
-      {/* {notification_type === 'CMT' && notification_object && (
-        <Image
-          style={styles.moment}
-          source={{uri: momentURI, cache: 'only-if-cached'}}
-        />
-      )} */}
     </>
   );
 };
@@ -156,7 +174,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   avatarContainer: {
-    marginLeft: '5%',
+    marginLeft: '8%',
     flex: 1,
     justifyContent: 'center',
   },
@@ -171,7 +189,7 @@ const styles = StyleSheet.create({
     height: '80%',
     flexDirection: 'column',
     justifyContent: 'space-around',
-    marginRight: SCREEN_WIDTH / 6,
+    marginRight: '15%',
   },
   actorName: {
     fontSize: 15,