Replace post list with feed

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

@@ -2,7 +2,7 @@
   "board.header.no.topics.message": "There are no topics yet!",
   "board.sub.header.no.topics.guest": "Sign up and be the first to post.",
   "board.sub.header.no.topics.user": "Be the first to post.",
-  "post.list.row.author.date": "Posted by {{author}}, {{timeAgo}}",
+  "post.list.row.author.pre": "Post by",
   "post.list.row.post.id": "#{{id}}",
   "register.card.header": "Sign Up",
   "register.form.button.back": "Back",

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

@@ -2,7 +2,7 @@ import React, {
   memo, useEffect, useMemo, useState,
 } from 'react';
 import {
-  Dimmer, Grid, Image, List, Placeholder,
+  Dimmer, Icon, Image, Feed, Placeholder,
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -88,17 +88,17 @@ const PostListRow = (props) => {
   }, [postAuthorAddress, users]);
 
   return useMemo(() => (
-      <Dimmer.Dimmable as={List.Item} blurring dimmed={loading} className="list-item">
+      <Dimmer.Dimmable as={Feed.Event} blurring dimmed={loading}>
+          <Feed.Label className="post-profile-picture">
               {postAuthorMeta !== null && postAuthorMeta[PROFILE_PICTURE]
                 ? (
                     <Image
-                  className="profile-picture"
                       avatar
                       src={postAuthorMeta[PROFILE_PICTURE]}
                     />
                 )
                 : (
-                <List.Icon
+                    <Icon
                       name="user circle"
                       size="big"
                       inverted
@@ -106,34 +106,32 @@ const PostListRow = (props) => {
                       verticalAlign="middle"
                     />
                 )}
-          <List.Content className="list-content">
+          </Feed.Label>
-              <List.Header>
+          <Feed.Content>
-                  <Grid>
+              <Feed.Summary>
-                      <Grid.Column floated="left" width={14}>
+                  <div>
                       {postSubject !== null
                         ? postSubject
                         : <Placeholder><Placeholder.Line length="very long" /></Placeholder>}
-                      </Grid.Column>
+                      <span className="post-summary-meta-index">
-                      <Grid.Column floated="right" width={2} textAlign="right">
-                          <span className="post-metadata">
                           {t('post.list.row.post.id', { id: postId })}
                       </span>
-                      </Grid.Column>
+                  </div>
-                  </Grid>
-              </List.Header>
-              <List.Description>
-                  <Grid verticalAlign="middle">
-                      <Grid.Column floated="left" width={14}>
                   {postAuthor !== null && timeAgo !== null
-                            ? t('post.list.row.author.date', { author: postAuthor, timeAgo })
+                    ? (
-                            : <Placeholder><Placeholder.Line length="long" /></Placeholder>}
+                        <>
-                      </Grid.Column>
+                            {t('post.list.row.author.pre')}
-                  </Grid>
+                            &nbsp;
-              </List.Description>
+                            <Feed.User>{postAuthor}</Feed.User>
-          </List.Content>
+                            <Feed.Date className="post-summary-meta-date">{timeAgo}</Feed.Date>
-          <List.Content>
+                        </>
+                    )
+                    : <Placeholder><Placeholder.Line length="medium" /></Placeholder>}
+              </Feed.Summary>
+              <Feed.Extra>
                   {postMessage}
-          </List.Content>
+              </Feed.Extra>
+          </Feed.Content>
       </Dimmer.Dimmable>
   ), [loading, postAuthor, postAuthorMeta, postId, postMessage, postSubject, t, timeAgo]);
 };

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

@@ -1,21 +1,13 @@
-.post-metadata {
+.post-profile-picture {
-    font-size: 12px !important;
+    margin: 5px 0 0 0;
-    font-weight: initial;
 }
 
-.list-item {
+.post-summary-meta-index {
-    display: flex !important;
+    float: right;
-    text-align: start;
+    font-size: 12px;
+    opacity: 0.4;
 }
 
-.profile-picture {
+.post-summary-meta-date {
-    cursor: pointer;
+    float: right !important;
-    max-width: 36px;
-    max-height: 36px;
-    margin: 0;
-    vertical-align: middle;
-}
-
-.list-content {
-    flex-grow: 1;
 }

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

@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { Dimmer, List, Loader } from 'semantic-ui-react';
+import { Dimmer, Feed, Loader } from 'semantic-ui-react';
 import PostListRow from './PostListRow';
 import { drizzle } from '../../redux/store';
 
@@ -55,7 +55,7 @@ const PostList = (props) => {
   }, [getPostCallHashes, loading, postIds]);
 
   return (
-      <Dimmer.Dimmable as={List} blurring dimmed={loading} selection divided id="post-list" size="big">
+      <Dimmer.Dimmable as={Feed} blurring dimmed={loading} selection divided id="post-list" size="big">
           <Loader active={loading} />
           {posts}
       </Dimmer.Dimmable>