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,24 +91,38 @@ const PostListRow = (props) => {
     }
   }, [postAuthorAddress, users]);
 
+  const authorAvatar = useMemo(() => (postAuthorMeta !== null && postAuthorMeta[USER_PROFILE_PICTURE]
+    ? (
+        <Image
+          avatar
+          src={postAuthorMeta[USER_PROFILE_PICTURE]}
+        />
+    )
+    : (
+        <Icon
+          name="user circle"
+          size="big"
+          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">
-              {postAuthorMeta !== null && postAuthorMeta[USER_PROFILE_PICTURE]
-                ? (
-                    <Image
-                      avatar
-                      src={postAuthorMeta[USER_PROFILE_PICTURE]}
-                    />
-                )
-                : (
-                    <Icon
-                      name="user circle"
-                      size="big"
-                      inverted
-                      color="black"
-                    />
-                )}
+              {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,6 +89,40 @@ const TopicListRow = (props) => {
     }
   }, [topicAuthorAddress, users]);
 
+  const stopClickPropagation = (event) => {
+    event.stopPropagation();
+  };
+
+  const authorAvatar = useMemo(() => (topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE]
+    ? (
+        <Image
+          className="profile-picture"
+          avatar
+          src={topicAuthorMeta[USER_PROFILE_PICTURE]}
+        />
+    )
+    : (
+        <List.Icon
+          name="user circle"
+          size="big"
+          inverted
+          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}`);
@@ -95,23 +130,7 @@ const TopicListRow = (props) => {
 
     return (
         <Dimmer.Dimmable as={List.Item} onClick={handleTopicClick} blurring dimmed={loading} className="list-item">
-            {topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE]
-              ? (
-                  <Image
-                    className="profile-picture"
-                    avatar
-                    src={topicAuthorMeta[USER_PROFILE_PICTURE]}
-                  />
-              )
-              : (
-                  <List.Icon
-                    name="user circle"
-                    size="big"
-                    inverted
-                    color="black"
-                    verticalAlign="middle"
-                  />
-              )}
+            {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,28 +116,32 @@ const TopicView = (props) => {
           >
               <Step.Group fluid>
                   <Step key="topic-header-step-user">
-                      {topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE]
-                        ? (
-                            <Image
-                              avatar
-                              src={topicAuthorMeta[USER_PROFILE_PICTURE]}
-                            />
-                        )
-                        : (
-                            <Icon
-                              name="user circle"
-                              size="big"
-                              inverted
-                              color="black"
-                            />
-                        )}
+                      <Link to={`/users/${topicAuthorAddress}`}>
+                          {topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE]
+                            ? (
+                                <Image
+                                  avatar
+                                  src={topicAuthorMeta[USER_PROFILE_PICTURE]}
+                                />
+                            )
+                            : (
+                                <Icon
+                                  name="user circle"
+                                  size="big"
+                                  inverted
+                                  color="black"
+                                />
+                            )}
+                      </Link>
                       <Step.Content>
                           <Step.Title>
-                              {topicAuthor || (
-                                  <Placeholder id="author-placeholder" inverted>
-                                      <Placeholder.Line length="full" />
-                                  </Placeholder>
-                              )}
+                              <Link to={`/users/${topicAuthorAddress}`}>
+                                  {topicAuthor || (
+                                      <Placeholder id="author-placeholder" inverted>
+                                          <Placeholder.Line length="full" />
+                                      </Placeholder>
+                                  )}
+                              </Link>
                           </Step.Title>
                       </Step.Content>
                   </Step>