Add provision to show and hide replies

8 files changed, 215 insertions, 74 deletions

diff --git a/src/assets/icons/back-arrow-colored.svg b/src/assets/icons/back-arrow-colored.svg
new file mode 100644
index 00000000..123426d7
--- /dev/null
+++ b/src/assets/icons/back-arrow-colored.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.86 696.76"><defs><style>.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="347.28 38.58 38.58 351.69 347.28 658.17"/></svg>
\ No newline at end of file
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}
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 47f25a53..4221fd54 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -1,10 +1,19 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {Text, View} from 'react-native-animatable';
 import {ProfilePreview} from '../profile';
-import {CommentType, ScreenType} from '../../types';
+import {CommentType, ScreenType, TypeOfComment} from '../../types';
 import {StyleSheet} from 'react-native';
-import {getTimePosted} from '../../utils';
+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';
 
 /**
  * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
@@ -13,33 +22,78 @@ import ClockIcon from '../../assets/icons/clock-icon-01.svg';
 interface CommentTileProps {
   comment_object: CommentType;
   screenType: ScreenType;
+  typeOfComment: TypeOfComment;
 }
 
 const CommentTile: React.FC<CommentTileProps> = ({
   comment_object,
   screenType,
+  typeOfComment,
 }) => {
   const timePosted = getTimePosted(comment_object.date_created);
+  const [showReplies, setShowReplies] = useState<boolean>(false);
+
+  const isThread = typeOfComment === 'Thread';
+
   return (
-    <View style={styles.container}>
-      <ProfilePreview
-        profilePreview={{
-          id: comment_object.commenter.id,
-          username: comment_object.commenter.username,
-          first_name: comment_object.commenter.first_name,
-          last_name: comment_object.commenter.last_name,
-        }}
-        previewType={'Comment'}
-        screenType={screenType}
-      />
-      <View style={styles.body}>
-        <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.container}>
+        <ProfilePreview
+          profilePreview={{
+            id: comment_object.commenter.id,
+            username: comment_object.commenter.username,
+            first_name: comment_object.commenter.first_name,
+            last_name: comment_object.commenter.last_name,
+          }}
+          previewType={'Comment'}
+          screenType={screenType}
+        />
+        <View style={styles.body}>
+          <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>
         </View>
       </View>
-    </View>
+      {/* {showReplies && (
+        <View style={styles.repliesBody}>
+          <CommentsContainer
+            moment_id={'5a9d6023-bc62-4588-a3dc-8de2c9c370e0'}
+            screenType={screenType}
+            setNewCommentsAvailable={(value: boolean) => {
+              console.log(value);
+            }}
+            newCommentsAvailable={true}
+            typeOfComment={'Thread'}
+          />
+        </View>
+      )} */}
+    </>
   );
 };
 
@@ -61,6 +115,7 @@ const styles = StyleSheet.create({
   },
   date_time: {
     color: 'gray',
+    fontSize: normalize(12),
   },
   clockIcon: {
     width: 12,
@@ -71,6 +126,33 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginBottom: '3%',
   },
+
+  repliesTextAndIconContainer: {
+    marginLeft: SCREEN_WIDTH * 0.37,
+    flexDirection: 'row',
+  },
+
+  repliesText: {
+    color: COMMENT_REPLIES,
+    fontWeight: '500',
+    fontSize: normalize(12),
+    marginRight: '3%',
+  },
+
+  repliesBody: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.8,
+  },
+
+  repliesDownArrow: {
+    transform: [{rotate: '270deg'}],
+    marginTop: '7%',
+  },
+
+  repliesUpArrow: {
+    transform: [{rotate: '90deg'}],
+    marginTop: '7%',
+  },
 });
 
 export default CommentTile;
diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
new file mode 100644
index 00000000..81ae8e1e
--- /dev/null
+++ b/src/components/comments/CommentsContainer.tsx
@@ -0,0 +1,83 @@
+import React, {useRef, useEffect, useState} from 'react';
+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 {CommentType, ScreenType, TypeOfComment} from '../../types';
+export type CommentsContainerProps = {
+  screenType: ScreenType;
+  moment_id: string;
+  setCommentsLength?: (count: number) => void;
+  newCommentsAvailable: boolean;
+  setNewCommentsAvailable: (value: boolean) => void;
+  typeOfComment: TypeOfComment;
+};
+
+const CommentsContainer: React.FC<CommentsContainerProps> = ({
+  screenType,
+  moment_id,
+  setCommentsLength,
+  newCommentsAvailable,
+  setNewCommentsAvailable,
+  typeOfComment,
+}) => {
+  const [commentsList, setCommentsList] = useState<CommentType[]>([]);
+  const dispatch = useDispatch();
+  const ref = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    const loadComments = async () => {
+      console.log(moment_id);
+      const comments = await getMomentComments(moment_id);
+      setCommentsList(comments);
+      if (setCommentsLength) {
+        setCommentsLength(comments.length);
+      }
+      console.log(comments);
+      setNewCommentsAvailable(false);
+    };
+    if (newCommentsAvailable) {
+      loadComments();
+      setTimeout(() => {
+        ref.current?.scrollToEnd({
+          animated: true,
+        });
+      }, 500);
+    }
+  }, [
+    dispatch,
+    moment_id,
+    newCommentsAvailable,
+    setNewCommentsAvailable,
+    setCommentsLength,
+  ]);
+
+  return (
+    <ScrollView
+      ref={ref}
+      style={styles.scrollView}
+      contentContainerStyle={styles.scrollViewContent}>
+      {commentsList &&
+        commentsList.map((comment: CommentType) => (
+          <CommentTile
+            key={comment.comment_id}
+            comment_object={comment}
+            screenType={screenType}
+            typeOfComment={typeOfComment}
+          />
+        ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollView: {
+    paddingHorizontal: 20,
+  },
+  scrollViewContent: {
+    justifyContent: 'center',
+  },
+});
+
+export default CommentsContainer;
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index ad43c337..6a94f51f 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -63,6 +63,7 @@ export const YOUTUBE_FONT_COLOR: string = '#FCA4A4';
 export const TAGG_DARK_BLUE = '#4E699C';
 export const TAGG_LIGHT_BLUE: string = '#698DD3';
 export const TAGG_LIGHT_PURPLE = '#F4DDFF';
+export const COMMENT_REPLIES = '#698DD3';
 
 export const TAGGS_GRADIENT = {
   start: '#9F00FF',
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 2bceafc9..9fd5aaa0 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,20 +1,12 @@
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {useEffect, useRef} from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import React, {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import {useDispatch} from 'react-redux';
-import {getMomentComments} from '../..//services';
 import BackIcon from '../../assets/icons/back-arrow.svg';
-import {CommentTile, TabsGradient} from '../../components';
+import {TabsGradient} from '../../components';
 import {AddComment} from '../../components/';
-import {ProfileStackParams} from '../../routes/main';
-import {CommentType} from '../../types';
+import CommentsContainer from '../../components/comments/CommentsContainer';
+import {MainStackParams} from '../../routes/main';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
@@ -24,7 +16,7 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
  */
 
 type MomentCommentsScreenRouteProps = RouteProp<
-  ProfileStackParams,
+  MainStackParams,
   'MomentCommentsScreen'
 >;
 
@@ -35,25 +27,8 @@ interface MomentCommentsScreenProps {
 const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const {moment_id, screenType} = route.params;
-  const [commentsList, setCommentsList] = React.useState([]);
-  const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
-  const dispatch = useDispatch();
-  const ref = useRef<ScrollView>(null);
-
-  useEffect(() => {
-    const loadComments = async () => {
-      getMomentComments(moment_id, setCommentsList);
-      setNewCommentsAvailable(false);
-    };
-    if (newCommentsAvailable) {
-      loadComments();
-      setTimeout(() => {
-        ref.current?.scrollToEnd({
-          animated: true,
-        });
-      }, 500);
-    }
-  }, [dispatch, moment_id, newCommentsAvailable]);
+  const [newCommentsAvailable, setNewCommentsAvailable] = useState(true);
+  const [commentsLength, setCommentsLength] = useState<number>(0);
 
   return (
     <View style={styles.background}>
@@ -66,25 +41,19 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
             }}>
             <BackIcon height={'100%'} width={'100%'} color={'white'} />
           </TouchableOpacity>
-          <Text style={styles.headerText}>
-            {commentsList.length + ' Comments'}
-          </Text>
+          <Text style={styles.headerText}>{commentsLength + ' Comments'}</Text>
         </View>
         <View style={styles.body}>
-          <ScrollView
-            ref={ref}
-            style={styles.scrollView}
-            contentContainerStyle={styles.scrollViewContent}>
-            {commentsList &&
-              commentsList.map((comment: CommentType) => (
-                <CommentTile
-                  key={comment.comment_id}
-                  comment_object={comment}
-                  screenType={screenType}
-                />
-              ))}
-          </ScrollView>
+          <CommentsContainer
+            moment_id={moment_id}
+            screenType={screenType}
+            setCommentsLength={setCommentsLength}
+            newCommentsAvailable={newCommentsAvailable}
+            setNewCommentsAvailable={setNewCommentsAvailable}
+            typeOfComment={'Comment'}
+          />
           <AddComment
+            placeholderText={'Add a comment..'}
             setNewCommentsAvailable={setNewCommentsAvailable}
             moment_id={moment_id}
           />
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 7bad6d4c..77740e7e 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -1,3 +1,4 @@
+import {CommentType} from './../types/types';
 import AsyncStorage from '@react-native-community/async-storage';
 import {Alert} from 'react-native';
 import RNFetchBlob from 'rn-fetch-blob';
@@ -13,8 +14,8 @@ import {checkImageUploadStatus} from '../utils';
 //Get all comments for a moment
 export const getMomentComments = async (
   momentId: string,
-  callback: Function,
-) => {
+): Promise<CommentType[]> => {
+  let comments: CommentType[] = [];
   try {
     const token = await AsyncStorage.getItem('token');
     const response = await fetch(COMMENTS_ENDPOINT + '?moment_id=' + momentId, {
@@ -25,14 +26,14 @@ export const getMomentComments = async (
     });
     const status = response.status;
     if (status === 200) {
-      const comments = await response.json();
-      callback(comments);
+      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 (
diff --git a/src/types/types.ts b/src/types/types.ts
index d9d0b56b..b29ecbd9 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -174,3 +174,5 @@ export type NotificationType = {
   timestamp: string;
   unread: boolean;
 };
+
+export type TypeOfComment = 'Comment' | 'Thread';