Added comment preview, WIP on mention part types

3 files changed, 88 insertions, 25 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',
   },
 });
 
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 01863660..5fd683a4 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -120,16 +120,14 @@ const styles = StyleSheet.create({
   },
   captionText: {
     position: 'relative',
-    paddingTop: '1%',
-    marginLeft: '5%',
-    marginRight: '5%',
+    marginHorizontal: '5%',
     color: '#ffffff',
     fontWeight: '500',
     fontSize: normalize(13),
     lineHeight: normalize(15.51),
     letterSpacing: normalize(0.6),
-    borderWidth: 1,
     marginBottom: normalize(18),
+    borderWidth: 1,
   },
   tapTag: {
     position: 'absolute',
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 5c17cefe..e700da88 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -79,26 +79,41 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
   );
 };
 
-export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = (
-  style,
+const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = (
+  theme,
 ) => {
+  switch (theme) {
+    case 'blue':
+      return {
+        color: TAGG_LIGHT_BLUE,
+        top: normalize(3),
+      };
+    case 'commentPreview':
+      return {
+        color: 'white',
+        fontWeight: '800',
+        top: normalize(3),
+      };
+    case 'white':
+    default:
+      return {
+        color: 'white',
+        fontWeight: '800',
+        top: normalize(7.5),
+      };
+  }
+};
+
+export const mentionPartTypes: (
+  theme: 'blue' | 'white' | 'commentPreview',
+) => PartType[] = (theme) => {
   return [
     {
       trigger: '@',
       renderSuggestions: (props) => <TaggTypeahead {...props} />,
       allowedSpacesCount: 0,
       isInsertSpaceAfterMention: true,
-      textStyle:
-        style === 'blue'
-          ? {
-              color: TAGG_LIGHT_BLUE,
-              top: normalize(3),
-            }
-          : {
-              color: 'white',
-              fontWeight: '800',
-              top: normalize(7.5),
-            },
+      textStyle: textStyle(theme),
     },
   ];
 };