diff --git a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx index e9208c0..ac639a6 100644 --- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx +++ b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx @@ -2,7 +2,7 @@ import React, { memo, useEffect, useMemo, useState, } from 'react'; import { - Dimmer, Grid, List, Placeholder, + Dimmer, Grid, Image, List, Placeholder, } from 'semantic-ui-react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; @@ -12,7 +12,9 @@ import { useDispatch, useSelector } from 'react-redux'; import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions'; import { breeze } from '../../../redux/store'; import './styles.css'; -import { POSTS_DATABASE } from '../../../constants/OrbitDatabases'; +import { POSTS_DATABASE, USER_DATABASE } from '../../../constants/OrbitDatabases'; +import determineKVAddress from '../../../utils/orbitUtils'; +import { PROFILE_PICTURE } from '../../../constants/UserDatabaseKeys'; const { orbit } = breeze; @@ -24,8 +26,10 @@ const PostListRow = (props) => { const [timeAgo, setTimeAgo] = useState(null); const [postSubject, setPostSubject] = useState(null); const [postMessage, setPostMessage] = useState(null); + const [postAuthorMeta, setPostAuthorMeta] = useState(null); const userAddress = useSelector((state) => state.user.address); const posts = useSelector((state) => state.orbitData.posts); + const users = useSelector((state) => state.orbitData.users); const dispatch = useDispatch(); const history = useHistory(); const { t } = useTranslation(); @@ -46,6 +50,13 @@ const PostListRow = (props) => { dbName: POSTS_DATABASE, userAddress: postAuthorAddress, }); + + dispatch({ + type: FETCH_USER_DATABASE, + orbit, + dbName: USER_DATABASE, + userAddress: postAuthorAddress, + }); } }, [dispatch, postAuthorAddress, userAddress]); @@ -59,10 +70,43 @@ const PostListRow = (props) => { } }, [postId, posts]); + useEffect(() => { + if (postAuthorAddress !== null) { + determineKVAddress({ orbit, dbName: USER_DATABASE, userAddress: postAuthorAddress }) + .then((userOrbitAddress) => { + const userFound = users + .find((user) => user.id === userOrbitAddress); + + if (userFound) { + setPostAuthorMeta(userFound); + } + }) + .catch((error) => { + console.error('Error during determination of key-value DB address:', error); + }); + } + }, [postAuthorAddress, users]); + return useMemo(() => ( - - + {postAuthorMeta !== null && postAuthorMeta[PROFILE_PICTURE] + ? ( + + ) + : ( + + )} + @@ -87,8 +131,11 @@ const PostListRow = (props) => { + + {postMessage} + - ), [loading, postAuthor, postId, postSubject, t, timeAgo]); + ), [loading, postAuthor, postAuthorMeta, postId, postMessage, postSubject, t, timeAgo]); }; PostListRow.defaultProps = { diff --git a/packages/concordia-app/src/components/PostList/PostListRow/styles.css b/packages/concordia-app/src/components/PostList/PostListRow/styles.css index 0058f79..83f366b 100644 --- a/packages/concordia-app/src/components/PostList/PostListRow/styles.css +++ b/packages/concordia-app/src/components/PostList/PostListRow/styles.css @@ -4,5 +4,18 @@ } .list-item { + display: flex !important; text-align: start; } + +.profile-picture { + cursor: pointer; + max-width: 36px; + max-height: 36px; + margin: 0; + vertical-align: middle; +} + +.list-content { + flex-grow: 1; +}