created navigation to comment from notification (#184)

5 files changed, 59 insertions, 13 deletions

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index 325e2788..f4f8197d 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -30,7 +30,7 @@ const CommentsCount: React.FC<CommentsCountProps> = ({
   };
   return (
     <>
-      <TouchableOpacity onPress={() => navigateToCommentsScreen()}>
+      <TouchableOpacity onPress={navigateToCommentsScreen}>
         <CommentIcon style={styles.image} />
         <Text style={styles.count}>
           {commentsCount !== '0' ? commentsCount : ''}
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index f6a04526..184e3f27 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,9 +1,22 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Image, StyleSheet, Text, View} from 'react-native';
+import {
+  ActivityIndicatorBase,
+  Alert,
+  Image,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
-import {useDispatch, useStore} from 'react-redux';
+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 {RootState} from '../../store/rootReducer';
 import {NotificationType, ScreenType} from '../../types';
 import {
@@ -15,6 +28,7 @@ import {
 
 interface NotificationProps {
   item: NotificationType;
+  userXId: string | undefined;
   screenType: ScreenType;
 }
 
@@ -27,11 +41,16 @@ const Notification: React.FC<NotificationProps> = (props) => {
       notification_object,
       unread,
     },
+    userXId,
     screenType,
   } = 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);
@@ -81,6 +100,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,
+            screenType,
+          });
+          setTimeout(() => {
+            navigation.push('MomentCommentsScreen', {
+              moment_id: moment.moment_id,
+              screenType,
+            });
+          }, 500);
+        }
+        break;
       default:
         break;
     }
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 6f008540..134e94cd 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -134,21 +134,23 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
         }
       }
 
+      const userXId =
+        loggedInUser.username === user.username ? undefined : user.id;
+
       /**
-       * Dispatch an event to Fetch the user details
-       * If the user is already present in store, do not fetch again
-       * Finally, Navigate to profile of the user selected
+       * Dispatch an event to Fetch the user details only if we're navigating to
+       * a userX's profile.
+       * If the user is already present in store, do not fetch again.
+       * Finally, Navigate to profile of the user selected.
        */
-
-      if (!userXInStore(state, screenType, user.id)) {
+      if (userXId && !userXInStore(state, screenType, user.id)) {
         await fetchUserX(
           dispatch,
           {userId: user.id, username: user.username},
           screenType,
         );
       }
-      const userXId =
-        loggedInUser.username === user.username ? undefined : user.id;
+
       navigation.push('Profile', {
         userXId,
         screenType,
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index d6d47b02..8aa47299 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -17,6 +17,7 @@ import {NotificationType, ScreenType} from '../../types';
 import {getDateAge, SCREEN_HEIGHT} from '../../utils';
 
 const NotificationsScreen: React.FC = () => {
+  const {user: loggedInUser} = useSelector((state: RootState) => state.user);
   const [refreshing, setRefreshing] = useState(false);
   // used for figuring out which ones are unread
   const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
@@ -95,7 +96,13 @@ const NotificationsScreen: React.FC = () => {
   }, [lastViewed, notifications]);
 
   const renderNotification = ({item}: {item: NotificationType}) => (
-    <Notification item={item} screenType={ScreenType.Notifications} />
+    <Notification
+      item={item}
+      userXId={
+        item.actor.id === loggedInUser.userId ? undefined : item.actor.id
+      }
+      screenType={ScreenType.Notifications}
+    />
   );
 
   const renderSectionHeader = ({section: {title, data}}) =>
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index f13e1295..9e6704d1 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -36,8 +36,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
   route,
   navigation,
 }) => {
-  const {moment_category, moment_id} = route.params.moment;
-  const {userXId, screenType} = route.params;
+  const {moment_category, moment_id, userXId, screenType} = route.params.moment;
   const {username: loggedInUsername} = useSelector(
     (state: RootState) => state.user.user,
   );