Merge branch 'master' of https://github.com/TaggiD-Inc/Frontend

1 files changed, 97 insertions, 0 deletions

diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
new file mode 100644
index 00000000..e53ed258
--- /dev/null
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -0,0 +1,97 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useDispatch, useStore} from 'react-redux';
+import {MomentCommentPreviewType, ScreenType, UserType} from '../../types';
+import {navigateToProfile, normalize} from '../../utils';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
+
+interface MomentCommentPreviewProps {
+  momentId: string;
+  commentsCount: number;
+  commentPreview: MomentCommentPreviewType | null;
+  screenType: ScreenType;
+}
+
+const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
+  momentId,
+  commentsCount,
+  commentPreview,
+  screenType,
+}) => {
+  const navigation = useNavigation();
+  const state = useStore().getState();
+  const commentCountText =
+    commentsCount === 0 ? 'No Comments' : commentsCount + ' comments';
+
+  return (
+    <TouchableOpacity
+      style={styles.commentsPreviewContainer}
+      onPress={() =>
+        navigation.push('MomentCommentsScreen', {
+          moment_id: momentId,
+          screenType,
+        })
+      }>
+      <Text style={styles.whiteBold}>{commentCountText}</Text>
+      {commentPreview !== null && (
+        <View style={styles.previewContainer}>
+          <Image
+            source={{
+              uri: commentPreview.commenter.thumbnail_url,
+            }}
+            style={styles.avatar}
+          />
+          <Text style={styles.whiteBold} numberOfLines={1}>
+            <Text> </Text>
+            <Text>{commentPreview.commenter.username}</Text>
+            <Text> </Text>
+            {renderTextWithMentions({
+              value: commentPreview.comment,
+              styles: styles.normalFont,
+              partTypes: mentionPartTypes('white'),
+              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%',
+  },
+  whiteBold: {
+    fontWeight: '700',
+    color: 'white',
+    fontSize: normalize(13),
+  },
+  previewContainer: {
+    flexDirection: 'row',
+    width: '95%',
+  },
+  avatar: {
+    height: normalize(16),
+    width: normalize(16),
+    borderRadius: 99,
+  },
+  normalFont: {
+    fontWeight: 'normal',
+  },
+});
+
+export default MomentCommentPreview;