Done

3 files changed, 62 insertions, 23 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
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index 2354d18e..514ca776 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import RNFetchBlob from 'rn-fetch-blob';
 import {MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT} from '../constants';
-import {MomentType} from '../types';
+import {MomentType, MomentWithUserType} from '../types';
 import {checkImageUploadStatus} from '../utils';
 
 export const postMoment: (
@@ -78,6 +78,33 @@ export const loadMoments: (
   return moments;
 };
 
+export const loadSingleMoment: (
+  momentId: string,
+  token: string,
+) => Promise<MomentWithUserType | undefined> = async (momentId, token) => {
+  let moment: MomentWithUserType;
+  try {
+    const response = await fetch(MOMENTS_ENDPOINT + `${momentId}/`, {
+      method: 'GET',
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+    });
+    const status = response.status;
+    if (status === 200) {
+      const data = await response.json();
+      moment = data;
+    } else {
+      console.log('Could not load moments!');
+      return undefined;
+    }
+  } catch (err) {
+    console.log(err);
+    return undefined;
+  }
+  return moment;
+};
+
 export const deleteMoment = async (momentId: string) => {
   try {
     const token = await AsyncStorage.getItem('token');
diff --git a/src/types/types.ts b/src/types/types.ts
index f1ba12f4..e71c4e5c 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -88,6 +88,10 @@ export interface MomentType {
   thumbnail_url: string;
 }
 
+export interface MomentWithUserType extends MomentType {
+  user: ProfilePreviewType;
+}
+
 export interface CommentBaseType {
   comment_id: string;
   comment: string;