Create MomentCommentPrevew component

1 files changed, 3 insertions, 30 deletions

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 34503bf4..01863660 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,10 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
-import {
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-} from 'react-native-gesture-handler';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import Animated, {EasingNode} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
@@ -18,6 +15,7 @@ import {
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import {AddComment} from '../comments';
 import {MomentTags} from '../common';
+import MomentCommentPreview from './MomentCommentPreview';
 
 interface MomentPostContentProps extends ViewProps {
   screenType: ScreenType;
@@ -39,10 +37,6 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   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);
@@ -97,16 +91,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           onPress: (user: UserType) =>
             navigateToProfile(state, dispatch, navigation, screenType, user),
         })}
-      <TouchableOpacity
-        style={styles.commentsPreviewContainer}
-        onPress={() =>
-          navigation.push('MomentCommentsScreen', {
-            moment_id: moment.moment_id,
-            screenType,
-          })
-        }>
-        <Text style={styles.commentCount}>{commentCountText}</Text>
-      </TouchableOpacity>
+      <MomentCommentPreview moment={moment} screenType={screenType} />
       <AddComment
         placeholderText={'Add a comment here!'}
         momentId={moment.moment_id}
@@ -126,18 +111,6 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     marginBottom: '3%',
   },
-  commentsPreviewContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginHorizontal: '5%',
-    marginBottom: '2%',
-    borderWidth: 1,
-  },
-  commentCount: {
-    fontWeight: '700',
-    color: 'white',
-    fontSize: normalize(12),
-  },
   text: {
     marginHorizontal: '5%',
     color: 'white',