1 files changed, 30 insertions, 22 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 951a5bf6..077cdb64 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -8,8 +8,8 @@ import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 import {ERROR_DELETED_OBJECT} from '../../constants/strings';
 import {
   loadImageFromURL,
-  loadMoments,
   loadMomentThumbnail,
+  loadSingleMoment,
 } from '../../services';
 import {
   acceptFriendRequest,
@@ -19,7 +19,12 @@ import {
   updateUserXFriends,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {MomentType, NotificationType, ScreenType} from '../../types';
+import {
+  MomentType,
+  MomentWithUserType,
+  NotificationType,
+  ScreenType,
+} from '../../types';
 import {
   fetchUserX,
   getTokenOrLogout,
@@ -53,7 +58,6 @@ const Notification: React.FC<NotificationProps> = (props) => {
 
   const [avatar, setAvatar] = useState<string | undefined>(undefined);
   const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
-  const [onTapLoadProfile, setOnTapLoadProfile] = useState<boolean>(false);
 
   useEffect(() => {
     (async () => {
@@ -67,16 +71,6 @@ const Notification: React.FC<NotificationProps> = (props) => {
   }, []);
 
   useEffect(() => {
-    if (onTapLoadProfile) {
-      fetchUserX(dispatch, {userId: id, username: username}, screenType);
-    }
-    return () => {
-      setOnTapLoadProfile(false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onTapLoadProfile]);
-
-  useEffect(() => {
     let mounted = true;
     const loadMomentImage = async (moment_id: string) => {
       const response = await loadMomentThumbnail(moment_id);
@@ -139,23 +133,37 @@ const Notification: React.FC<NotificationProps> = (props) => {
         let moment: MomentType | undefined = loggedInUserMoments?.find(
           (m) => m.moment_id === moment_id,
         );
+
         let userXId;
 
-        // If moment does not belong to the logged in user, then the comment was probably a reply to logged in user's comment
-        // on userX's moment
-        // Load moments for userX
+        // 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) {
-          let moments: MomentType[] = [];
           try {
-            //Populate local state in the mean time
-            setOnTapLoadProfile(true);
             const token = await getTokenOrLogout(dispatch);
-            moments = await loadMoments(id, token);
+            const momentAndUser:
+              | MomentWithUserType
+              | undefined = (await loadSingleMoment(
+              moment_id,
+              token,
+            )) as MomentWithUserType;
+
+            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);
           }
-          moment = moments?.find((m) => m.moment_id === moment_id);
-          userXId = id;
         }
 
         //Now if moment was found, navigate to the respective moment