Remove CommentCount, Add new comments component

4 files changed, 36 insertions, 88 deletions

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
deleted file mode 100644
index f4f8197d..00000000
--- a/src/components/comments/CommentsCount.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import {useNavigation} from '@react-navigation/native';
-import * as React from 'react';
-import {StyleSheet, TouchableOpacity} from 'react-native';
-import {Text} from 'react-native-animatable';
-import CommentIcon from '../../assets/icons/moment-comment-icon.svg';
-import {ScreenType} from '../../types';
-
-/**
- * Provides a view for the comment icon and the comment count.
- * When the user clicks on this view, a new screen opens to display all the comments.
- */
-
-type CommentsCountProps = {
-  commentsCount: string;
-  momentId: string;
-  screenType: ScreenType;
-};
-
-const CommentsCount: React.FC<CommentsCountProps> = ({
-  commentsCount,
-  momentId,
-  screenType,
-}) => {
-  const navigation = useNavigation();
-  const navigateToCommentsScreen = async () => {
-    navigation.push('MomentCommentsScreen', {
-      moment_id: momentId,
-      screenType,
-    });
-  };
-  return (
-    <>
-      <TouchableOpacity onPress={navigateToCommentsScreen}>
-        <CommentIcon style={styles.image} />
-        <Text style={styles.count}>
-          {commentsCount !== '0' ? commentsCount : ''}
-        </Text>
-      </TouchableOpacity>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  image: {
-    position: 'relative',
-    width: 21,
-    height: 21,
-  },
-  count: {
-    position: 'relative',
-    fontWeight: 'bold',
-    color: 'white',
-    paddingTop: '3%',
-    textAlign: 'center',
-  },
-});
-
-export default CommentsCount;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index 6293f799..ebd93844 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,3 +1,2 @@
-export {default as CommentsCount} from '../comments/CommentsCount';
 export {default as CommentTile} from './CommentTile';
 export {default as AddComment} from './AddComment';
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',
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 5ac8aeab..447ba2a9 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -55,7 +55,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
         renderItem={({item}: {item: MomentPostType}) => (
           <MomentPost moment={item} userXId={userXId} screenType={screenType} />
         )}
-        keyExtractor={(_, index) => index.toString()}
+        keyExtractor={(item, _) => item.moment_id}
         showsVerticalScrollIndicator={false}
         initialScrollIndex={initialIndex}
       />