diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx index 1973c77..786e770 100644 --- a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx +++ b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx @@ -82,7 +82,7 @@ const TopicListRow = (props) => { } }) .catch((error) => { - console.error('Error during service worker registration:', error); + console.error('Error during determination of key-value DB address:', error); }); } }, [topicAuthorAddress, users]); diff --git a/packages/concordia-app/src/views/Topic/TopicView/index.jsx b/packages/concordia-app/src/views/Topic/TopicView/index.jsx index 446ba31..60ad646 100644 --- a/packages/concordia-app/src/views/Topic/TopicView/index.jsx +++ b/packages/concordia-app/src/views/Topic/TopicView/index.jsx @@ -2,14 +2,16 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; import { - Container, Dimmer, Icon, Placeholder, Step, + Container, Dimmer, Icon, Image, Placeholder, Step, } from 'semantic-ui-react'; import moment from 'moment'; import { breeze, drizzle } from '../../../redux/store'; import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions'; import './styles.css'; import PostList from '../../../components/PostList'; -import { TOPICS_DATABASE } from '../../../constants/OrbitDatabases'; +import { TOPICS_DATABASE, USER_DATABASE } from '../../../constants/OrbitDatabases'; +import determineKVAddress from '../../../utils/orbitUtils'; +import { PROFILE_PICTURE } from '../../../constants/UserDatabaseKeys'; const { contracts: { Forum: { methods: { getTopic: { cacheCall: getTopicChainData } } } } } = drizzle; const { orbit } = breeze; @@ -24,9 +26,11 @@ const TopicView = (props) => { const userAddress = useSelector((state) => state.user.address); const getTopicResults = useSelector((state) => state.contracts.Forum.getTopic); const topics = useSelector((state) => state.orbitData.topics); + const users = useSelector((state) => state.orbitData.users); const [getTopicCallHash, setGetTopicCallHash] = useState([]); const [topicAuthorAddress, setTopicAuthorAddress] = useState(initialTopicAuthorAddress || null); const [topicAuthor, setTopicAuthor] = useState(initialTopicAuthor || null); + const [topicAuthorMeta, setTopicAuthorMeta] = useState(null); const [timestamp, setTimestamp] = useState(initialTimestamp || null); const [postIds, setPostIds] = useState(initialPostIds || null); const [topicSubject, setTopicSubject] = useState(null); @@ -67,6 +71,30 @@ const TopicView = (props) => { } }, [dispatch, getTopicCallHash, getTopicResults, topicId, topics, userAddress]); + useEffect(() => { + if (topicAuthorAddress !== null) { + determineKVAddress({ orbit, dbName: USER_DATABASE, userAddress: topicAuthorAddress }) + .then((userOrbitAddress) => { + const userFound = users + .find((user) => user.id === userOrbitAddress); + + if (userFound) { + setTopicAuthorMeta(userFound); + } else { + dispatch({ + type: FETCH_USER_DATABASE, + orbit, + dbName: USER_DATABASE, + userAddress: topicAuthorAddress, + }); + } + }) + .catch((error) => { + console.error('Error during determination of key-value DB address:', error); + }); + } + }, [dispatch, topicAuthorAddress, users]); + useEffect(() => { const topicFound = topics .find((topic) => topic.id === topicId); @@ -84,7 +112,21 @@ const TopicView = (props) => { > - + {topicAuthorMeta !== null && topicAuthorMeta[PROFILE_PICTURE] + ? ( + + ) + : ( + + )} {topicAuthor || (