Browse Source

PostList improvements

develop
Ezerous 4 years ago
parent
commit
2d5bfa4850
  1. 1
      packages/concordia-app/public/locales/en/translation.json
  2. 27
      packages/concordia-app/src/components/PostCreate/index.jsx
  3. 8
      packages/concordia-app/src/components/PostCreate/styles.css
  4. 11
      packages/concordia-app/src/components/PostList/PostListRow/index.jsx
  5. 4
      packages/concordia-app/src/components/PostList/PostListRow/styles.css
  6. 2
      packages/concordia-app/src/constants/PostsDatabaseKeys.js
  7. 3
      packages/concordia-app/src/redux/sagas/peerDbReplicationSaga.js
  8. 3
      packages/concordia-app/src/views/Topic/TopicCreate/index.jsx

1
packages/concordia-app/public/locales/en/translation.json

@ -6,7 +6,6 @@
"post.create.form.send.button": "Post", "post.create.form.send.button": "Post",
"post.form.content.field.placeholder": "Message", "post.form.content.field.placeholder": "Message",
"post.form.subject.field.placeholder": "Subject", "post.form.subject.field.placeholder": "Subject",
"post.list.row.author.pre": "Post by",
"post.list.row.post.id": "#{{id}}", "post.list.row.post.id": "#{{id}}",
"profile.general.tab.address.row.title": "Account address:", "profile.general.tab.address.row.title": "Account address:",
"profile.general.tab.location.row.title": "Location:", "profile.general.tab.location.row.title": "Location:",

27
packages/concordia-app/src/components/PostCreate/index.jsx

