Clean refactoring for comment notifications

3 files changed, 94 insertions, 83 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 077cdb64..93853198 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -6,11 +6,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import {useDispatch, useStore} from 'react-redux';
 import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 import {ERROR_DELETED_OBJECT} from '../../constants/strings';
-import {
-  loadImageFromURL,
-  loadMomentThumbnail,
-  loadSingleMoment,
-} from '../../services';
+import {loadImageFromURL} from '../../services';
 import {
   acceptFriendRequest,
   declineFriendRequest,
@@ -20,23 +16,21 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {
+  CommentNotificationType,
+  CommentThreadType,
   MomentType,
-  MomentWithUserType,
   NotificationType,
   ScreenType,
+  ThreadNotificationType,
+  UserType,
 } from '../../types';
-import {
-  fetchUserX,
-  getTokenOrLogout,
-  SCREEN_HEIGHT,
-  userXInStore,
-} from '../../utils';
+import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
 import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
 
 interface NotificationProps {
   item: NotificationType;
   screenType: ScreenType;
-  moments: MomentType[];
+  loggedInUser: UserType;
 }
 
 const Notification: React.FC<NotificationProps> = (props) => {
@@ -49,7 +43,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
       unread,
     },
     screenType,
-    moments: loggedInUserMoments,
+    loggedInUser,
   } = props;
 
   const navigation = useNavigation();
