Add links to user profiles

packages/concordia-app/src/components/PostList/PostListRow/index.jsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import moment from 'moment';
 import { useHistory } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
 import { breeze } from '../../../redux/store';
 import './styles.css';
@@ -90,10 +91,7 @@ const PostListRow = (props) => {
     }
   }, [postAuthorAddress, users]);
 
-  return useMemo(() => (
+  const authorAvatar = useMemo(() => (postAuthorMeta !== null && postAuthorMeta[USER_PROFILE_PICTURE]
-      <Dimmer.Dimmable as={Feed.Event} blurring dimmed={loading}>
-          <Feed.Label className="post-profile-picture">
-              {postAuthorMeta !== null && postAuthorMeta[USER_PROFILE_PICTURE]
     ? (
         <Image
           avatar
@@ -107,7 +105,24 @@ const PostListRow = (props) => {
           inverted
           color="black"
         />
-                )}
+    )), [postAuthorMeta]);
+
+  const authorAvatarLink = useMemo(() => {
+    if (postAuthorAddress) {
+      return (
+          <Link to={`/users/${postAuthorAddress}`}>
+              {authorAvatar}
+          </Link>
+      );
+    }
+
+    return authorAvatar;
+  }, [authorAvatar, postAuthorAddress]);
+
+  return useMemo(() => (
+      <Dimmer.Dimmable as={Feed.Event} blurring dimmed={loading}>
+          <Feed.Label className="post-profile-picture">
+              {authorAvatarLink}
           </Feed.Label>
           <Feed.Content>
               <Feed.Summary>
@@ -119,12 +134,12 @@ const PostListRow = (props) => {
                           {t('post.list.row.post.id', { id: postIndexInTopic })}
                       </span>
                   </div>
-                  {postAuthor !== null && timeAgo !== null
+                  {postAuthor !== null && setPostAuthorAddress !== null && timeAgo !== null
                     ? (
                         <>
                             {t('post.list.row.author.pre')}
                             &nbsp;
-                            <Feed.User>{postAuthor}</Feed.User>
+                            <Feed.User as={Link} to={`/users/${postAuthorAddress}`}>{postAuthor}</Feed.User>
                             <Feed.Date className="post-summary-meta-date">{timeAgo}</Feed.Date>
                         </>
                     )
@@ -135,7 +150,7 @@ const PostListRow = (props) => {
               </Feed.Extra>
           </Feed.Content>
       </Dimmer.Dimmable>
-  ), [loading, postAuthor, postAuthorMeta, postContent, postIndexInTopic, postSubject, t, timeAgo]);
+  ), [authorAvatarLink, loading, postAuthor, postContent, postIndexInTopic, postSubject, t, timeAgo]);
 };
 
 PostListRow.defaultProps = {

packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import moment from 'moment';
 import { useHistory } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
 import { breeze } from '../../../redux/store';
 import './styles.css';
@@ -88,14 +89,11 @@ const TopicListRow = (props) => {
     }
   }, [topicAuthorAddress, users]);
 
-  return useMemo(() => {
+  const stopClickPropagation = (event) => {
-    const handleTopicClick = () => {
+    event.stopPropagation();
-      history.push(`/topics/${topicId}`);
   };
 
-    return (
+  const authorAvatar = useMemo(() => (topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE]
-        <Dimmer.Dimmable as={List.Item} onClick={handleTopicClick} blurring dimmed={loading} className="list-item">
-            {topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE]
     ? (
         <Image
           className="profile-picture"
@@ -111,7 +109,28 @@ const TopicListRow = (props) => {
           color="black"
           verticalAlign="middle"
         />
-              )}
+    )), [topicAuthorMeta]);
+
+  const authorAvatarLink = useMemo(() => {
+    if (topicAuthorAddress) {
+      return (
+          <Link to={`/users/${topicAuthorAddress}`} onClick={stopClickPropagation}>
+              {authorAvatar}
+          </Link>
+      );
+    }
+
+    return authorAvatar;
+  }, [authorAvatar, topicAuthorAddress]);
+
+  return useMemo(() => {
+    const handleTopicClick = () => {
+      history.push(`/topics/${topicId}`);
+    };
+
+    return (
+        <Dimmer.Dimmable as={List.Item} onClick={handleTopicClick} blurring dimmed={loading} className="list-item">
+            {authorAvatarLink}
             <List.Content className="list-content">
                 <List.Header>
                     <Grid>
@@ -148,7 +167,7 @@ const TopicListRow = (props) => {
             </List.Content>
         </Dimmer.Dimmable>
     );
-  }, [history, loading, numberOfReplies, t, timeAgo, topicAuthor, topicAuthorMeta, topicId, topicSubject]);
+  }, [authorAvatarLink, history, loading, numberOfReplies, t, timeAgo, topicAuthor, topicId, topicSubject]);
 };
 
 TopicListRow.defaultProps = {

packages/concordia-app/src/views/Topic/TopicView/index.jsx

@@ -5,6 +5,8 @@ import {
   Container, Dimmer, Icon, Image, Placeholder, Step,
 } from 'semantic-ui-react';
 import moment from 'moment';
+import { useHistory } from 'react-router';
+import { Link } from 'react-router-dom';
 import { breeze, drizzle } from '../../../redux/store';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
 import './styles.css';
@@ -36,7 +38,7 @@ const TopicView = (props) => {
   const [timestamp, setTimestamp] = useState(initialTimestamp || null);
   const [postIds, setPostIds] = useState(initialPostIds || null);
   const [topicSubject, setTopicSubject] = useState(null);
-
+  const history = useHistory();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -114,6 +116,7 @@ const TopicView = (props) => {
           >
               <Step.Group fluid>
                   <Step key="topic-header-step-user">
+                      <Link to={`/users/${topicAuthorAddress}`}>
                           {topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE]
                             ? (
                                 <Image
@@ -129,13 +132,16 @@ const TopicView = (props) => {
                                   color="black"
                                 />
                             )}
+                      </Link>
                       <Step.Content>
                           <Step.Title>
+                              <Link to={`/users/${topicAuthorAddress}`}>
                                   {topicAuthor || (
                                       <Placeholder id="author-placeholder" inverted>
                                           <Placeholder.Line length="full" />
                                       </Placeholder>
                                   )}
+                              </Link>
                           </Step.Title>
                       </Step.Content>
                   </Step>