Merge branch 'implement-ui' into restore-docker-configuration

# Conflicts: # packages/concordia-app/src/components/PostCreate/index.jsx # packages/concordia-app/src/components/PostList/PostListRow/index.jsx # packages/concordia-app/src/redux/sagas/peerDbReplicationSaga.js # packages/concordia-app/src/views/Topic/TopicCreate/index.jsx
4 years ago · 2c0df97a6b
11 changed files with 31 additions and 58 deletions
--- a/packages/concordia-app/package.json
+++ b/packages/concordia-app/package.json
@ -45,6 +45,7 @@
    "react-router-dom": "^5.2.0",
    "react-scripts": "~3.4.3",
    "redux-saga": "~1.1.3",
+    "react-timeago": "~5.2.0",
    "semantic-ui-css": "~2.4.1",
    "semantic-ui-react": "~1.2.1",
    "web3": "1.3.0"
--- a/packages/concordia-app/public/locales/en/translation.json
+++ b/packages/concordia-app/public/locales/en/translation.json
@ -6,7 +6,6 @@
  "post.create.form.send.button": "Post",
  "post.form.content.field.placeholder": "Message",
  "post.form.subject.field.placeholder": "Subject",
-  "post.list.row.author.pre": "Post by",
  "post.list.row.post.id": "#{{id}}",
  "profile.general.tab.address.row.title": "Account address:",
  "profile.general.tab.location.row.title": "Location:",
@ -52,7 +51,7 @@
  "topic.create.form.post.button": "Post",
  "topic.create.form.subject.field.label": "Topic subject",
  "topic.create.form.subject.field.placeholder": "Subject",
-  "topic.list.row.author.date": "Created by {{author}}, {{timeAgo}}",
+  "topic.list.row.author": "by {{author}}",
  "topic.list.row.number.of.replies": "{{numberOfReplies}} replies",
  "topic.list.row.topic.id": "#{{id}}"
 }
--- a/packages/concordia-app/src/components/PostCreate/index.jsx
+++ b/packages/concordia-app/src/components/PostCreate/index.jsx
@ -14,7 +14,7 @@ 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';
-import { POST_CONTENT, POST_SUBJECT } from '../../constants/orbit/PostsDatabaseKeys';
+import { POST_CONTENT } from '../../constants/orbit/PostsDatabaseKeys';
 import { FORUM_CONTRACT } from '../../constants/contracts/ContractNames';
 import { POST_CREATED_EVENT } from '../../constants/contracts/events/ForumContractEvents';

@ -27,7 +27,7 @@ const PostCreate = (props) => {
  } = props;
  const transactionStack = useSelector((state) => state.transactionStack);
  const transactions = useSelector((state) => state.transactions);
-  const [postSubject, setPostSubject] = useState(initialPostSubject);
+  const [postSubject] = useState(initialPostSubject);
  const [postContent, setPostContent] = useState('');
  const [userProfilePictureUrl, setUserProfilePictureUrl] = useState();
  const [createPostCacheSendStackId, setCreatePostCacheSendStackId] = useState('');
