From 7f9799c6693254f8eb6729c0977826694c28c437 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 4 May 2021 20:46:27 -0400
Subject: added navigation to profile

---
 src/components/comments/CommentTile.tsx      | 34 ++++++++++++++++++++--------
 src/components/moments/MomentPostContent.tsx | 23 ++++++++++++++++---
 2 files changed, 44 insertions(+), 13 deletions(-)

(limited to 'src/components')

diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index 12f32c95..ce346af5 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -1,9 +1,10 @@
+import {useNavigation} from '@react-navigation/native';
 import React, {Fragment, useContext, useEffect, useRef, useState} from 'react';
 import {Alert, Animated, StyleSheet} from 'react-native';
 import {Text, View} from 'react-native-animatable';
 import {RectButton, TouchableOpacity} from 'react-native-gesture-handler';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector, useStore} 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';
@@ -12,9 +13,19 @@ import {ERROR_FAILED_TO_DELETE_COMMENT} from '../../constants/strings';
 import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
 import {deleteComment, getCommentsCount} from '../../services';
 import {RootState} from '../../store/rootReducer';
-import {CommentThreadType, CommentType, ScreenType} from '../../types';
-import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils';
-import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
+import {
+  CommentThreadType,
+  CommentType,
+  ScreenType,
+  UserType,
+} from '../../types';
+import {
+  getTimePosted,
+  navigateToProfile,
+  normalize,
+  SCREEN_WIDTH,
+} from '../../utils';
+import {renderTextWithMentions} from '../../utils/comments';
 import {ProfilePreview} from '../profile';
 import CommentsContainer from './CommentsContainer';
 
@@ -46,6 +57,9 @@ const CommentTile: React.FC<CommentTileProps> = ({
   const [shouldUpdateChild, setShouldUpdateChild] = useState(true);
   const swipeRef = useRef<Swipeable>(null);
   const {replyPosted} = useSelector((state: RootState) => state.user);
+  const state: RootState = useStore().getState();
+  const navigation = useNavigation();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     if (shouldUpdateParent) {
@@ -135,12 +149,12 @@ const CommentTile: React.FC<CommentTileProps> = ({
           screenType={screenType}
         />
         <TouchableOpacity style={styles.body} onPress={toggleAddComment}>
-          <View style={styles.comment}>
-            {renderTextWithMentions({
-              value: commentObject.comment,
-              partTypes: mentionPartTypes,
-            })}
-          </View>
+          {renderTextWithMentions({
+            value: commentObject.comment,
+            styles: styles.comment,
+            onPress: (user: UserType) =>
+              navigateToProfile(state, dispatch, navigation, screenType, user),
+          })}
           <View style={styles.clockIconAndTime}>
             <ClockIcon style={styles.clockIcon} />
             <Text style={styles.date_time}>{' ' + timePosted}</Text>
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index d68ceaa3..03034925 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,8 +1,17 @@
+import {useNavigation} from '@react-navigation/native';
 import React, {useEffect} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
+import {useDispatch, useStore} from 'react-redux';
 import {getCommentsCount} from '../../services';
-import {ScreenType} from '../../types';
-import {getTimePosted, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {RootState} from '../../store/rootReducer';
+import {ScreenType, UserType} from '../../types';
+import {
+  getTimePosted,
+  navigateToProfile,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
+import {renderTextWithMentions} from '../../utils/comments';
 import {CommentsCount} from '../comments';
 
 interface MomentPostContentProps extends ViewProps {
@@ -22,6 +31,9 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
 }) => {
   const [elapsedTime, setElapsedTime] = React.useState<string>();
   const [comments_count, setCommentsCount] = React.useState('');
+  const state: RootState = useStore().getState();
+  const navigation = useNavigation();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     const fetchCommentsCount = async () => {
@@ -47,7 +59,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
         />
         <Text style={styles.text}>{elapsedTime}</Text>
       </View>
-      <Text style={styles.captionText}>{caption}</Text>
+      {renderTextWithMentions({
+        value: caption,
+        styles: styles.captionText,
+        onPress: (user: UserType) =>
+          navigateToProfile(state, dispatch, navigation, screenType, user),
+      })}
     </View>
   );
 };
-- 
cgit v1.2.3-70-g09d2