+
+ ), [disableVoting, downvoteCount, ownVote, totalVoteCount, upvoteCount, vote]);
+};
+
+PostVoting.propTypes = {
+ postId: PropTypes.number.isRequired,
+ postAuthorAddress: PropTypes.string,
+ totalVoteCount: PropTypes.number,
+};
+
+export default memo(PostVoting);
diff --git a/packages/concordia-app/src/components/PostList/PostVoting/styles.css b/packages/concordia-app/src/components/PostList/PostVoting/styles.css
new file mode 100644
index 0000000..340e95d
--- /dev/null
+++ b/packages/concordia-app/src/components/PostList/PostVoting/styles.css
@@ -0,0 +1,20 @@
+.post-voting {
+ float: left;
+ margin-top: 1.2rem;
+}
+
+.post-voting > button {
+ margin: 0 !important;
+}
+
+.post-voting > span{
+ vertical-align: middle;
+}
+
+.upvote-count {
+ color: #21ba45;
+}
+
+.downvote-count {
+ color: #db2828;
+}
diff --git a/packages/concordia-app/src/components/PostList/index.jsx b/packages/concordia-app/src/components/PostList/index.jsx
index 504a3a7..e2ca121 100644
--- a/packages/concordia-app/src/components/PostList/index.jsx
+++ b/packages/concordia-app/src/components/PostList/index.jsx
@@ -3,7 +3,9 @@ import React, {
} from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
-import { Dimmer, Feed, Loader } from 'semantic-ui-react';
+import {
+ Dimmer, Feed, Loader,
+} from 'semantic-ui-react';
import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
import PostListRow from './PostListRow';
import { drizzle } from '../../redux/store';
diff --git a/packages/concordia-app/src/components/ProfileImage.jsx b/packages/concordia-app/src/components/ProfileImage.jsx
new file mode 100644
index 0000000..5c78f66
--- /dev/null
+++ b/packages/concordia-app/src/components/ProfileImage.jsx
@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react';
+import Avatar from 'react-avatar';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { USER_PROFILE_PICTURE } from '../constants/orbit/UserDatabaseKeys';
+
+const ProfileImage = (props) => {
+ const {
+ topicAuthorAddress, topicAuthor, topicAuthorMeta, avatarUrl, size, link,
+ } = props;
+
+ const stopClickPropagation = (event) => {
+ event.stopPropagation();
+ };
+
+ const authorAvatar = useMemo(() => {
+ let profileImageUrl = '';
+ if (avatarUrl) profileImageUrl = avatarUrl;
+ else if (topicAuthorMeta && topicAuthorMeta[USER_PROFILE_PICTURE]) profileImageUrl = topicAuthorMeta[USER_PROFILE_PICTURE];
+
+ return (
+
- {t('topic.list.row.author', { author: topicAuthor })}
- ,
-
- )
- :
+
+ )
+ : -
+
-
{topics}
-
-
- {t('board.header.no.topics.message')}
-
-
- {t('board.sub.header.no.topics.guest')}
-
-
- );
- }
-
- return (
-
-
- {t('board.header.no.topics.message')}
-
-
- {t('board.sub.header.no.topics.user')}
-
-
- );
- }, [numberOfTopics, userHasSignedUp, t]);
+ const boardContents = useMemo(() => (
+ <>
+ {hasSignedUp
+ ? (
+