@ -68,9 +68,6 @@ const PostCreate = (props) => {
    }

    switch (event.target.name) {
-      case 'postSubject':
-        setPostSubject(event.target.value);
-        break;
      case 'postContent':
        setPostContent(event.target.value);
        break;
@ -94,11 +91,9 @@ const PostCreate = (props) => {

        postsDb
          .put(contractPostId, {
-            [POST_SUBJECT]: postSubject,
            [POST_CONTENT]: postContent,
          }, { pin: true })
          .then(() => {
-            setPostSubject(initialPostSubject);
            setPostContent('');
            setPosting(false);
            setStoringPost(false);
@ -147,21 +142,6 @@ const PostCreate = (props) => {
              </Feed.Label>
              <Feed.Content>
                  <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>
                          <TextArea
                            placeholder={t('post.form.content.field.placeholder')}
@ -172,8 +152,7 @@ const PostCreate = (props) => {
                            onChange={handleInputChange}
                          />
                      </Form>
-                  </Feed.Extra>
-
+                  </Feed.Summary>
                  <Feed.Meta>
                      <Feed.Like>
                          <Form.Button
--- a/packages/concordia-app/src/components/PostCreate/styles.css
+++ b/packages/concordia-app/src/components/PostCreate/styles.css
@ -8,10 +8,6 @@
    opacity: 0.4;
 }

-.post-summary-meta-date {
-    float: right !important;
-}
-
-.subject-input {
-    min-width: 300px;
+.like:hover .icon {
+    color: #fff !important;
 }
--- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
+++ b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
@ -6,7 +6,7 @@ import {
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import moment from 'moment';
+import TimeAgo from 'react-timeago';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
@ -15,7 +15,7 @@ import './styles.css';
 import { POSTS_DATABASE, USER_DATABASE } from '../../../constants/orbit/OrbitDatabases';
 import determineKVAddress from '../../../utils/orbitUtils';
 import { USER_PROFILE_PICTURE } from '../../../constants/orbit/UserDatabaseKeys';
-import { POST_CONTENT, POST_SUBJECT } from '../../../constants/orbit/PostsDatabaseKeys';
+import { POST_CONTENT } from '../../../constants/orbit/PostsDatabaseKeys';
 import { FORUM_CONTRACT } from '../../../constants/contracts/ContractNames';

 const { orbit } = breeze;
@ -28,7 +28,6 @@ const PostListRow = (props) => {
  const [postAuthorAddress, setPostAuthorAddress] = useState(null);
  const [postAuthor, setPostAuthor] = useState(null);
  const [timeAgo, setTimeAgo] = useState(null);
-  const [postSubject, setPostSubject] = useState(null);
  const [postContent, setPostContent] = useState(null);
  const [postAuthorMeta, setPostAuthorMeta] = useState(null);
  const userAddress = useSelector((state) => state.user.address);
@ -41,7 +40,7 @@ const PostListRow = (props) => {
    if (!loading && postCallHash && getPostResults[postCallHash] !== undefined) {
      setPostAuthorAddress(getPostResults[postCallHash].value[0]);
      setPostAuthor(getPostResults[postCallHash].value[1]);
-      setTimeAgo(moment(getPostResults[postCallHash].value[2] * 1000).fromNow());
+      setTimeAgo(getPostResults[postCallHash].value[2] * 1000);
    }
  }, [getPostResults, loading, postCallHash]);

@ -68,7 +67,6 @@ const PostListRow = (props) => {
      .find((post) => post.id === postId);

    if (postFound) {
-      setPostSubject(postFound[POST_SUBJECT]);
      setPostContent(postFound[POST_CONTENT]);
    }
  }, [postId, posts]);
@ -126,9 +124,6 @@ const PostListRow = (props) => {
          <Feed.Content>
              <Feed.Summary>
                  <div>
-                      {postSubject !== null
-                        ? postSubject
-                        : <Placeholder><Placeholder.Line length="very long" /></Placeholder>}
                      <span className="post-summary-meta-index">
                          {t('post.list.row.post.id', { id: postIndexInTopic })}
                      </span>
@ -136,10 +131,10 @@ const PostListRow = (props) => {
                  {postAuthor !== null && setPostAuthorAddress !== null && timeAgo !== null
                    ? (
                        <>
-                            {t('post.list.row.author.pre')}
-                            &nbsp;
                            <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 date={timeAgo} />
+                            </Feed.Date>
                        </>
                    )
                    : <Placeholder><Placeholder.Line length="medium" /></Placeholder>}
@ -150,7 +145,7 @@ const PostListRow = (props) => {
          </Feed.Content>
      </Dimmer.Dimmable>
  ), [
-    authorAvatarLink, loading, postAuthor, postAuthorAddress, postContent, postIndexInTopic, postSubject, t, timeAgo,
+    authorAvatarLink, loading, postAuthor, postAuthorAddress, postContent, postIndexInTopic, t, timeAgo,
  ]);
 };

--- a/packages/concordia-app/src/components/PostList/PostListRow/styles.css
+++ b/packages/concordia-app/src/components/PostList/PostListRow/styles.css
@ -7,7 +7,3 @@
    font-size: 12px;
    opacity: 0.4;
 }
-
-.post-summary-meta-date {
-    float: right !important;
-}
--- a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
+++ b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
@ -6,7 +6,7 @@ import {
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import moment from 'moment';
+import TimeAgo from 'react-timeago';
 import { useHistory } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@ -41,7 +41,7 @@ const TopicListRow = (props) => {
    if (!loading && topicCallHash && getTopicResults[topicCallHash] !== undefined) {
      setTopicAuthorAddress(getTopicResults[topicCallHash].value[0]);
      setTopicAuthor(getTopicResults[topicCallHash].value[1]);
-      setTimeAgo(moment(getTopicResults[topicCallHash].value[2] * 1000).fromNow());
+      setTimeAgo(getTopicResults[topicCallHash].value[2] * 1000);
      setNumberOfReplies(getTopicResults[topicCallHash].value[3].length);
    }
  }, [getTopicResults, loading, topicCallHash]);
@ -151,7 +151,13 @@ const TopicListRow = (props) => {
                    <Grid verticalAlign="middle">
                        <Grid.Column floated="left" width={14}>
                            {topicAuthor !== null && timeAgo !== null
-                              ? t('topic.list.row.author.date', { author: topicAuthor, timeAgo })
+                              ? (
+                                  <div>
+                                      {t('topic.list.row.author', { author: topicAuthor })}
+                                      ,&nbsp;
+                                      <TimeAgo date={timeAgo} />
+                                  </div>
+                              )
                              : <Placeholder><Placeholder.Line length="long" /></Placeholder>}
                        </Grid.Column>
                        <Grid.Column floated="right" width={2} textAlign="right">
--- a/packages/concordia-app/src/constants/orbit/PostsDatabaseKeys.js
+++ b/packages/concordia-app/src/constants/orbit/PostsDatabaseKeys.js
@ -1,8 +1,6 @@
-export const POST_SUBJECT = 'subject';
 export const POST_CONTENT = 'content';

 const postsDatabaseKeys = [
-  POST_SUBJECT,
  POST_CONTENT,
 ];

--- a/packages/concordia-app/src/redux/sagas/peerDbReplicationSaga.js
+++ b/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/orbit/OrbitDatabases';
 import userDatabaseKeys from '../../constants/orbit/UserDatabaseKeys';
 import { TOPIC_SUBJECT } from '../../constants/orbit/TopicsDatabaseKeys';
-import { POST_CONTENT, POST_SUBJECT } from '../../constants/orbit/PostsDatabaseKeys';
+import { POST_CONTENT } from '../../constants/orbit/PostsDatabaseKeys';

 function* fetchUserDb({ orbit, userAddress, dbName }) {
  const peerDbAddress = yield call(determineKVAddress, {
@ -94,7 +94,6 @@ function* updateReduxState({ database }) {
        ...oldPostsUnchanged,
        ...Object.entries(database.all).map(([key, value]) => ({
          id: parseInt(key, 10),
-          [POST_SUBJECT]: value[POST_SUBJECT],
          [POST_CONTENT]: value[POST_CONTENT],
        })),
      ],
--- a/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx
+++ b/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 { POSTS_DATABASE, TOPICS_DATABASE } from '../../../constants/orbit/OrbitDatabases';
 import { TOPIC_SUBJECT } from '../../../constants/orbit/TopicsDatabaseKeys';
-import { POST_CONTENT, POST_SUBJECT } from '../../../constants/orbit/PostsDatabaseKeys';
+import { POST_CONTENT } from '../../../constants/orbit/PostsDatabaseKeys';
 import { FORUM_CONTRACT } from '../../../constants/contracts/ContractNames';
 import { TOPIC_CREATED_EVENT } from '../../../constants/contracts/events/ForumContractEvents';

@ -74,7 +74,6 @@ const TopicCreate = (props) => {
          .put(topicId, { [TOPIC_SUBJECT]: subjectInput }, { pin: true })
          .then(() => postsDb
            .put(postId, {
-              [POST_SUBJECT]: subjectInput,
              [POST_CONTENT]: contentInput,
            }, { pin: true }))
          .then(() => {
--- a/yarn.lock
+++ b/yarn.lock
@ -14396,6 +14396,11 @@ react-scripts@~3.4.3:
  optionalDependencies:
    fsevents "2.1.2"

+react-timeago@~5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-5.2.0.tgz#d655d40aa55e4fe08a92234481a6aea7f656ab5d"
+  integrity sha512-wCEEDGQHMdFh/PLp+Hj5vk9ZoC4KjQ5u0u6+KrrY9rny5LqJ2gZvNNEAS4mhSZDV1i7JLgQI5VQTAux7f+vj2w==
+
 react@~16.13.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"