Remove CommentCount, Add new comments component

1 files changed, 35 insertions, 28 deletions

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 582cba25..34503bf4 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,10 +1,12 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
-import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
+import {
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native-gesture-handler';
 import Animated, {EasingNode} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
-import {ADD_COMMENT_TEXT} from '../../constants/strings';
 import {RootState} from '../../store/rootReducer';
 import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
 import {
@@ -14,7 +16,7 @@ import {
   SCREEN_WIDTH,
 } from '../../utils';
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
-import {AddComment, CommentsCount} from '../comments';
+import {AddComment} from '../comments';
 import {MomentTags} from '../common';
 
 interface MomentPostContentProps extends ViewProps {
@@ -31,23 +33,22 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   const state: RootState = useStore().getState();
   const navigation = useNavigation();
   const dispatch = useDispatch();
-  const [elapsedTime, setElapsedTime] = useState('');
   const [tags, setTags] = useState<MomentTagType[]>(momentTags);
   const imageRef = useRef(null);
   const [visible, setVisible] = useState(false);
-
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
   );
+  const commentCountText =
+    moment.comments_count === 0
+      ? 'No Comments'
+      : moment.comments_count + ' comments';
+
   useEffect(() => {
     setTags(momentTags);
   }, [momentTags]);
 
   useEffect(() => {
-    setElapsedTime(getTimePosted(moment.date_created));
-  }, [moment.date_created]);
-
-  useEffect(() => {
     const fade = async () => {
       Animated.timing(fadeValue, {
         toValue: 1,
@@ -96,19 +97,22 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           onPress: (user: UserType) =>
             navigateToProfile(state, dispatch, navigation, screenType, user),
         })}
-      <View style={styles.footerContainer}>
-        <CommentsCount
-          commentsCount={moment.comments_count.toString()}
-          momentId={moment.moment_id}
-          screenType={screenType}
-        />
-        <Text style={styles.text}>{elapsedTime}</Text>
-      </View>
+      <TouchableOpacity
+        style={styles.commentsPreviewContainer}
+        onPress={() =>
+          navigation.push('MomentCommentsScreen', {
+            moment_id: moment.moment_id,
+            screenType,
+          })
+        }>
+        <Text style={styles.commentCount}>{commentCountText}</Text>
+      </TouchableOpacity>
       <AddComment
         placeholderText={'Add a comment here!'}
         momentId={moment.moment_id}
         theme={'dark'}
       />
+      <Text style={styles.text}>{getTimePosted(moment.date_created)}</Text>
     </View>
   );
 };
@@ -122,22 +126,24 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     marginBottom: '3%',
   },
-  footerContainer: {
+  commentsPreviewContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    borderWidth: 1,
-    marginLeft: '7%',
-    marginRight: '5%',
+    marginHorizontal: '5%',
     marginBottom: '2%',
+    borderWidth: 1,
+  },
+  commentCount: {
+    fontWeight: '700',
+    color: 'white',
+    fontSize: normalize(12),
   },
   text: {
-    position: 'relative',
-    paddingBottom: '1%',
-    paddingTop: '1%',
-    marginLeft: '7%',
-    marginRight: '2%',
-    color: '#ffffff',
-    fontWeight: 'bold',
+    marginHorizontal: '5%',
+    color: 'white',
+    fontWeight: '500',
+    textAlign: 'right',
+    marginTop: 5,
   },
   captionText: {
     position: 'relative',
@@ -150,6 +156,7 @@ const styles = StyleSheet.create({
     lineHeight: normalize(15.51),
     letterSpacing: normalize(0.6),
     borderWidth: 1,
+    marginBottom: normalize(18),
   },
   tapTag: {
     position: 'absolute',