From 755f4f540d3e759ff9ad3bc35c64b6f7fc83998b Mon Sep 17 00:00:00 2001
From: Ashm Walia <ashmwalia@outlook.com>
Date: Mon, 25 Jan 2021 18:00:44 -0800
Subject: Add provision to show and hide replies

---
 src/components/comments/AddComment.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 24b3473c..7b04085d 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -24,11 +24,13 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 export interface AddCommentProps {
   setNewCommentsAvailable: Function;
   moment_id: string;
+  placeholderText: string;
 }
 
 const AddComment: React.FC<AddCommentProps> = ({
   setNewCommentsAvailable,
   moment_id,
+  placeholderText,
 }) => {
   const [comment, setComment] = React.useState('');
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
@@ -83,7 +85,7 @@ const AddComment: React.FC<AddCommentProps> = ({
           />
           <TextInput
             style={styles.text}
-            placeholder="Add a comment..."
+            placeholder={placeholderText}
             placeholderTextColor="grey"
             onChangeText={setComment}
             value={comment}
-- 
cgit v1.2.3-70-g09d2


From 85c0f668665696ba8127ee1ea436d10ec0af955f Mon Sep 17 00:00:00 2001
From: Ashm Walia <ashmwalia@outlook.com>
Date: Wed, 27 Jan 2021 08:24:43 -0800
Subject: Pre-final

---
 src/components/comments/AddComment.tsx       |  34 +++++---
 src/components/comments/CommentTile.tsx      | 113 +++++++++++++++------------
 src/components/moments/MomentPostContent.tsx |   8 +-
 src/constants/api.ts                         |   1 +
 src/routes/Routes.tsx                        |   2 +-
 src/screens/profile/MomentCommentsScreen.tsx |  23 +++++-
 src/services/MomentServices.ts               |   8 ++
 src/services/index.ts                        |   1 +
 src/types/types.ts                           |   1 +
 9 files changed, 122 insertions(+), 69 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 7b04085d..86f4170c 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {
   Image,
   Keyboard,
@@ -11,7 +11,7 @@ import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
-import {postMomentComment} from '../../services';
+import {postComment} from '../../services';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -23,28 +23,27 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 export interface AddCommentProps {
   setNewCommentsAvailable: Function;
-  moment_id: string;
+  objectId: string;
   placeholderText: string;
+  isThreadInFocus: boolean;
 }
 
 const AddComment: React.FC<AddCommentProps> = ({
   setNewCommentsAvailable,
-  moment_id,
+  objectId,
   placeholderText,
+  isThreadInFocus,
 }) => {
   const [comment, setComment] = React.useState('');
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
 
-  const {
-    avatar,
-    user: {userId},
-  } = useSelector((state: RootState) => state.user);
+  const {avatar} = useSelector((state: RootState) => state.user);
 
-  const postComment = async () => {
-    const postedComment = await postMomentComment(
-      userId,
+  const addComment = async () => {
+    const postedComment = await postComment(
       comment.trim(),
-      moment_id,
+      objectId,
+      isThreadInFocus,
     );
 
     if (postedComment) {
@@ -65,6 +64,13 @@ const AddComment: React.FC<AddCommentProps> = ({
     return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
   }, []);
 
+  const ref = useRef<TextInput>(null);
+  useEffect(() => {
+    if (isThreadInFocus) {
+      ref.current?.focus();
+    }
+  }, [isThreadInFocus]);
+
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -91,9 +97,10 @@ const AddComment: React.FC<AddCommentProps> = ({
             value={comment}
             autoCorrect={false}
             multiline={true}
+            ref={ref}
           />
           <View style={styles.submitButton}>
-            <TouchableOpacity style={styles.submitButton} onPress={postComment}>
+            <TouchableOpacity style={styles.submitButton} onPress={addComment}>
               <UpArrowIcon width={35} height={35} color={'white'} />
             </TouchableOpacity>
           </View>
@@ -102,6 +109,7 @@ const AddComment: React.FC<AddCommentProps> = ({
     </KeyboardAvoidingView>
   );
 };
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#f7f7f7',
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 4221fd54..f11c5e33 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -3,17 +3,12 @@ import {Text, View} from 'react-native-animatable';
 import {ProfilePreview} from '../profile';
 import {CommentType, ScreenType, TypeOfComment} from '../../types';
 import {StyleSheet} from 'react-native';
-import {
-  getTimePosted,
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
-} from '../../utils';
 import ClockIcon from '../../assets/icons/clock-icon-01.svg';
 import {COMMENT_REPLIES} from '../../constants';
-import BackIcon from '../../assets/icons/back-arrow-colored.svg';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-// import CommentsContainer from './CommentsContainer';
+import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
+import Arrow from '../../assets/icons/back-arrow-colored.svg';
+import CommentsContainer from './CommentsContainer';
 
 /**
  * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
@@ -23,21 +18,43 @@ interface CommentTileProps {
   comment_object: CommentType;
   screenType: ScreenType;
   typeOfComment: TypeOfComment;
+  setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
 }
 
 const CommentTile: React.FC<CommentTileProps> = ({
   comment_object,
   screenType,
   typeOfComment,
+  setCommentObjectInFocus,
 }) => {
   const timePosted = getTimePosted(comment_object.date_created);
   const [showReplies, setShowReplies] = useState<boolean>(false);
 
-  const isThread = typeOfComment === 'Thread';
+  const toggleReplies = () => {
+    if (setCommentObjectInFocus) {
+      if (!showReplies) {
+        setCommentObjectInFocus(comment_object);
+      } else {
+        setCommentObjectInFocus(undefined);
+      }
+    }
+    setShowReplies(!showReplies);
+  };
+
+  const getRepliesText = () =>
+    showReplies
+      ? 'Hide'
+      : comment_object.replies_count > 0
+      ? `Replies (${comment_object.replies_count})`
+      : 'Replies';
 
   return (
     <>
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          typeOfComment === 'Thread' ? styles.moreMarginWithThread : {},
+        ]}>
         <ProfilePreview
           profilePreview={{
             id: comment_object.commenter.id,
@@ -48,70 +65,66 @@ const CommentTile: React.FC<CommentTileProps> = ({
           previewType={'Comment'}
           screenType={screenType}
         />
-        <View style={styles.body}>
+        <TouchableOpacity style={styles.body} onPress={toggleReplies}>
           <Text style={styles.comment}>{comment_object.comment}</Text>
           <View style={styles.clockIconAndTime}>
             <ClockIcon style={styles.clockIcon} />
             <Text style={styles.date_time}>{' ' + timePosted}</Text>
-            {typeOfComment === 'Comment' && (
-              <>
-                <TouchableOpacity
-                  onPress={() => {
-                    setShowReplies(!showReplies);
-                  }}>
-                  <View style={styles.repliesTextAndIconContainer}>
-                    <Text style={styles.repliesText}>
-                      {showReplies ? 'Hide' : 'Replies'}
-                    </Text>
-                    <BackIcon
-                      width={12}
-                      height={11}
-                      color={COMMENT_REPLIES}
-                      style={
-                        !showReplies
-                          ? styles.repliesDownArrow
-                          : styles.repliesUpArrow
-                      }
-                    />
-                  </View>
-                </TouchableOpacity>
-              </>
+            <View style={styles.flexer} />
+            {typeOfComment === 'Comment' && comment_object.replies_count > 0 && (
+              <View style={styles.repliesTextAndIconContainer}>
+                <Text style={styles.repliesText}>{getRepliesText()}</Text>
+                <Arrow
+                  width={12}
+                  height={11}
+                  color={COMMENT_REPLIES}
+                  style={
+                    !showReplies
+                      ? styles.repliesDownArrow
+                      : styles.repliesUpArrow
+                  }
+                />
+              </View>
             )}
           </View>
-        </View>
+        </TouchableOpacity>
       </View>
-      {/* {showReplies && (
-        <View style={styles.repliesBody}>
+      {showReplies && (
+        <View
+          style={{
+            width: SCREEN_WIDTH,
+          }}>
           <CommentsContainer
-            moment_id={'5a9d6023-bc62-4588-a3dc-8de2c9c370e0'}
+            objectId={comment_object.comment_id}
             screenType={screenType}
-            setNewCommentsAvailable={(value: boolean) => {
-              console.log(value);
-            }}
+            setNewCommentsAvailable={() => {}}
             newCommentsAvailable={true}
             typeOfComment={'Thread'}
           />
         </View>
-      )} */}
+      )}
     </>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    marginLeft: '3%',
-    marginRight: '3%',
+    marginHorizontal: '3%',
     borderBottomWidth: 1,
     borderColor: 'lightgray',
     marginBottom: '3%',
+    flexDirection: 'column',
+    flex: 1,
+  },
+  moreMarginWithThread: {
+    marginHorizontal: '7%',
   },
   body: {
     marginLeft: 56,
   },
   comment: {
-    position: 'relative',
-    top: -5,
     marginBottom: '2%',
+    top: -5,
   },
   date_time: {
     color: 'gray',
@@ -127,9 +140,13 @@ const styles = StyleSheet.create({
     marginBottom: '3%',
   },
 
+  flexer: {
+    flex: 1,
+  },
+
   repliesTextAndIconContainer: {
-    marginLeft: SCREEN_WIDTH * 0.37,
     flexDirection: 'row',
+    alignItems: 'center',
   },
 
   repliesText: {
@@ -138,10 +155,8 @@ const styles = StyleSheet.create({
     fontSize: normalize(12),
     marginRight: '3%',
   },
-
   repliesBody: {
     width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT * 0.8,
   },
 
   repliesDownArrow: {
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 508b6d9f..d68ceaa3 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
-import {getMomentCommentsCount} from '../../services';
+import {getCommentsCount} from '../../services';
 import {ScreenType} from '../../types';
 import {getTimePosted, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {CommentsCount} from '../comments';
@@ -24,8 +24,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   const [comments_count, setCommentsCount] = React.useState('');
 
   useEffect(() => {
+    const fetchCommentsCount = async () => {
+      const count = await getCommentsCount(momentId, false);
+      setCommentsCount(count);
+    };
     setElapsedTime(getTimePosted(dateTime));
-    getMomentCommentsCount(momentId, setCommentsCount);
+    fetchCommentsCount();
   }, [dateTime, momentId]);
 
   return (
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 701070eb..32631be0 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -30,6 +30,7 @@ export const MOMENT_CATEGORY_ENDPOINT: string = API_URL + 'moment-category/';
 export const NOTIFICATIONS_ENDPOINT: string = API_URL + 'notifications/';
 export const DISCOVER_ENDPOINT: string = API_URL + 'discover/';
 export const WAITLIST_USER_ENDPOINT: string = API_URL + 'waitlist-user/';
+export const COMMENT_THREAD_ENDPOINT: string = API_URL + 'reply/';
 
 // Register as FCM device
 export const FCM_ENDPOINT: string = API_URL + 'fcm/';
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index a14f1576..536c7d04 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -33,7 +33,7 @@ const Routes: React.FC = () => {
     });
 
     if (!userId) {
-      userLogin(dispatch, {userId: '', username: ''});
+      // userLogin(dispatch, {userId: '', username: ''});
     } else {
       SplashScreen.hide();
     }
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 9fd5aaa0..764b9228 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -6,7 +6,9 @@ import BackIcon from '../../assets/icons/back-arrow.svg';
 import {TabsGradient} from '../../components';
 import {AddComment} from '../../components/';
 import CommentsContainer from '../../components/comments/CommentsContainer';
+import {ADD_COMMENT_TEXT} from '../../constants/strings';
 import {MainStackParams} from '../../routes/main';
+import {CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
@@ -27,8 +29,12 @@ interface MomentCommentsScreenProps {
 const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const {moment_id, screenType} = route.params;
-  const [newCommentsAvailable, setNewCommentsAvailable] = useState(true);
+
   const [commentsLength, setCommentsLength] = useState<number>(0);
+  const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
+  const [commentObjectInFocus, setCommentObjectInFocus] = useState<
+    CommentType | undefined
+  >(undefined);
 
   return (
     <View style={styles.background}>
@@ -45,17 +51,26 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
         </View>
         <View style={styles.body}>
           <CommentsContainer
-            moment_id={moment_id}
+            objectId={moment_id}
             screenType={screenType}
             setCommentsLength={setCommentsLength}
             newCommentsAvailable={newCommentsAvailable}
             setNewCommentsAvailable={setNewCommentsAvailable}
+            setCommentObjectInFocus={setCommentObjectInFocus}
+            commentObjectInFocus={commentObjectInFocus}
             typeOfComment={'Comment'}
           />
           <AddComment
-            placeholderText={'Add a comment..'}
+            placeholderText={
+              commentObjectInFocus
+                ? ADD_COMMENT_TEXT(commentObjectInFocus.commenter.username)
+                : ADD_COMMENT_TEXT()
+            }
             setNewCommentsAvailable={setNewCommentsAvailable}
-            moment_id={moment_id}
+            objectId={
+              commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
+            }
+            isThreadInFocus={commentObjectInFocus ? true : false}
           />
         </View>
       </SafeAreaView>
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 77740e7e..8399eea3 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -1,5 +1,6 @@
 import {CommentType} from './../types/types';
 import AsyncStorage from '@react-native-community/async-storage';
+<<<<<<< Updated upstream
 import {Alert} from 'react-native';
 import RNFetchBlob from 'rn-fetch-blob';
 import {
@@ -96,6 +97,13 @@ export const getMomentCommentsCount = async (
   }
 };
 
+=======
+import RNFetchBlob from 'rn-fetch-blob';
+import {MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT} from '../constants';
+import {MomentType} from '../types';
+import {checkImageUploadStatus} from '../utils';
+
+>>>>>>> Stashed changes
 export const postMoment: (
   fileName: string,
   uri: string,
diff --git a/src/services/index.ts b/src/services/index.ts
index 56cefddd..f558247f 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -9,3 +9,4 @@ export * from './MomentCategoryService';
 export * from './NotificationService';
 export * from './FCMService';
 export * from './WaitlistUserService';
+export * from './CommentService';
diff --git a/src/types/types.ts b/src/types/types.ts
index b29ecbd9..0c0f9d8b 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -91,6 +91,7 @@ export interface CommentType {
   comment: string;
   date_created: string;
   moment_id: string;
+  replies_count: number;
   commenter: ProfilePreviewType;
 }
 
-- 
cgit v1.2.3-70-g09d2


From 2f5f9df6dec1e905f3abf37d124ecd92d0e3a3d9 Mon Sep 17 00:00:00 2001
From: Ashm Walia <ashmwalia@outlook.com>
Date: Wed, 27 Jan 2021 08:29:56 -0800
Subject: Pre-final

---
 src/components/comments/AddComment.tsx        |  17 +++--
 src/components/comments/CommentTile.tsx       |  14 ++++
 src/components/comments/CommentsContainer.tsx |  37 +++++++---
 src/constants/strings.ts                      |   2 +
 src/routes/Routes.tsx                         |   2 +-
 src/screens/profile/MomentCommentsScreen.tsx  |   5 +-
 src/services/CommentService.ts                | 101 ++++++++++++++++++++++++++
 src/services/MomentServices.ts                | 100 -------------------------
 8 files changed, 158 insertions(+), 120 deletions(-)
 create mode 100644 src/services/CommentService.ts

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 86f4170c..46086e81 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -25,14 +25,14 @@ export interface AddCommentProps {
   setNewCommentsAvailable: Function;
   objectId: string;
   placeholderText: string;
-  isThreadInFocus: boolean;
+  isCommentInFocus: boolean;
 }
 
 const AddComment: React.FC<AddCommentProps> = ({
   setNewCommentsAvailable,
   objectId,
   placeholderText,
-  isThreadInFocus,
+  isCommentInFocus,
 }) => {
   const [comment, setComment] = React.useState('');
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
@@ -43,7 +43,7 @@ const AddComment: React.FC<AddCommentProps> = ({
     const postedComment = await postComment(
       comment.trim(),
       objectId,
-      isThreadInFocus,
+      isCommentInFocus,
     );
 
     if (postedComment) {
@@ -65,11 +65,13 @@ const AddComment: React.FC<AddCommentProps> = ({
   }, []);
 
   const ref = useRef<TextInput>(null);
+
+  //If a comment is in Focus, bring the keyboard up so user is able to type in a reply
   useEffect(() => {
-    if (isThreadInFocus) {
+    if (isCommentInFocus) {
       ref.current?.focus();
     }
-  }, [isThreadInFocus]);
+  }, [isCommentInFocus]);
 
   return (
     <KeyboardAvoidingView
@@ -78,7 +80,7 @@ const AddComment: React.FC<AddCommentProps> = ({
       <View
         style={[
           styles.container,
-          keyboardVisible ? {backgroundColor: '#fff'} : {},
+          keyboardVisible ? styles.whiteBackround : {},
         ]}>
         <View style={styles.textContainer}>
           <Image
@@ -150,6 +152,9 @@ const styles = StyleSheet.create({
     marginVertical: '2%',
     alignSelf: 'flex-end',
   },
+  whiteBackround: {
+    backgroundColor: '#fff',
+  },
 });
 
 export default AddComment;
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index f11c5e33..9a1607f7 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -30,6 +30,13 @@ const CommentTile: React.FC<CommentTileProps> = ({
   const timePosted = getTimePosted(comment_object.date_created);
   const [showReplies, setShowReplies] = useState<boolean>(false);
 
+  /**
+   * 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) {
@@ -41,6 +48,9 @@ const CommentTile: React.FC<CommentTileProps> = ({
     setShowReplies(!showReplies);
   };
 
+  /**
+   * Method to compute text to be shown for replies button
+   */
   const getRepliesText = () =>
     showReplies
       ? 'Hide'
@@ -71,6 +81,8 @@ const CommentTile: React.FC<CommentTileProps> = ({
             <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>
@@ -89,6 +101,8 @@ const CommentTile: React.FC<CommentTileProps> = ({
           </View>
         </TouchableOpacity>
       </View>
+
+      {/*** Show replies if toggle state is true */}
       {showReplies && (
         <View
           style={{
diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
index 81ae8e1e..5aa32511 100644
--- a/src/components/comments/CommentsContainer.tsx
+++ b/src/components/comments/CommentsContainer.tsx
@@ -3,54 +3,66 @@ import {StyleSheet} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import {useDispatch} from 'react-redux';
 import {CommentTile} from '.';
-import {getMomentComments} from '../../services';
+import {getComments} from '../../services';
 import {CommentType, ScreenType, TypeOfComment} from '../../types';
 export type CommentsContainerProps = {
   screenType: ScreenType;
-  moment_id: string;
+
+  //objectId can be either moment_id or comment_id
+  objectId: string;
   setCommentsLength?: (count: number) => void;
   newCommentsAvailable: boolean;
   setNewCommentsAvailable: (value: boolean) => void;
   typeOfComment: TypeOfComment;
+  setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
+  commentObjectInFocus?: CommentType;
 };
 
+/**
+ * Comments Container to be used for both comments and replies
+ */
+
 const CommentsContainer: React.FC<CommentsContainerProps> = ({
   screenType,
-  moment_id,
+  objectId,
   setCommentsLength,
   newCommentsAvailable,
   setNewCommentsAvailable,
   typeOfComment,
+  setCommentObjectInFocus,
+  commentObjectInFocus,
 }) => {
   const [commentsList, setCommentsList] = useState<CommentType[]>([]);
   const dispatch = useDispatch();
   const ref = useRef<ScrollView>(null);
 
   useEffect(() => {
+    //Scroll only if a new comment and not a reply was posted
+    const shouldScroll = () =>
+      typeOfComment === 'Comment' && !commentObjectInFocus;
     const loadComments = async () => {
-      console.log(moment_id);
-      const comments = await getMomentComments(moment_id);
+      const comments = await getComments(objectId, typeOfComment === 'Thread');
       setCommentsList(comments);
       if (setCommentsLength) {
         setCommentsLength(comments.length);
       }
-      console.log(comments);
       setNewCommentsAvailable(false);
     };
     if (newCommentsAvailable) {
       loadComments();
-      setTimeout(() => {
-        ref.current?.scrollToEnd({
-          animated: true,
-        });
-      }, 500);
+      if (shouldScroll()) {
+        setTimeout(() => {
+          ref.current?.scrollToEnd();
+        }, 500);
+      }
     }
   }, [
     dispatch,
-    moment_id,
+    objectId,
     newCommentsAvailable,
     setNewCommentsAvailable,
     setCommentsLength,
+    typeOfComment,
   ]);
 
   return (
@@ -65,6 +77,7 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
             comment_object={comment}
             screenType={screenType}
             typeOfComment={typeOfComment}
+            setCommentObjectInFocus={setCommentObjectInFocus}
           />
         ))}
     </ScrollView>
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index a1793658..77ded7be 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -1,7 +1,9 @@
+
 /* eslint-disable */
 // Below is the regex to convert this into a csv for the Google Sheet
 // export const (.*) = .*?(['|"|`])(.*)\2;
 // replace with: $1\t$3
+export const ADD_COMMENT_TEXT = (username?: string) => username ? `Reply to ${username}` : 'Add a comment...'
 export const COMING_SOON_MSG = 'Creating more fun things for you, surprises coming soon 😉';
 export const ERROR_AUTHENTICATION = 'An error occurred during authentication. Please login again!';
 export const ERROR_CATEGORY_CREATION = 'There was a problem creating your categories. Please refresh and try again.';
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index 536c7d04..a14f1576 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -33,7 +33,7 @@ const Routes: React.FC = () => {
     });
 
     if (!userId) {
-      // userLogin(dispatch, {userId: '', username: ''});
+      userLogin(dispatch, {userId: '', username: ''});
     } else {
       SplashScreen.hide();
     }
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 764b9228..58422f0f 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -30,8 +30,11 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const {moment_id, screenType} = route.params;
 
+  //Receives comment length from child CommentsContainer
   const [commentsLength, setCommentsLength] = useState<number>(0);
   const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
+
+  //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
   const [commentObjectInFocus, setCommentObjectInFocus] = useState<
     CommentType | undefined
   >(undefined);
@@ -70,7 +73,7 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
             objectId={
               commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
             }
-            isThreadInFocus={commentObjectInFocus ? true : false}
+            isCommentInFocus={commentObjectInFocus ? true : false}
           />
         </View>
       </SafeAreaView>
diff --git a/src/services/CommentService.ts b/src/services/CommentService.ts
new file mode 100644
index 00000000..3baf0305
--- /dev/null
+++ b/src/services/CommentService.ts
@@ -0,0 +1,101 @@
+import AsyncStorage from '@react-native-community/async-storage';
+import {Alert} from 'react-native';
+import {COMMENTS_ENDPOINT, COMMENT_THREAD_ENDPOINT} from '../constants';
+import {ERROR_FAILED_TO_COMMENT} from '../constants/strings';
+import {CommentType} from '../types';
+
+export const getComments = async (
+  objectId: string,
+  fetchThreads: boolean,
+): Promise<CommentType[]> => {
+  let comments: CommentType[] = [];
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const endpoint = fetchThreads
+      ? COMMENT_THREAD_ENDPOINT + '?comment_id='
+      : COMMENTS_ENDPOINT + '?moment_id=';
+    const response = await fetch(endpoint + objectId, {
+      method: 'GET',
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+    });
+    const status = response.status;
+    if (status === 200) {
+      comments = await response.json();
+      console.log(comments[0]);
+    } else {
+      console.log('Could not load comments');
+    }
+  } catch (error) {
+    console.log('Could not load comments', error);
+  }
+  return comments;
+};
+
+export const postComment = async (
+  comment: string,
+  objectId: string,
+  postThread: boolean,
+) => {
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const request = new FormData();
+    request.append('comment', comment);
+    if (postThread) {
+      request.append('comment_id', objectId);
+    } else {
+      request.append('moment_id', objectId);
+    }
+    const endpoint = postThread ? COMMENT_THREAD_ENDPOINT : COMMENTS_ENDPOINT;
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+      body: request,
+    });
+    if (response.status !== 200) {
+      throw 'server error';
+    }
+    return await response.json();
+  } catch (error) {
+    Alert.alert(ERROR_FAILED_TO_COMMENT);
+    return undefined;
+  }
+};
+
+//Get count of comments for a moment
+export const getCommentsCount = async (
+  objectId: string,
+  fetchThread: boolean,
+): Promise<string> => {
+  let comments_count: string = '';
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const endpoint = fetchThread ? COMMENT_THREAD_ENDPOINT : COMMENTS_ENDPOINT;
+    const response = await fetch(endpoint + `${objectId}/`, {
+      method: 'GET',
+      headers: {
+        Authorization: 'Token ' + token,
+      },
+    });
+    const status = response.status;
+    if (status === 200) {
+      const response_data = await response.json();
+      comments_count = response_data.count;
+    } else {
+      console.log(
+        'Something went wrong! 😭',
+        'Not able to retrieve comments count',
+      );
+    }
+  } catch (error) {
+    console.log(
+      'Something went wrong! 😭',
+      'Not able to retrieve comments count',
+      error,
+    );
+  }
+  return comments_count;
+};
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 8399eea3..0110a0d6 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -1,109 +1,9 @@
-import {CommentType} from './../types/types';
 import AsyncStorage from '@react-native-community/async-storage';
-<<<<<<< Updated upstream
-import {Alert} from 'react-native';
-import RNFetchBlob from 'rn-fetch-blob';
-import {
-  COMMENTS_ENDPOINT,
-  MOMENTS_ENDPOINT,
-  MOMENT_THUMBNAIL_ENDPOINT,
-} from '../constants';
-import {ERROR_FAILED_TO_COMMENT} from '../constants/strings';
-import {MomentType} from '../types';
-import {checkImageUploadStatus} from '../utils';
-
-//Get all comments for a moment
-export const getMomentComments = async (
-  momentId: string,
-): Promise<CommentType[]> => {
-  let comments: CommentType[] = [];
-  try {
-    const token = await AsyncStorage.getItem('token');
-    const response = await fetch(COMMENTS_ENDPOINT + '?moment_id=' + momentId, {
-      method: 'GET',
-      headers: {
-        Authorization: 'Token ' + token,
-      },
-    });
-    const status = response.status;
-    if (status === 200) {
-      comments = await response.json();
-    } else {
-      console.log('Could not load comments');
-    }
-  } catch (error) {
-    console.log('Could not load comments', error);
-  }
-  return comments;
-};
-
-export const postMomentComment = async (
-  commenter: string,
-  comment: string,
-  momentId: string,
-) => {
-  try {
-    const token = await AsyncStorage.getItem('token');
-    const request = new FormData();
-    request.append('moment_id', momentId);
-    request.append('commenter', commenter);
-    request.append('comment', comment);
-    const response = await fetch(COMMENTS_ENDPOINT, {
-      method: 'POST',
-      headers: {
-        Authorization: 'Token ' + token,
-      },
-      body: request,
-    });
-    if (response.status !== 200) {
-      throw 'server error';
-    }
-    return await response.json();
-  } catch (error) {
-    Alert.alert(ERROR_FAILED_TO_COMMENT);
-    return undefined;
-  }
-};
-
-//Get count of comments for a moment
-export const getMomentCommentsCount = async (
-  momentId: string,
-  callback: Function,
-) => {
-  try {
-    const token = await AsyncStorage.getItem('token');
-    const response = await fetch(COMMENTS_ENDPOINT + `${momentId}/`, {
-      method: 'GET',
-      headers: {
-        Authorization: 'Token ' + token,
-      },
-    });
-    const status = response.status;
-    if (status === 200) {
-      const response_data = await response.json();
-      callback(response_data.count);
-    } else {
-      console.log(
-        'Something went wrong! 😭',
-        'Not able to retrieve comments count',
-      );
-    }
-  } catch (error) {
-    console.log(
-      'Something went wrong! 😭',
-      'Not able to retrieve comments count',
-      error,
-    );
-  }
-};
-
-=======
 import RNFetchBlob from 'rn-fetch-blob';
 import {MOMENTS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT} from '../constants';
 import {MomentType} from '../types';
 import {checkImageUploadStatus} from '../utils';
 
->>>>>>> Stashed changes
 export const postMoment: (
   fileName: string,
   uri: string,
-- 
cgit v1.2.3-70-g09d2