@@ -72,30 +66,34 @@ const Notification: React.FC<NotificationProps> = (props) => {
 
   useEffect(() => {
     let mounted = true;
-    const loadMomentImage = async (moment_id: string) => {
-      const response = await loadMomentThumbnail(moment_id);
-      if (mounted && response) {
-        setMomentURI(response);
+    const setMomentThumbnailUrl = async (url: string) => {
+      if (mounted && url) {
+        setMomentURI(url);
       } else {
         // if not set to empty, it will re-use the previous notification's state
         setMomentURI(undefined);
       }
     };
-    if (
-      (notification_type === 'CMT' ||
+    if (notification_object) {
+      let url: string | undefined;
+      let obj;
+      if (
         notification_type === 'MOM_3+' ||
-        notification_type === 'MOM_FRIEND') &&
-      notification_object
-    ) {
-      loadMomentImage(
-        notification_object.moment_id
-          ? notification_object.moment_id
-          : notification_object.parent_comment.moment_id,
-      );
-      return () => {
-        mounted = false;
-      };
+        notification_type === 'MOM_FRIEND'
+      ) {
+        obj = notification_object as MomentType;
+        url = obj.thumbnail_url;
+      } else if (notification_type === 'CMT') {
+        obj = notification_object as CommentNotificationType;
+        url = obj.notification_data.thumbnail_url;
+      }
+      if (url) {
+        setMomentThumbnailUrl(url);
+      }
     }
+    return () => {
+      mounted = false;
+    };
   }, [id, notification_object, notification_type]);
 
   const onNotificationTap = async () => {
@@ -120,60 +118,58 @@ const Notification: React.FC<NotificationProps> = (props) => {
           Alert.alert(ERROR_DELETED_OBJECT);
           break;
         }
-        let {moment_id} = notification_object;
-        let {comment_id} = notification_object;
 
-        //If this is a thread, get comment_id and moment_id from parent_comment
-        if (!notification_object?.moment_id) {
-          moment_id = notification_object?.parent_comment?.moment_id;
-          comment_id = notification_object?.parent_comment?.comment_id;
-        }
-
-        // Now find the moment we need to display
-        let moment: MomentType | undefined = loggedInUserMoments?.find(
-          (m) => m.moment_id === moment_id,
-        );
+        /**
+         * Notification object knows
+         *  1 - Which comment
+         *  2 - Which user
+         * The comment / reply belongs to
+         * STEP 1 : Populate reply / comment
+         * STEP 2 : Load user data if moment does not belong to the logged in user
+         * STEP 3 : Navigate to relevant moment
+         */
 
+        let comment_id: string;
+        let not_object;
+        let reply: CommentThreadType | undefined;
         let userXId;
 
-        // If moment does not belong to the logged in user, then the comment was probably a reply to some comment
-        // Figure out who userX is and Load details for userX
-        if (!moment) {
-          try {
-            const token = await getTokenOrLogout(dispatch);
-            const momentAndUser:
-              | MomentWithUserType
-              | undefined = (await loadSingleMoment(
-              moment_id,
-              token,
-            )) as MomentWithUserType;
+        // STEP 1
+        if ('parent_comment' in notification_object) {
+          //This is a reply
+          not_object = notification_object as ThreadNotificationType;
+          comment_id = not_object.parent_comment;
+          reply = {
+            parent_comment: {comment_id: comment_id},
+            comment_id: not_object.comment_id,
+          };
+        } else {
+          not_object = notification_object as CommentNotificationType;
+          comment_id = not_object.comment_id;
+        }
 
-            if (momentAndUser) {
-              const {user, ...momentFetched} = momentAndUser;
-              userXId = user.id;
-              moment_id = momentFetched.moment_id;
-              moment = {...momentFetched};
-              if (!userXInStore(state, screenType, user.id)) {
-                fetchUserX(
-                  dispatch,
-                  {username: user.username, userId: user.id},
-                  screenType,
-                );
-              }
-            }
-          } catch (err) {
-            console.log(err);
-          }
+        //STEP 2
+        const {user, ...moment} = not_object.notification_data;
+        if (user.id !== loggedInUser.userId) {
+          fetchUserX(
+            dispatch,
+            {userId: user.id, username: user.username},
+            screenType,
+          );
+          userXId = user.id;
         }
 
-        //Now if moment was found, navigate to the respective moment
+        const {moment_id} = moment;
+
+        //STEP 3
         if (moment) {
-          if (notification_object?.parent_comment) {
-            dispatch(updateReplyPosted(notification_object));
+          //Now if moment was found, navigate to the respective moment
+          if (reply) {
+            dispatch(updateReplyPosted(reply));
           }
           navigation.push('IndividualMoment', {
             moment,
-            userXId: userXId, // we're only viewing our own moment here
+            userXId, // we're only viewing our own moment here
             screenType,
           });
           setTimeout(() => {
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index d9952aa8..f35bb22c 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -35,6 +35,9 @@ const NotificationsScreen: React.FC = () => {
   const {notifications} = useSelector(
     (state: RootState) => state.notifications,
   );
+
+  const {user: loggedInUser} = useSelector((state: RootState) => state.user);
+
   const [sectionedNotifications, setSectionedNotifications] = useState<
     {title: 'Today' | 'Yesterday' | 'This Week'; data: NotificationType[]}[]
   >([]);
@@ -130,7 +133,7 @@ const NotificationsScreen: React.FC = () => {
     <Notification
       item={item}
       screenType={ScreenType.Notifications}
-      moments={item.notification_type === 'CMT' ? loggedInUserMoments : []}
+      loggedInUser={loggedInUser}
     />
   );
 
diff --git a/src/types/types.ts b/src/types/types.ts
index e71c4e5c..ab995292 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -87,11 +87,6 @@ export interface MomentType {
   moment_url: string;
   thumbnail_url: string;
 }
-
-export interface MomentWithUserType extends MomentType {
-  user: ProfilePreviewType;
-}
-
 export interface CommentBaseType {
   comment_id: string;
   comment: string;
@@ -169,7 +164,7 @@ export enum CategorySelectionScreenType {
 export enum BackgroundGradientType {
   Light,
   Dark,
-  Notification
+  Notification,
 }
 
 /**
@@ -181,11 +176,28 @@ export type TaggPopupType = {
   next?: TaggPopupType;
 };
 
+export interface MomentWithUserType extends MomentType {
+  user: ProfilePreviewType;
+}
+
+export interface CommentNotificationType {
+  comment_id: string;
+  notification_data: MomentWithUserType;
+}
+
+export interface ThreadNotificationType extends CommentNotificationType {
+  parent_comment: string;
+}
+
 export type NotificationType = {
   actor: ProfilePreviewType;
   verbage: string;
   notification_type: TypeOfNotification;
-  notification_object: CommentType | CommentThreadType | MomentType | undefined;
+  notification_object:
+    | CommentNotificationType
+    | ThreadNotificationType
+    | MomentType
+    | undefined;
   timestamp: string;
   unread: boolean;
 };
@@ -200,7 +212,7 @@ export type TypeOfNotification =
   | 'FRD_ACPT'
   // notification_object is undefined
   | 'FRD_DEC'
-  // notification_object is CommentType || CommentThreadType
+  // notification_object is CommentNotificationType || ThreadNotificationType
   | 'CMT'
   // notification_object is MomentType
   | 'MOM_3+'