Pre-final

2 files changed, 85 insertions, 62 deletions

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: {