Merge pull request #209 from ashmgarv/tma-612-611-redesign-comments

[TMA 612/611] Frontend

10 files changed, 350 insertions, 108 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 44f49748..56011f05 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -8,10 +8,11 @@ import {
   View,
 } from 'react-native';
 import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {postComment} from '../../services';
+import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -38,6 +39,7 @@ const AddComment: React.FC<AddCommentProps> = ({
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
 
   const {avatar} = useSelector((state: RootState) => state.user);
+  const dispatch = useDispatch();
 
   const addComment = async () => {
     const trimmed = comment.trim();
@@ -52,6 +54,18 @@ const AddComment: React.FC<AddCommentProps> = ({
 
     if (postedComment) {
       setComment('');
+
+      //Set new reply posted object
+      //This helps us show the latest reply on top
+      //Data set is kind of stale but it works
+      if (isCommentInFocus) {
+        dispatch(
+          updateReplyPosted({
+            comment_id: postedComment.comment_id,
+            parent_comment: {comment_id: objectId},
+          }),
+        );
+      }
       setNewCommentsAvailable(true);
     }
   };
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index e775a609..be113523 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable radix */
 import React, {Fragment, useEffect, useRef, useState} from 'react';
 import {Text, View} from 'react-native-animatable';
 import {ProfilePreview} from '../profile';
@@ -6,19 +7,15 @@ import {Alert, Animated, StyleSheet} from 'react-native';
 import ClockIcon from '../../assets/icons/clock-icon-01.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {RectButton, TouchableOpacity} from 'react-native-gesture-handler';
-import {
-  getTimePosted,
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-} from '../../utils';
+import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
 import Arrow from '../../assets/icons/back-arrow-colored.svg';
 import Trash from '../../assets/ionicons/trash-outline.svg';
 import CommentsContainer from './CommentsContainer';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
-import {deleteComment} from '../../services';
+import {deleteComment, getCommentsCount} from '../../services';
 import {ERROR_FAILED_TO_DELETE_COMMENT} from '../../constants/strings';
-import {min} from 'moment';
+import {useSelector} from 'react-redux';
+import {RootState} from '../../store/rootReducer';
 
 /**
  * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
@@ -45,10 +42,13 @@ const CommentTile: React.FC<CommentTileProps> = ({
 }) => {
   const timePosted = getTimePosted(comment_object.date_created);
   const [showReplies, setShowReplies] = useState<boolean>(false);
+  const [showKeyboard, setShowKeyboard] = useState<boolean>(false);
   const [newThreadAvailable, setNewThreadAvailable] = useState(true);
   const swipeRef = useRef<Swipeable>(null);
   const isThread = typeOfComment === 'Thread';
 
+  const {replyPosted} = useSelector((state: RootState) => state.user);
+
   /**
    * Bubbling up, for handling a new comment in a thread.
    */
@@ -58,23 +58,43 @@ const CommentTile: React.FC<CommentTileProps> = ({
     }
   }, [newCommentsAvailable]);
 
+  useEffect(() => {
+    if (replyPosted && typeOfComment === 'Comment') {
+      if (replyPosted.parent_comment.comment_id === comment_object.comment_id) {
+        setShowReplies(true);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [replyPosted]);
+
   /**
    * Case : A COMMENT IS IN FOCUS && REPLY SECTION IS HIDDEN
    *     Bring the current comment to focus
    * Case : No COMMENT IS IN FOCUS && REPLY SECTION IS SHOWN
    *     Unfocus comment in focus
-   * In any case toggle value of showReplies
    */
-  const toggleReplies = () => {
-    if (setCommentObjectInFocus) {
-      if (!showReplies) {
-        setCommentObjectInFocus(comment_object);
-      } else {
-        setNewThreadAvailable(true);
-        setNewCommentsAvailable(true);
-        setCommentObjectInFocus(undefined);
+  const toggleAddComment = () => {
+    //Do not allow user to reply to a thread
+    if (!isThread) {
+      if (setCommentObjectInFocus) {
+        if (!showKeyboard) {
+          setCommentObjectInFocus(comment_object);
+        } else {
+          setCommentObjectInFocus(undefined);
+        }
       }
+      setShowKeyboard(!showKeyboard);
     }
+  };
+
+  const toggleReplies = async () => {
+    if (showReplies) {
+      //To update count of replies in case we deleted a reply
+      comment_object.replies_count = parseInt(
+        await getCommentsCount(comment_object.comment_id, true),
+      );
+    }
+    setNewThreadAvailable(true);
     setShowReplies(!showReplies);
   };
 
@@ -110,7 +130,7 @@ const CommentTile: React.FC<CommentTileProps> = ({
     );
   };
 
-  const renderRightActions = (progress) =>
+  const renderRightActions = (progress: Animated.AnimatedInterpolation) =>
     canDelete ? (
       <View style={styles.swipeActions}>
         {renderRightAction('Delete', '#c42634', progress)}
@@ -133,48 +153,42 @@ const CommentTile: React.FC<CommentTileProps> = ({
           previewType={'Comment'}
           screenType={screenType}
         />
-        <TouchableOpacity style={styles.body} onPress={toggleReplies}>
+        <TouchableOpacity style={styles.body} onPress={toggleAddComment}>
           <Text style={styles.comment}>{comment_object.comment}</Text>
           <View style={styles.clockIconAndTime}>
             <ClockIcon style={styles.clockIcon} />
             <Text style={styles.date_time}>{' ' + timePosted}</Text>
             <View style={styles.flexer} />
-
-            {/*** Show replies text only if there are some replies present */}
-            {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
-              <View style={styles.repliesTextAndIconContainer}>
-                <Text style={styles.repliesText}>{getRepliesText()}</Text>
-                <Arrow
-                  width={12}
-                  height={11}
-                  color={TAGG_LIGHT_BLUE}
-                  style={
-                    !showReplies
-                      ? styles.repliesDownArrow
-                      : styles.repliesUpArrow
-                  }
-                />
-              </View>
-            )}
           </View>
         </TouchableOpacity>
+        {/*** Show replies text only if there are some replies present */}
+        {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
+          <TouchableOpacity
+            style={styles.repliesTextAndIconContainer}
+            onPress={toggleReplies}>
+            <Text style={styles.repliesText}>{getRepliesText()}</Text>
+            <Arrow
+              width={12}
+              height={11}
+              color={TAGG_LIGHT_BLUE}
+              style={
+                !showReplies ? styles.repliesDownArrow : styles.repliesUpArrow
+              }
+            />
+          </TouchableOpacity>
+        )}
       </View>
 
       {/*** Show replies if toggle state is true */}
-      {showReplies && comment_object.replies_count > 0 && (
-        <View
-          style={{
-            height: Math.min(
-              SCREEN_HEIGHT / 2.4,
-              (SCREEN_HEIGHT / 7.5) * comment_object.replies_count,
-            ),
-          }}>
+      {showReplies && (
+        <View>
           <CommentsContainer
             objectId={comment_object.comment_id}
             screenType={screenType}
             setNewCommentsAvailable={setNewThreadAvailable}
             newCommentsAvailable={newThreadAvailable}
             typeOfComment={'Thread'}
+            commentId={replyPosted?.comment_id}
           />
         </View>
       )}
@@ -190,6 +204,7 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     flex: 1,
     paddingTop: '3%',
+    paddingBottom: '5%',
     marginLeft: '7%',
   },
   swipeActions: {
@@ -204,7 +219,6 @@ const styles = StyleSheet.create({
   comment: {
     marginBottom: '2%',
     marginRight: '2%',
-    top: -5,
   },
   date_time: {
     color: 'gray',
@@ -217,7 +231,7 @@ const styles = StyleSheet.create({
   },
   clockIconAndTime: {
     flexDirection: 'row',
-    marginBottom: '3%',
+    marginTop: '3%',
   },
   flexer: {
     flex: 1,
@@ -225,23 +239,25 @@ const styles = StyleSheet.create({
   repliesTextAndIconContainer: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginTop: '5%',
+    marginLeft: 56,
   },
   repliesText: {
     color: TAGG_LIGHT_BLUE,
     fontWeight: '500',
     fontSize: normalize(12),
-    marginRight: '5%',
+    marginRight: '1%',
   },
   repliesBody: {
     width: SCREEN_WIDTH,
   },
   repliesDownArrow: {
     transform: [{rotate: '270deg'}],
-    marginTop: '7%',
+    marginTop: '1%',
   },
   repliesUpArrow: {
     transform: [{rotate: '90deg'}],
-    marginTop: '7%',
+    marginTop: '1%',
   },
   actionText: {
     color: 'white',
diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
index a0e94828..c72da2b7 100644
--- a/src/components/comments/CommentsContainer.tsx
+++ b/src/components/comments/CommentsContainer.tsx
@@ -4,6 +4,7 @@ import {FlatList} from 'react-native-gesture-handler';
 import {useDispatch, useSelector} from 'react-redux';
 import {CommentTile} from '.';
 import {getComments} from '../../services';
+import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {CommentType, ScreenType, TypeOfComment} from '../../types';
 import {SCREEN_HEIGHT} from '../../utils';
@@ -41,36 +42,28 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
   const [commentsList, setCommentsList] = useState<CommentType[]>([]);
   const dispatch = useDispatch();
   const ref = useRef<FlatList<CommentType>>(null);
-  const [initialIndex, setInitialIndex] = useState<number>(0);
 
   useEffect(() => {
-    //Scroll only if a new comment and not a reply was posted
-    const shouldScroll = () =>
-      (typeOfComment === 'Comment' && !commentObjectInFocus) ||
-      typeOfComment === 'Thread';
     const loadComments = async () => {
-      const comments = await getComments(objectId, typeOfComment === 'Thread');
-      setCommentsList(comments);
-      if (setCommentsLength) {
-        setCommentsLength(comments.length);
-      }
-      setNewCommentsAvailable(false);
+      await getComments(objectId, typeOfComment === 'Thread').then(
+        (comments) => {
+          if (comments && subscribedToLoadComments) {
+            setCommentsList(comments);
+            if (setCommentsLength) {
+              setCommentsLength(comments.length);
+            }
+            setNewCommentsAvailable(false);
+          }
+        },
+      );
     };
+    let subscribedToLoadComments = true;
     if (newCommentsAvailable) {
       loadComments();
-      if (shouldScroll()) {
-        if (commentId) {
-          const index = commentsList.findIndex(
-            (item) => item.comment_id === commentId,
-          );
-          setInitialIndex(index);
-        } else {
-          setTimeout(() => {
-            ref.current?.scrollToEnd({animated: true});
-          }, 500);
-        }
-      }
     }
+    return () => {
+      subscribedToLoadComments = false;
+    };
   }, [
     dispatch,
     objectId,
@@ -78,12 +71,61 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
     setNewCommentsAvailable,
     setCommentsLength,
     typeOfComment,
-    commentObjectInFocus,
-    commentId,
-    commentsList,
   ]);
 
-  const ITEM_HEIGHT = SCREEN_HEIGHT / 7.5;
+  // eslint-disable-next-line no-shadow
+  const swapCommentTo = (commentId: string, toIndex: number) => {
+    const index = commentsList.findIndex(
+      (item) => item.comment_id === commentId,
+    );
+    if (index > 0) {
+      let comments = [...commentsList];
+      const temp = comments[index];
+      comments[index] = comments[toIndex];
+      comments[toIndex] = temp;
+      setCommentsList(comments);
+    }
+  };
+
+  useEffect(() => {
+    //Scroll only if a new comment and not a reply was posted
+    const shouldScroll = () =>
+      typeOfComment === 'Comment' && !commentObjectInFocus;
+
+    const performAction = () => {
+      if (commentId) {
+        swapCommentTo(commentId, 0);
+      } else if (shouldScroll()) {
+        setTimeout(() => {
+          ref.current?.scrollToEnd({animated: true});
+        }, 500);
+      }
+    };
+    if (commentsList) {
+      //Bring the relevant comment to top if a comment id is present else scroll if necessary
+      performAction();
+    }
+
+    //Clean up the reply id present in store
+    return () => {
+      if (commentId && typeOfComment === 'Thread') {
+        setTimeout(() => {
+          dispatch(updateReplyPosted(undefined));
+        }, 200);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [commentsList, commentId]);
+
+  //WIP : TODO : Bring the comment in focus above the keyboard
+  // useEffect(() => {
+  //   if (commentObjectInFocus && commentsList.length >= 3) {
+  //     swapCommentTo(commentObjectInFocus.comment_id, 2);
+  //   }
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [commentObjectInFocus]);
+
+  const ITEM_HEIGHT = SCREEN_HEIGHT / 7.0;
 
   const renderComment = ({item}: {item: CommentType}) => (
     <CommentTile
@@ -108,7 +150,6 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
       snapToInterval={ITEM_HEIGHT}
       renderItem={renderComment}
       showsVerticalScrollIndicator={false}
-      initialScrollIndex={initialIndex}
       contentContainerStyle={styles.scrollViewContent}
       getItemLayout={(data, index) => ({
         length: ITEM_HEIGHT,
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index f7192434..a3d1080b 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,18 +1,32 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Image, StyleSheet, Text, View} from 'react-native';
+import {Alert, Image, StyleSheet, Text, View} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
-import {useDispatch, useStore} from 'react-redux';
-import {loadImageFromURL, loadMomentThumbnail} from '../../services';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {ERROR_DELETED_OBJECT} from '../../constants/strings';
+import {
+  loadImageFromURL,
+  loadMoments,
+  loadMomentThumbnail,
+} from '../../services';
 import {
   acceptFriendRequest,
   declineFriendRequest,
   loadUserNotifications,
+  loadUserX,
+  loadUserXSpecifics,
+  updateReplyPosted,
   updateUserXFriends,
 } from '../../store/actions';
+import {NO_MOMENTS} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
 import {MomentType, NotificationType, ScreenType} from '../../types';
-import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
+import {
+  fetchUserX,
+  getTokenOrLogout,
+  SCREEN_HEIGHT,
+  userXInStore,
+} from '../../utils';
 import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
 
 interface NotificationProps {
@@ -41,6 +55,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
   const [avatar, setAvatar] = useState<string | undefined>(undefined);
   const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
   const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)';
+  const [onTapLoadProfile, setOnTapLoadProfile] = useState<boolean>(false);
 
   useEffect(() => {
     (async () => {
@@ -52,6 +67,22 @@ const Notification: React.FC<NotificationProps> = (props) => {
   }, []);
 
   useEffect(() => {
+    if (onTapLoadProfile) {
+      dispatch(
+        loadUserXSpecifics(
+          {userId: id, username: username},
+          ['Profile', 'Moments'],
+          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);
@@ -60,7 +91,11 @@ const Notification: React.FC<NotificationProps> = (props) => {
       }
     };
     if (notification_type === 'CMT' && notification_object) {
-      loadMomentImage(notification_object.moment_id);
+      loadMomentImage(
+        notification_object.moment_id
+          ? notification_object.moment_id
+          : notification_object.parent_comment.moment_id,
+      );
       return () => {
         mounted = false;
       };
@@ -84,35 +119,48 @@ const Notification: React.FC<NotificationProps> = (props) => {
         });
         break;
       case 'CMT':
-        // find the moment we need to display
+        //Notification object is set to null if the comment / comment_thread / moment gets deleted
+        if (!notification_object) {
+          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 === notification_object?.moment_id,
+          (m) => m.moment_id === moment_id,
         );
         let userXId;
 
-        //This needs to be done if user replies to a comment on a moment that is not user's own moment
+        // 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 {
-            if (!userXInStore(state, screenType, id)) {
-              await fetchUserX(
-                dispatch,
-                {userId: id, username: username},
-                screenType,
-              );
-            }
-
-            //Wait for data to be loaded
-            setTimeout(() => {}, 200);
-            const {moments} = state.userX[screenType][id];
-            moment = moments?.find(
-              (m) => m.moment_id === notification_object?.moment_id,
-            );
-            userXId = id;
+            //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;
         }
+
+        //Now if moment was found, navigate to the respective moment
         if (moment) {
+          if (notification_object?.parent_comment) {
+            dispatch(updateReplyPosted(notification_object));
+          }
           navigation.push('IndividualMoment', {
             moment,
             userXId: userXId, // we're only viewing our own moment here
@@ -120,9 +168,9 @@ const Notification: React.FC<NotificationProps> = (props) => {
           });
           setTimeout(() => {
             navigation.push('MomentCommentsScreen', {
-              moment_id: moment.moment_id,
+              moment_id: moment_id,
               screenType,
-              comment_id: notification_object?.comment_id,
+              comment_id: comment_id,
             });
           }, 500);
         }
@@ -133,7 +181,9 @@ const Notification: React.FC<NotificationProps> = (props) => {
   };
 
   const handleAcceptRequest = async () => {
-    await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
+    await dispatch(
+      acceptFriendRequest({id, username, first_name, last_name, thumbnail_url}),
+    );
     await dispatch(updateUserXFriends(id, state));
     dispatch(loadUserNotifications());
   };
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index b0886513..9680320a 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -10,6 +10,7 @@ export const ERROR_CATEGORY_CREATION = 'There was a problem creating your catego
 export const ERROR_CATEGORY_UPDATE = 'There was a problem updating your categories. Please refresh and try again';
 export const ERROR_DELETE_CATEGORY = 'There was a problem while deleting category. Please try again';
 export const ERROR_DELETE_MOMENT = 'Unable to delete moment, please try again later!';
+export const ERROR_DELETED_OBJECT = 'Oh sad! Looks like the comment / moment was deleted by the user';
 export const ERROR_DOUBLE_CHECK_CONNECTION = 'Please double-check your network connection and retry';
 export const ERROR_DUP_OLD_PWD = 'You may not use a previously used password';
 export const ERROR_EMAIL_IN_USE = 'Email already in use, please try another one';
@@ -52,4 +53,4 @@ export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n con
 export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile';
 export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!';
 export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category';
-export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!';
+export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!';
\ No newline at end of file
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index 0b1ea789..5f49a103 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -1,3 +1,4 @@
+import { CommentThreadType } from './../../types/types';
 import {RootState} from '../rootReducer';
 import {UserType} from '../../types/types';
 import {loadProfileInfo, loadAvatar, loadCover} from '../../services';
@@ -9,6 +10,7 @@ import {
   profileCompletionStageUpdated,
   setIsOnboardedUser,
   setNewNotificationReceived,
+  setReplyPosted,
 } from '../reducers';
 import {getTokenOrLogout} from '../../utils';
 
@@ -111,6 +113,21 @@ export const updateNewNotificationReceived = (
   }
 };
 
+export const updateReplyPosted = (
+  replyPosted: CommentThreadType | undefined,
+): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
+  dispatch,
+) => {
+  try {
+    dispatch({
+      type: setReplyPosted.type,
+      payload: {replyPosted},
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 export const logout = (): ThunkAction<
   Promise<void>,
   RootState,
diff --git a/src/store/actions/userX.ts b/src/store/actions/userX.ts
index 07bea678..af8188f1 100644
--- a/src/store/actions/userX.ts
+++ b/src/store/actions/userX.ts
@@ -1,3 +1,4 @@
+import {UserXSpecifics} from './../../types/types';
 import {userXInStore} from './../../utils/';
 import {getTokenOrLogout, loadAllSocialsForUser} from './../../utils';
 import {UserType, ScreenType} from '../../types/types';
@@ -85,6 +86,86 @@ export const loadUserX = (
   }
 };
 
+export const loadUserXSpecifics = (
+  user: UserType,
+  specifics: UserXSpecifics[],
+  screenType: ScreenType,
+): ThunkAction<Promise<void>, RootState, unknown, Action<string>> => async (
+  dispatch,
+) => {
+  const {userId} = user;
+  await dispatch({type: userXRequested.type, payload: {screenType, userId}});
+  await dispatch({
+    type: userXUserFetched.type,
+    payload: {screenType, userId, user},
+  });
+  const token = await getTokenOrLogout(dispatch);
+  for (let specific of specifics) {
+    switch (specific) {
+      case 'Profile':
+        console.log(specific);
+        loadProfileInfo(token, userId).then((data) => {
+          dispatch({
+            type: userXProfileFetched.type,
+            payload: {screenType, userId, data},
+          });
+        });
+        break;
+      case 'Socials':
+        loadAllSocialsForUser(userId).then((data) =>
+          dispatch({
+            type: userXSocialsFetched.type,
+            payload: {screenType, userId, data},
+          }),
+        );
+        break;
+      case 'Avatar':
+        loadAvatar(userId, false).then((data) =>
+          dispatch({
+            type: userXAvatarFetched.type,
+            payload: {screenType, userId, data},
+          }),
+        );
+        break;
+      case 'Cover':
+        loadCover(token, userId).then((data) =>
+          dispatch({
+            type: userXCoverFetched.type,
+            payload: {screenType, userId, data},
+          }),
+        );
+        break;
+      case 'Friends':
+        loadFriends(userId, token).then((data) =>
+          dispatch({
+            type: userXFriendsFetched.type,
+            payload: {screenType, userId, data},
+          }),
+        );
+        break;
+      case 'Moments':
+        console.log(specific);
+        loadMoments(userId, token).then((data) =>
+          dispatch({
+            type: userXMomentsFetched.type,
+            payload: {screenType, userId, data},
+          }),
+        );
+        break;
+      case 'MomentCategories':
+        loadMomentCategories(userId, token).then((data) => {
+          dispatch({
+            type: userXMomentCategoriesFetched.type,
+            payload: {screenType, userId, data},
+          });
+        });
+        break;
+      default:
+        break;
+    }
+  }
+};
+
 export const updateUserXFriends = (
   userId: string,
   state: RootState,
diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts
index 2a5b76db..8d137a5d 100644
--- a/src/store/initialStates.ts
+++ b/src/store/initialStates.ts
@@ -1,3 +1,4 @@
+import {CommentThreadType} from './../types/types';
 import {
   ExploreSectionType,
   MomentType,
@@ -44,6 +45,7 @@ export const NO_USER_DATA = {
   cover: <string | null>'',
   isOnboardedUser: false,
   newNotificationReceived: false,
+  replyPosted: <CommentThreadType | undefined>undefined,
 };
 
 export const NO_FRIENDS_DATA = {
diff --git a/src/store/reducers/userReducer.ts b/src/store/reducers/userReducer.ts
index ce497677..1e575339 100644
--- a/src/store/reducers/userReducer.ts
+++ b/src/store/reducers/userReducer.ts
@@ -53,6 +53,10 @@ const userDataSlice = createSlice({
     setNewNotificationReceived: (state, action) => {
       state.newNotificationReceived = action.payload.newNotificationReceived;
     },
+
+    setReplyPosted: (state, action) => {
+      state.replyPosted = action.payload.replyPosted;
+    },
   },
 });
 
@@ -63,5 +67,6 @@ export const {
   profileCompletionStageUpdated,
   setIsOnboardedUser,
   setNewNotificationReceived,
+  setReplyPosted,
 } = userDataSlice.actions;
 export const userDataReducer = userDataSlice.reducer;
diff --git a/src/types/types.ts b/src/types/types.ts
index 1d800423..e9abc789 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -88,13 +88,20 @@ export interface MomentType {
   thumbnail_url: string;
 }
 
-export interface CommentType {
+export interface CommentBaseType {
   comment_id: string;
   comment: string;
   date_created: string;
+  commenter: ProfilePreviewType;
+}
+
+export interface CommentType extends CommentBaseType {
   moment_id: string;
   replies_count: number;
-  commenter: ProfilePreviewType;
+}
+
+export interface CommentThreadType extends CommentBaseType {
+  parent_comment: CommentType;
 }
 
 export type PreviewType =
@@ -173,9 +180,17 @@ export type NotificationType = {
   actor: ProfilePreviewType;
   verbage: string;
   notification_type: 'DFT' | 'FRD_REQ' | 'FRD_ACPT' | 'FRD_DEC' | 'CMT';
-  notification_object: CommentType | undefined;
+  notification_object: CommentType | CommentThreadType | undefined;
   timestamp: string;
   unread: boolean;
 };
 
 export type TypeOfComment = 'Comment' | 'Thread';
+export type UserXSpecifics =
+  | 'Profile'
+  | 'Socials'
+  | 'Avatar'
+  | 'Cover'
+  | 'Friends'
+  | 'Moments'
+  | 'MomentCategories';