@ -14,7 +14,7 @@ import { USER_PROFILE_PICTURE } from '../../constants/UserDatabaseKeys';
import { breeze, drizzle } from '../../redux/store'; import { breeze, drizzle } from '../../redux/store';
import './styles.css'; import './styles.css';
import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../constants/TransactionStatus'; import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../constants/TransactionStatus';
import { POST_CONTENT, POST_SUBJECT } from '../../constants/PostsDatabaseKeys'; import { POST_CONTENT } from '../../constants/PostsDatabaseKeys';
import { FORUM_CONTRACT } from '../../constants/ContractNames'; import { FORUM_CONTRACT } from '../../constants/ContractNames';
import { POST_CREATED_EVENT } from '../../constants/ForumContractEvents'; import { POST_CREATED_EVENT } from '../../constants/ForumContractEvents';
@ -27,7 +27,7 @@ const PostCreate = (props) => {
} = props; } = props;
const transactionStack = useSelector((state) => state.transactionStack); const transactionStack = useSelector((state) => state.transactionStack);
const transactions = useSelector((state) => state.transactions); const transactions = useSelector((state) => state.transactions);
const [postSubject, setPostSubject] = useState(initialPostSubject); const [postSubject] = useState(initialPostSubject);
const [postContent, setPostContent] = useState(''); const [postContent, setPostContent] = useState('');
const [userProfilePictureUrl, setUserProfilePictureUrl] = useState(); const [userProfilePictureUrl, setUserProfilePictureUrl] = useState();
const [createPostCacheSendStackId, setCreatePostCacheSendStackId] = useState(''); const [createPostCacheSendStackId, setCreatePostCacheSendStackId] = useState('');
@ -68,9 +68,6 @@ const PostCreate = (props) => {
} }
switch (event.target.name) { switch (event.target.name) {
case 'postSubject':
setPostSubject(event.target.value);
break;
case 'postContent': case 'postContent':
setPostContent(event.target.value); setPostContent(event.target.value);
break; break;
@ -94,11 +91,9 @@ const PostCreate = (props) => {
postsDb postsDb
.put(contractPostId, { .put(contractPostId, {
[POST_SUBJECT]: postSubject,
[POST_CONTENT]: postContent, [POST_CONTENT]: postContent,
}, { pin: true }) }, { pin: true })
.then(() => { .then(() => {
setPostSubject(initialPostSubject);
setPostContent(''); setPostContent('');
setPosting(false); setPosting(false);
setStoringPost(false); setStoringPost(false);
@ -147,21 +142,6 @@ const PostCreate = (props) => {
</Feed.Label> </Feed.Label>
<Feed.Content> <Feed.Content>
<Feed.Summary> <Feed.Summary>
<div>
<Input
placeholder={t('post.form.subject.field.placeholder')}
name="postSubject"
className="subject-input"
size="mini"
value={postSubject}
onChange={handleInputChange}
/>
<span className="post-summary-meta-index">
{t('post.list.row.post.id', { id: postIndexInTopic })}
</span>
</div>
</Feed.Summary>
<Feed.Extra>
<Form> <Form>
<TextArea <TextArea
placeholder={t('post.form.content.field.placeholder')} placeholder={t('post.form.content.field.placeholder')}
@ -172,8 +152,7 @@ const PostCreate = (props) => {
onChange={handleInputChange} onChange={handleInputChange}
/> />
</Form> </Form>
</Feed.Extra> </Feed.Summary>
<Feed.Meta> <Feed.Meta>
<Feed.Like> <Feed.Like>
<Form.Button <Form.Button

8
packages/concordia-app/src/components/PostCreate/styles.css

@ -8,14 +8,6 @@
opacity: 0.4; opacity: 0.4;
} }
.post-summary-meta-date {
float: right !important;
}
.subject-input {
min-width: 300px;
}
.like:hover .icon { .like:hover .icon {
color: #fff !important; color: #fff !important;
} }

11
packages/concordia-app/src/components/PostList/PostListRow/index.jsx

@ -15,7 +15,7 @@ import './styles.css';
import { POSTS_DATABASE, USER_DATABASE } from '../../../constants/OrbitDatabases'; import { POSTS_DATABASE, USER_DATABASE } from '../../../constants/OrbitDatabases';
import determineKVAddress from '../../../utils/orbitUtils'; import determineKVAddress from '../../../utils/orbitUtils';
import { USER_PROFILE_PICTURE } from '../../../constants/UserDatabaseKeys'; import { USER_PROFILE_PICTURE } from '../../../constants/UserDatabaseKeys';
import { POST_CONTENT, POST_SUBJECT } from '../../../constants/PostsDatabaseKeys'; import { POST_CONTENT } from '../../../constants/PostsDatabaseKeys';
import { FORUM_CONTRACT } from '../../../constants/ContractNames'; import { FORUM_CONTRACT } from '../../../constants/ContractNames';
const { orbit } = breeze; const { orbit } = breeze;
@ -28,7 +28,6 @@ const PostListRow = (props) => {
const [postAuthorAddress, setPostAuthorAddress] = useState(null); const [postAuthorAddress, setPostAuthorAddress] = useState(null);
const [postAuthor, setPostAuthor] = useState(null); const [postAuthor, setPostAuthor] = useState(null);
const [timeAgo, setTimeAgo] = useState(null); const [timeAgo, setTimeAgo] = useState(null);
const [postSubject, setPostSubject] = useState(null);
const [postContent, setPostContent] = useState(null); const [postContent, setPostContent] = useState(null);
const [postAuthorMeta, setPostAuthorMeta] = useState(null); const [postAuthorMeta, setPostAuthorMeta] = useState(null);
const userAddress = useSelector((state) => state.user.address); const userAddress = useSelector((state) => state.user.address);
@ -68,7 +67,6 @@ const PostListRow = (props) => {
.find((post) => post.id === postId); .find((post) => post.id === postId);
if (postFound) { if (postFound) {
setPostSubject(postFound[POST_SUBJECT]);
setPostContent(postFound[POST_CONTENT]); setPostContent(postFound[POST_CONTENT]);
} }
}, [postId, posts]); }, [postId, posts]);
@ -126,9 +124,6 @@ const PostListRow = (props) => {
<Feed.Content> <Feed.Content>
<Feed.Summary> <Feed.Summary>
<div> <div>
{postSubject !== null
? postSubject
: <Placeholder><Placeholder.Line length="very long" /></Placeholder>}
<span className="post-summary-meta-index"> <span className="post-summary-meta-index">
{t('post.list.row.post.id', { id: postIndexInTopic })} {t('post.list.row.post.id', { id: postIndexInTopic })}
</span> </span>
@ -136,8 +131,6 @@ const PostListRow = (props) => {
{postAuthor !== null && setPostAuthorAddress !== null && timeAgo !== null {postAuthor !== null && setPostAuthorAddress !== null && timeAgo !== null
? ( ? (
<> <>
{t('post.list.row.author.pre')}
&nbsp;
<Feed.User as={Link} to={`/users/${postAuthorAddress}`}>{postAuthor}</Feed.User> <Feed.User as={Link} to={`/users/${postAuthorAddress}`}>{postAuthor}</Feed.User>
<Feed.Date className="post-summary-meta-date">{timeAgo}</Feed.Date> <Feed.Date className="post-summary-meta-date">{timeAgo}</Feed.Date>
</> </>
@ -150,7 +143,7 @@ const PostListRow = (props) => {
</Feed.Content> </Feed.Content>
</Dimmer.Dimmable> </Dimmer.Dimmable>
), [ ), [
authorAvatarLink, loading, postAuthor, postAuthorAddress, postContent, postIndexInTopic, postSubject, t, timeAgo, authorAvatarLink, loading, postAuthor, postAuthorAddress, postContent, postIndexInTopic, t, timeAgo,
]); ]);
}; };

4
packages/concordia-app/src/components/PostList/PostListRow/styles.css

@ -7,7 +7,3 @@
font-size: 12px; font-size: 12px;
opacity: 0.4; opacity: 0.4;
} }
.post-summary-meta-date {
float: right !important;
}

2
packages/concordia-app/src/constants/PostsDatabaseKeys.js

@ -1,8 +1,6 @@
export const POST_SUBJECT = 'subject';
export const POST_CONTENT = 'content'; export const POST_CONTENT = 'content';
const postsDatabaseKeys = [ const postsDatabaseKeys = [
POST_SUBJECT,
POST_CONTENT, POST_CONTENT,
]; ];

3
packages/concordia-app/src/redux/sagas/peerDbReplicationSaga.js

@ -12,7 +12,7 @@ import { FETCH_USER_DATABASE, UPDATE_ORBIT_DATA } from '../actions/peerDbReplica
import { POSTS_DATABASE, TOPICS_DATABASE, USER_DATABASE } from '../../constants/OrbitDatabases'; import { POSTS_DATABASE, TOPICS_DATABASE, USER_DATABASE } from '../../constants/OrbitDatabases';
import userDatabaseKeys from '../../constants/UserDatabaseKeys'; import userDatabaseKeys from '../../constants/UserDatabaseKeys';
import { TOPIC_SUBJECT } from '../../constants/TopicsDatabaseKeys'; import { TOPIC_SUBJECT } from '../../constants/TopicsDatabaseKeys';
import { POST_CONTENT, POST_SUBJECT } from '../../constants/PostsDatabaseKeys'; import { POST_CONTENT } from '../../constants/PostsDatabaseKeys';
function* fetchUserDb({ orbit, userAddress, dbName }) { function* fetchUserDb({ orbit, userAddress, dbName }) {
const peerDbAddress = yield call(determineKVAddress, { const peerDbAddress = yield call(determineKVAddress, {
@ -94,7 +94,6 @@ function* updateReduxState({ database }) {
...oldPostsUnchanged, ...oldPostsUnchanged,
...Object.entries(database.all).map(([key, value]) => ({ ...Object.entries(database.all).map(([key, value]) => ({
id: parseInt(key, 10), id: parseInt(key, 10),
[POST_SUBJECT]: value[POST_SUBJECT],
[POST_CONTENT]: value[POST_CONTENT], [POST_CONTENT]: value[POST_CONTENT],
})), })),
], ],

3
packages/concordia-app/src/views/Topic/TopicCreate/index.jsx

@ -12,7 +12,7 @@ import { drizzle, breeze } from '../../../redux/store';
import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../../constants/TransactionStatus'; import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../../constants/TransactionStatus';
import { POSTS_DATABASE, TOPICS_DATABASE } from '../../../constants/OrbitDatabases'; import { POSTS_DATABASE, TOPICS_DATABASE } from '../../../constants/OrbitDatabases';
import { TOPIC_SUBJECT } from '../../../constants/TopicsDatabaseKeys'; import { TOPIC_SUBJECT } from '../../../constants/TopicsDatabaseKeys';
import { POST_CONTENT, POST_SUBJECT } from '../../../constants/PostsDatabaseKeys'; import { POST_CONTENT } from '../../../constants/PostsDatabaseKeys';
import { FORUM_CONTRACT } from '../../../constants/ContractNames'; import { FORUM_CONTRACT } from '../../../constants/ContractNames';
import { TOPIC_CREATED_EVENT } from '../../../constants/ForumContractEvents'; import { TOPIC_CREATED_EVENT } from '../../../constants/ForumContractEvents';
@ -74,7 +74,6 @@ const TopicCreate = (props) => {
.put(topicId, { [TOPIC_SUBJECT]: subjectInput }, { pin: true }) .put(topicId, { [TOPIC_SUBJECT]: subjectInput }, { pin: true })
.then(() => postsDb .then(() => postsDb
.put(postId, { .put(postId, {
[POST_SUBJECT]: subjectInput,
[POST_CONTENT]: contentInput, [POST_CONTENT]: contentInput,
}, { pin: true })) }, { pin: true }))
.then(() => { .then(() => {

Loading…
Cancel
Save