From 2d90c587c07abff1c732ed289238c99535ef2c89 Mon Sep 17 00:00:00 2001 From: Ezerous Date: Tue, 26 Jan 2021 12:43:16 +0200 Subject: [PATCH] TopicView changes, other fixes --- .../public/locales/en/translation.json | 1 - .../concordia-app/src/assets/css/index.css | 1 + .../src/components/PostCreate/index.jsx | 27 +--- .../src/components/PostCreate/styles.css | 12 +- .../components/PostList/PostListRow/index.jsx | 2 +- .../PostList/PostListRow/styles.css | 13 +- .../src/components/PostList/index.jsx | 14 +- .../TopicList/TopicListRow/index.jsx | 128 +++++++++--------- .../TopicList/TopicListRow/styles.css | 25 +++- .../src/components/TopicList/index.jsx | 12 +- .../src/views/Topic/TopicView/index.jsx | 107 ++++++--------- .../src/views/Topic/TopicView/styles.css | 6 + 12 files changed, 174 insertions(+), 174 deletions(-) diff --git a/packages/concordia-app/public/locales/en/translation.json b/packages/concordia-app/public/locales/en/translation.json index e9c42a5..e09a733 100644 --- a/packages/concordia-app/public/locales/en/translation.json +++ b/packages/concordia-app/public/locales/en/translation.json @@ -72,7 +72,6 @@ "topic.create.form.post.button": "Post", "topic.create.form.subject.field.label": "Topic subject", "topic.create.form.subject.field.placeholder": "Subject", - "topic.list.row.number.of.replies": "{{numberOfReplies}} replies", "topic.list.row.topic.id": "#{{id}}", "username.selector.error.username.empty.message": "Username is required", "username.selector.error.username.taken.message": "The username {{username}} is already taken.", diff --git a/packages/concordia-app/src/assets/css/index.css b/packages/concordia-app/src/assets/css/index.css index 31db996..aed14e1 100644 --- a/packages/concordia-app/src/assets/css/index.css +++ b/packages/concordia-app/src/assets/css/index.css @@ -1,6 +1,7 @@ body.app { overflow: auto; margin: 0; + background: #E6E6E6; } div { diff --git a/packages/concordia-app/src/components/PostCreate/index.jsx b/packages/concordia-app/src/components/PostCreate/index.jsx index 27d966a..360d4ae 100644 --- a/packages/concordia-app/src/components/PostCreate/index.jsx +++ b/packages/concordia-app/src/components/PostCreate/index.jsx @@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useState, } from 'react'; import { - Button, Feed, Form, Icon, Image, TextArea, + Button, Feed, Form, Icon, TextArea, } from 'semantic-ui-react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; @@ -10,7 +10,6 @@ import { useDispatch, useSelector } from 'react-redux'; import determineKVAddress from '../../utils/orbitUtils'; import { POSTS_DATABASE, USER_DATABASE } from '../../constants/orbit/OrbitDatabases'; import { FETCH_USER_DATABASE } from '../../redux/actions/peerDbReplicationActions'; -import { USER_PROFILE_PICTURE } from '../../constants/orbit/UserDatabaseKeys'; import { breeze, drizzle } from '../../redux/store'; import './styles.css'; import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../constants/TransactionStatus'; @@ -28,7 +27,6 @@ const PostCreate = (props) => { const transactionStack = useSelector((state) => state.transactionStack); const transactions = useSelector((state) => state.transactions); const [postContent, setPostContent] = useState(''); - const [userProfilePictureUrl, setUserProfilePictureUrl] = useState(); const [createPostCacheSendStackId, setCreatePostCacheSendStackId] = useState(''); const [posting, setPosting] = useState(false); const [storingPost, setStoringPost] = useState(false); @@ -44,9 +42,7 @@ const PostCreate = (props) => { const userFound = users .find((user) => user.id === userOrbitAddress); - if (userFound) { - setUserProfilePictureUrl(userFound[USER_PROFILE_PICTURE]); - } else { + if (!userFound) { dispatch({ type: FETCH_USER_DATABASE, orbit, @@ -122,23 +118,6 @@ const PostCreate = (props) => { return ( - - {userProfilePictureUrl - ? ( - - ) - : ( - - )} -
@@ -152,7 +131,7 @@ const PostCreate = (props) => { />
- + { {authorAvatarLink} - + diff --git a/packages/concordia-app/src/components/PostList/PostListRow/styles.css b/packages/concordia-app/src/components/PostList/PostListRow/styles.css index f6760c2..203f80c 100644 --- a/packages/concordia-app/src/components/PostList/PostListRow/styles.css +++ b/packages/concordia-app/src/components/PostList/PostListRow/styles.css @@ -1,5 +1,16 @@ .post-profile-picture { - margin: 5px 0 0 0; + margin-top: 1rem; +} + +.post-profile-picture img { + border-radius: 50%; + width: 2em !important; + height: 2em !important; + margin: 0 !important; +} + +.post-content { + margin-left: 0.5rem !important; } .post-summary-meta-index { diff --git a/packages/concordia-app/src/components/PostList/index.jsx b/packages/concordia-app/src/components/PostList/index.jsx index a967ccd..1070855 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 PostListRow from './PostListRow'; import { drizzle } from '../../redux/store'; import { FORUM_CONTRACT } from '../../constants/contracts/ContractNames'; @@ -58,10 +60,12 @@ const PostList = (props) => { }, [focusOnPost, getPostCallHashes, loading, postIds]); return ( - - - {posts} - + + + + {posts} + + ); }; diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx index e70c0a4..c5e329b 100644 --- a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx +++ b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx @@ -2,11 +2,12 @@ import React, { memo, useEffect, useMemo, useState, } from 'react'; import { - Dimmer, Grid, Image, Item, List, Placeholder, Segment, + Dimmer, Grid, Icon, Image, Item, List, Placeholder, Segment, } from 'semantic-ui-react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import TimeAgo from 'react-timeago'; +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'; @@ -33,6 +34,7 @@ const TopicListRow = (props) => { const topics = useSelector((state) => state.orbitData.topics); const users = useSelector((state) => state.orbitData.users); const dispatch = useDispatch(); + const history = useHistory(); const { t } = useTranslation(); useEffect(() => { @@ -40,7 +42,7 @@ const TopicListRow = (props) => { setTopicAuthorAddress(getTopicResults[topicCallHash].value[0]); setTopicAuthor(getTopicResults[topicCallHash].value[1]); setTimeAgo(getTopicResults[topicCallHash].value[2] * 1000); - setNumberOfReplies(getTopicResults[topicCallHash].value[3].length); + setNumberOfReplies(getTopicResults[topicCallHash].value[3].length - 1); } }, [getTopicResults, loading, topicCallHash]); @@ -121,65 +123,69 @@ const TopicListRow = (props) => { return authorAvatar; }, [authorAvatar, topicAuthorAddress]); - return useMemo(() => ( - - - - - - {authorAvatarLink} - - - - - - - - {topicSubject !== null - ? topicSubject - : } - - - - {t('topic.list.row.topic.id', { id: topicId })} - - - - - - {topicAuthor !== null && timeAgo !== null - ? ( -
- -  •  - - {topicAuthor} - -
- ) - : } - - - {numberOfReplies !== null - ? ( - - {t('topic.list.row.number.of.replies', { numberOfReplies })} - - ) - : } - - - - - - - - - - - - - ), [authorAvatarLink, loading, numberOfReplies, t, timeAgo, topicAuthor, topicAuthorAddress, topicId, topicSubject]); + return useMemo(() => { + const handleTopicClick = () => { + history.push(`/topics/${topicId}`); + }; + return ( + + + + + + {authorAvatarLink} + + + + + + + {topicSubject !== null + ? topicSubject + : } + + + + {t('topic.list.row.topic.id', { id: topicId })} + + + + + + {topicAuthor !== null && timeAgo !== null + ? ( +
+ +  •  + + {topicAuthor} + +
+ ) + : } + + + {numberOfReplies !== null + ? ( + + +   + { numberOfReplies } + + ) + : } + + + + + + + + + + + ); + }, [authorAvatarLink, history, loading, numberOfReplies, t, timeAgo, topicAuthor, topicAuthorAddress, topicId, topicSubject]); }; TopicListRow.defaultProps = { diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css b/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css index e520ff8..b7a1e9c 100644 --- a/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css +++ b/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css @@ -1,6 +1,7 @@ .topic-row { display: flex !important; text-align: start; + cursor: pointer; } .topic-row-segment { @@ -8,18 +9,26 @@ } .topic-row-segment:hover { - background-color: rgba(0, 0, 0, 0.03); + background-color: #F7F7F7; } .topic-row-segment div { color: black; } +.topic-row-segment .placeholder{ + font-size: 0.9rem; +} + +.topic-row-segment .placeholder>.line { + background-color:transparent; +} + .topic-row-avatar { margin: auto; padding-left: 0.75em !important; padding-right: 0 !important; - font-size: 2em; + font-size: 2rem; } .topic-row-avatar i { @@ -28,17 +37,16 @@ } .topic-row-content { - padding-left: 2em !important; + padding-left: 2rem !important; } .topic-row-subject { - font-size: 1.25em; + font-size: 1.4rem; font-weight: bold; } .topic-row-metadata { - font-size: 12px !important; - font-weight: initial; + font-size: 0.9em !important; } .profile-picture { @@ -47,3 +55,8 @@ width: 2em; height: 2em; } + +.replies-placeholder{ + float:right; + width: 6rem; +} diff --git a/packages/concordia-app/src/components/TopicList/index.jsx b/packages/concordia-app/src/components/TopicList/index.jsx index ee53b99..15dde57 100644 --- a/packages/concordia-app/src/components/TopicList/index.jsx +++ b/packages/concordia-app/src/components/TopicList/index.jsx @@ -58,12 +58,12 @@ const TopicList = (props) => {
{hasSignedUp && history.location.pathname === '/home' && (