Added react-timeago

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"

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

@@ -51,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}}"
 }

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';
@@ -40,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]);
 
@@ -132,7 +132,9 @@ const PostListRow = (props) => {
                     ? (
                         <>
                             <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>}

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">

yarn.lock

@@ -14404,6 +14404,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"