Merge branch 'master' into TMA-579-Redesign-Snapchat-Tiktok

# Conflicts:
#	src/components/common/TaggSquareButton.tsx

1 files changed, 70 insertions, 79 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 951a5bf6..c2c6c4e4 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,
-  loadMoments,
-  loadMomentThumbnail,
-} from '../../services';
+import {loadImageFromURL} from '../../services';
 import {
   acceptFriendRequest,
   declineFriendRequest,
@@ -19,19 +15,22 @@ import {
   updateUserXFriends,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {MomentType, NotificationType, ScreenType} from '../../types';
 import {
-  fetchUserX,
-  getTokenOrLogout,
-  SCREEN_HEIGHT,
-  userXInStore,
-} from '../../utils';
+  CommentNotificationType,
+  CommentThreadType,
+  MomentType,
+  NotificationType,
+  ScreenType,
+  ThreadNotificationType,
+  UserType,
+} from '../../types';
+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) => {
@@ -44,7 +43,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
       unread,
     },
     screenType,
-    moments: loggedInUserMoments,
+    loggedInUser,
   } = props;
 
   const navigation = useNavigation();
@@ -53,7 +52,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,40 +65,22 @@ 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);
-      if (mounted && response) {
-        setMomentURI(response);
-      } 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) {
+        setMomentURI(url);
+      }
     }
   }, [id, notification_object, notification_type]);
 
@@ -126,53 +106,64 @@ 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;
-        }
+        /**
+         * 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
+         */
 
-        // Now find the moment we need to display
-        let moment: MomentType | undefined = loggedInUserMoments?.find(
-          (m) => m.moment_id === moment_id,
-        );
+        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 logged in user's comment
-        // on userX's moment
-        // Load moments 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);
-          } catch (err) {
-            console.log(err);
-          }
-          moment = moments?.find((m) => m.moment_id === moment_id);
-          userXId = id;
+        // 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;
         }
 
-        //Now if moment was found, navigate to the respective moment
+        //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;
+        }
+
+        const {moment_id} = moment;
+
+        //STEP 3
         if (moment) {
-          if (notification_object?.parent_comment) {
-            dispatch(updateReplyPosted(notification_object));
+          if (reply) {
+            dispatch(updateReplyPosted(reply));
           }
           navigation.push('IndividualMoment', {
             moment,
-            userXId: userXId, // we're only viewing our own moment here
+            userXId,
             screenType,
           });
           setTimeout(() => {
             navigation.push('MomentCommentsScreen', {
-              moment_id: moment_id,
+              moment_id,
               screenType,
-              comment_id: comment_id,
+              comment_id,
             });
           }, 500);
         }