From 63630e254135c962706588669982d0113bd37b16 Mon Sep 17 00:00:00 2001
From: Kaung Myat Lwin <kaung@amity.co>
Date: Fri, 11 Feb 2022 14:16:53 +0700
Subject: [PATCH] fix: UP-6890 - Redirect to user page on mention (#3)

* fix: UP-6890 - Redirect to user page on mention

* fix: use memoized functional comps
---
 src/social/components/Comment/CommentText.js  | 15 +++++++++++++--
 src/social/components/Comment/styles.js       |  1 +
 .../components/post/TextContent/index.js      | 19 ++++++++++++++++---
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/social/components/Comment/CommentText.js b/src/social/components/Comment/CommentText.js
index 5c30e9269..3651633f3 100644
--- a/src/social/components/Comment/CommentText.js
+++ b/src/social/components/Comment/CommentText.js
@@ -1,23 +1,34 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Truncate from 'react-truncate-markup';
 import Highlighter from 'react-highlight-words';
 import { findChunks } from '~/helpers/utils';
 import Linkify from '~/core/components/Linkify';
+import { useNavigation } from '~/social/providers/NavigationProvider';
 import { CommentContent, ReadMoreButton, Highlighted } from './styles';
 
 const COMMENT_MAX_LINES = 8;
 
 const CommentText = ({ text, className, mentionees, maxLines = COMMENT_MAX_LINES }) => {
+  const { onClickUser } = useNavigation();
   const [isExpanded, setIsExpanded] = useState(false);
   const expand = () => setIsExpanded(true);
 
+  const highlightTag = useCallback(
+    ({ children: toHighLight, highlightIndex }) => (
+      <Highlighted onClick={() => onClickUser(mentionees[highlightIndex]?.userId)}>
+        {toHighLight}
+      </Highlighted>
+    ),
+    [mentionees, onClickUser],
+  );
+
   const textContent = text && (
     <CommentContent className={className}>
       <Truncate.Atom>
         <Highlighter
           autoEscape
-          highlightTag={({ children: toHighLight }) => <Highlighted>{toHighLight}</Highlighted>}
+          highlightTag={highlightTag}
           findChunks={() => findChunks(mentionees)}
           textToHighlight={text}
         />
diff --git a/src/social/components/Comment/styles.js b/src/social/components/Comment/styles.js
index 9d34ebf49..f083cec78 100644
--- a/src/social/components/Comment/styles.js
+++ b/src/social/components/Comment/styles.js
@@ -207,5 +207,6 @@ export const CommentEditTextarea = styled(InputText).attrs({ rows: 1, maxRows: 1
 `;
 
 export const Highlighted = styled.span`
+  cursor: pointer;
   color: ${({ theme }) => theme.palette.primary.main};
 `;
diff --git a/src/social/components/post/TextContent/index.js b/src/social/components/post/TextContent/index.js
index 90250fbe9..219d172f8 100644
--- a/src/social/components/post/TextContent/index.js
+++ b/src/social/components/post/TextContent/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
@@ -9,6 +9,7 @@ import customizableComponent from '~/core/hocs/customization';
 import Linkify from '~/core/components/Linkify';
 import Button from '~/core/components/Button';
 import { findChunks } from '~/helpers/utils';
+import { useNavigation } from '~/social/providers/NavigationProvider';
 
 export const PostContent = styled.div`
   overflow-wrap: break-word;
@@ -24,16 +25,28 @@ export const ReadMoreButton = styled(Button).attrs({ variant: 'secondary' })`
 `;
 
 export const Highlighted = styled.span`
+  cursor: pointer;
   color: ${({ theme }) => theme.palette.primary.main};
 `;
 
 const TextContent = ({ text, postMaxLines, mentionees }) => {
+  const { onClickUser } = useNavigation();
+
+  const highlightTag = useCallback(
+    ({ children, highlightIndex }) => (
+      <Highlighted onClick={() => onClickUser(mentionees[highlightIndex]?.userId)}>
+        {children}
+      </Highlighted>
+    ),
+    [mentionees, onClickUser],
+  );
+
   const textContent = text && (
     <PostContent>
       <Truncate.Atom>
         <Highlighter
           autoEscape
-          highlightTag={({ children }) => <Highlighted>{children}</Highlighted>}
+          highlightTag={highlightTag}
           findChunks={() => findChunks(mentionees)}
           textToHighlight={text}
         />
@@ -67,7 +80,7 @@ const TextContent = ({ text, postMaxLines, mentionees }) => {
 };
 
 TextContent.propTypes = {
-  text: PropTypes.node,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   postMaxLines: PropTypes.number,
   mentionees: PropTypes.arrayOf(
     PropTypes.shape({