diff --git a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx index 1b7e666..06b5bdb 100644 --- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx +++ b/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] + ? ( + + ) + : ( + + )), [postAuthorMeta]); + + const authorAvatarLink = useMemo(() => { + if (postAuthorAddress) { + return ( + + {authorAvatar} + + ); + } + + return authorAvatar; + }, [authorAvatar, postAuthorAddress]); + return useMemo(() => ( - {postAuthorMeta !== null && postAuthorMeta[USER_PROFILE_PICTURE] - ? ( - - ) - : ( - - )} + {authorAvatarLink} @@ -119,12 +134,12 @@ const PostListRow = (props) => { {t('post.list.row.post.id', { id: postIndexInTopic })} - {postAuthor !== null && timeAgo !== null + {postAuthor !== null && setPostAuthorAddress !== null && timeAgo !== null ? ( <> {t('post.list.row.author.pre')}   - {postAuthor} + {postAuthor} {timeAgo} ) @@ -135,7 +150,7 @@ const PostListRow = (props) => { - ), [loading, postAuthor, postAuthorMeta, postContent, postIndexInTopic, postSubject, t, timeAgo]); + ), [authorAvatarLink, loading, postAuthor, postContent, postIndexInTopic, postSubject, t, timeAgo]); }; PostListRow.defaultProps = { diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx index 4e6196d..f77cd59 100644 --- a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx +++ b/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] + ? ( + + ) + : ( + + )), [topicAuthorMeta]); + + const authorAvatarLink = useMemo(() => { + if (topicAuthorAddress) { + return ( + + {authorAvatar} + + ); + } + + return authorAvatar; + }, [authorAvatar, topicAuthorAddress]); + return useMemo(() => { const handleTopicClick = () => { history.push(`/topics/${topicId}`); @@ -95,23 +130,7 @@ const TopicListRow = (props) => { return ( - {topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE] - ? ( - - ) - : ( - - )} + {authorAvatarLink} @@ -148,7 +167,7 @@ const TopicListRow = (props) => { ); - }, [history, loading, numberOfReplies, t, timeAgo, topicAuthor, topicAuthorMeta, topicId, topicSubject]); + }, [authorAvatarLink, history, loading, numberOfReplies, t, timeAgo, topicAuthor, topicId, topicSubject]); }; TopicListRow.defaultProps = { diff --git a/packages/concordia-app/src/views/Topic/TopicView/index.jsx b/packages/concordia-app/src/views/Topic/TopicView/index.jsx index eb22308..9f4ddb3 100644 --- a/packages/concordia-app/src/views/Topic/TopicView/index.jsx +++ b/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) => { > - {topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE] - ? ( - - ) - : ( - - )} + + {topicAuthorMeta !== null && topicAuthorMeta[USER_PROFILE_PICTURE] + ? ( + + ) + : ( + + )} + - {topicAuthor || ( - - - - )} + + {topicAuthor || ( + + + + )} +