Added comment preview, WIP on mention part types

1 files changed, 58 insertions, 8 deletions

diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index 45bbbfad..03f30dda 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -1,9 +1,11 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {StyleSheet, Text} from 'react-native';
+import {Image, StyleSheet, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {MomentPostType, ScreenType} from '../../types';
-import {normalize} from '../../utils';
+import {useDispatch, useStore} from 'react-redux';
+import {MomentPostType, ScreenType, UserType} from '../../types';
+import {navigateToProfile, normalize} from '../../utils';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 
 interface MomentCommentPreviewProps {
   moment: MomentPostType;
@@ -15,11 +17,18 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
   screenType,
 }) => {
   const navigation = useNavigation();
+  const state = useStore().getState();
   const commentCountText =
     moment.comments_count === 0
       ? 'No Comments'
       : moment.comments_count + ' comments';
 
+  /**
+   * TODO:
+   * - figure out why mention PartTypes have type warnings
+   * - fix padding for all types (double check on iPhone 8)
+   */
+
   return (
     <TouchableOpacity
       style={styles.commentsPreviewContainer}
@@ -29,23 +38,64 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
           screenType,
         })
       }>
-      <Text style={styles.commentCount}>{commentCountText}</Text>
-      <Text>TODO: Add comment preview here</Text>
+      <Text style={styles.whiteBold}>{commentCountText}</Text>
+      {moment.comment_preview !== null && (
+        <View style={styles.previewContainer}>
+          <Image
+            source={{
+              uri: moment.comment_preview.commenter.thumbnail_url,
+            }}
+            style={styles.avatar}
+          />
+          <Text style={styles.whiteBold} numberOfLines={1}>
+            <Text> </Text>
+            <Text>{moment.comment_preview.commenter.username}</Text>
+            <Text> </Text>
+            {renderTextWithMentions({
+              value: moment.comment_preview.comment,
+              styles: styles.normalFont,
+              partTypes: mentionPartTypes('commentPreview'),
+              onPress: (user: UserType) =>
+                navigateToProfile(
+                  state,
+                  useDispatch,
+                  navigation,
+                  screenType,
+                  user,
+                ),
+            })}
+          </Text>
+        </View>
+      )}
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   commentsPreviewContainer: {
+    height: normalize(50),
     flexDirection: 'column',
+    justifyContent: 'space-around',
     marginHorizontal: '5%',
     marginBottom: '2%',
-    borderWidth: 1,
   },
-  commentCount: {
+  whiteBold: {
     fontWeight: '700',
     color: 'white',
-    fontSize: normalize(12),
+    fontSize: normalize(13),
+  },
+  previewContainer: {
+    flexDirection: 'row',
+    width: '95%',
+  },
+  avatar: {
+    height: normalize(16),
+    width: normalize(16),
+    borderRadius: 99,
+  },
+  normalFont: {
+    // top: -5,
+    fontWeight: 'normal',
   },
 });