Create MomentCommentPrevew component

3 files changed, 57 insertions, 31 deletions

diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
new file mode 100644
index 00000000..45bbbfad
--- /dev/null
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -0,0 +1,52 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {MomentPostType, ScreenType} from '../../types';
+import {normalize} from '../../utils';
+
+interface MomentCommentPreviewProps {
+  moment: MomentPostType;
+  screenType: ScreenType;
+}
+
+const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
+  moment,
+  screenType,
+}) => {
+  const navigation = useNavigation();
+  const commentCountText =
+    moment.comments_count === 0
+      ? 'No Comments'
+      : moment.comments_count + ' comments';
+
+  return (
+    <TouchableOpacity
+      style={styles.commentsPreviewContainer}
+      onPress={() =>
+        navigation.push('MomentCommentsScreen', {
+          moment_id: moment.moment_id,
+          screenType,
+        })
+      }>
+      <Text style={styles.commentCount}>{commentCountText}</Text>
+      <Text>TODO: Add comment preview here</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  commentsPreviewContainer: {
+    flexDirection: 'column',
+    marginHorizontal: '5%',
+    marginBottom: '2%',
+    borderWidth: 1,
+  },
+  commentCount: {
+    fontWeight: '700',
+    color: 'white',
+    fontSize: normalize(12),
+  },
+});
+
+export default MomentCommentPreview;
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index ffdbed81..02dbffa3 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -5,7 +5,7 @@ import {MomentPostContent, MomentPostHeader} from '.';
 import {deleteMomentTag, loadMomentTags} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {MomentPostType, MomentTagType, ScreenType} from '../../types';
-import {SCREEN_HEIGHT} from '../../utils';
+import {normalize, SCREEN_HEIGHT} from '../../utils';
 
 interface MomentPostProps {
   moment: MomentPostType;
@@ -97,6 +97,7 @@ const styles = StyleSheet.create({
   postHeader: {},
   postContent: {
     minHeight: SCREEN_HEIGHT * 0.8,
+    paddingBottom: normalize(20),
   },
 });
 
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',