added display text parsing

3 files changed, 84 insertions, 21 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 7576675e..cf5d19ee 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -16,7 +16,8 @@ import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {Avatar, TaggTypeahead} from '../common';
+import {Avatar} from '../common';
+import {mentionPartTypes} from '../../utils/comments';
 
 /**
  * This file provides the add comment view for a user.
@@ -108,15 +109,7 @@ const AddComment: React.FC<AddCommentProps> = ({
             value={comment}
             onChange={setComment}
             inputRef={ref}
-            partTypes={[
-              {
-                trigger: '@',
-                renderSuggestions: (props) => <TaggTypeahead {...props} />,
-                allowedSpacesCount: 0,
-                isInsertSpaceAfterMention: true,
-                textStyle: {color: TAGG_LIGHT_BLUE},
-              },
-            ]}
+            partTypes={mentionPartTypes}
           />
           <View style={styles.submitButton}>
             <TouchableOpacity style={styles.submitButton} onPress={addComment}>
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 34eef418..334934f1 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -1,21 +1,22 @@
 /* eslint-disable radix */
 import React, {Fragment, useEffect, useRef, useState} from 'react';
-import {Text, View} from 'react-native-animatable';
-import {ProfilePreview} from '../profile';
-import {CommentType, ScreenType, TypeOfComment} from '../../types';
 import {Alert, Animated, StyleSheet} from 'react-native';
-import ClockIcon from '../../assets/icons/clock-icon-01.svg';
-import {TAGG_LIGHT_BLUE} from '../../constants';
+import {Text, View} from 'react-native-animatable';
 import {RectButton, TouchableOpacity} from 'react-native-gesture-handler';
-import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
+import Swipeable from 'react-native-gesture-handler/Swipeable';
+import {useSelector} from 'react-redux';
 import Arrow from '../../assets/icons/back-arrow-colored.svg';
+import ClockIcon from '../../assets/icons/clock-icon-01.svg';
 import Trash from '../../assets/ionicons/trash-outline.svg';
-import CommentsContainer from './CommentsContainer';
-import Swipeable from 'react-native-gesture-handler/Swipeable';
-import {deleteComment, getCommentsCount} from '../../services';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_FAILED_TO_DELETE_COMMENT} from '../../constants/strings';
-import {useSelector} from 'react-redux';
+import {deleteComment, getCommentsCount} from '../../services';
 import {RootState} from '../../store/rootReducer';
+import {CommentType, ScreenType, TypeOfComment} from '../../types';
+import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
+import {mentionPartTypes, renderValue} from '../../utils/comments';
+import {ProfilePreview} from '../profile';
+import CommentsContainer from './CommentsContainer';
 
 /**
  * Displays users's profile picture, comment posted by them and the time difference between now and when a comment was posted.
@@ -154,7 +155,9 @@ const CommentTile: React.FC<CommentTileProps> = ({
           screenType={screenType}
         />
         <TouchableOpacity style={styles.body} onPress={toggleAddComment}>
-          <Text style={styles.comment}>{comment_object.comment}</Text>
+          <View style={styles.comment}>
+            {renderValue(comment_object.comment, mentionPartTypes)}
+          </View>
           <View style={styles.clockIconAndTime}>
             <ClockIcon style={styles.clockIcon} />
             <Text style={styles.date_time}>{' ' + timePosted}</Text>
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
new file mode 100644
index 00000000..a1f353d6
--- /dev/null
+++ b/src/utils/comments.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {Text} from 'react-native';
+import {
+  isMentionPartType,
+  parseValue,
+  Part,
+  PartType,
+} from 'react-native-controlled-mentions';
+import TaggTypeahead from '../components/common/TaggTypeahead';
+import {TAGG_LIGHT_BLUE} from '../constants';
+
+/**
+ * Part renderer
+ *
+ * https://github.com/dabakovich/react-native-controlled-mentions#rendering-mentioninputs-value
+ *
+ * @param part
+ * @param index
+ */
+const renderPart = (part: Part, index: number) => {
+  // Just plain text
+  if (!part.partType) {
+    return <Text key={index}>{part.text}</Text>;
+  }
+
+  // Mention type part
+  if (isMentionPartType(part.partType)) {
+    return (
+      <Text
+        key={`${index}-${part.data?.trigger}`}
+        style={part.partType.textStyle}
+        onPress={() => console.log('Pressed', part.data)}>
+        {part.text}
+      </Text>
+    );
+  }
+
+  // Other styled part types
+  return (
+    <Text key={`${index}-pattern`} style={part.partType.textStyle}>
+      {part.text}
+    </Text>
+  );
+};
+
+/**
+ * Value renderer. Parsing value to parts array and then mapping the array using 'renderPart'
+ *
+ * https://github.com/dabakovich/react-native-controlled-mentions#rendering-mentioninputs-value
+ *
+ * @param value - value from MentionInput
+ * @param partTypes - the part types array that you providing to MentionInput
+ */
+export const renderValue: React.FC = (value: string, partTypes: PartType[]) => {
+  const {parts} = parseValue(value, partTypes);
+  return <Text>{parts.map(renderPart)}</Text>;
+};
+
+export const mentionPartTypes: PartType[] = [
+  {
+    trigger: '@',
+    renderSuggestions: (props) => <TaggTypeahead {...props} />,
+    allowedSpacesCount: 0,
+    isInsertSpaceAfterMention: true,
+    textStyle: {color: TAGG_LIGHT_BLUE},
+  },
+];