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,52 +88,50 @@ const PostListRow = (props) => {
   }, [postAuthorAddress, users]);
 
   return useMemo(() => (
-      <Dimmer.Dimmable as={List.Item} blurring dimmed={loading} className="list-item">
-          {postAuthorMeta !== null && postAuthorMeta[PROFILE_PICTURE]
-            ? (
-                <Image
-                  className="profile-picture"
-                  avatar
-                  src={postAuthorMeta[PROFILE_PICTURE]}
-                />
-            )
-            : (
-                <List.Icon
-                  name="user circle"
-                  size="big"
-                  inverted
-                  color="black"
-                  verticalAlign="middle"
-                />
-            )}
-          <List.Content className="list-content">
-              <List.Header>
-                  <Grid>
-                      <Grid.Column floated="left" width={14}>
-                          {postSubject !== null
-                            ? postSubject
-                            : <Placeholder><Placeholder.Line length="very long" /></Placeholder>}
-                      </Grid.Column>
-                      <Grid.Column floated="right" width={2} textAlign="right">
-                          <span className="post-metadata">
-                              {t('post.list.row.post.id', { id: postId })}
-                          </span>
-                      </Grid.Column>
-                  </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>
-                  </Grid>
-              </List.Description>
-          </List.Content>
-          <List.Content>
-              {postMessage}
-          </List.Content>
+      <Dimmer.Dimmable as={Feed.Event} blurring dimmed={loading}>
+          <Feed.Label className="post-profile-picture">
+              {postAuthorMeta !== null && postAuthorMeta[PROFILE_PICTURE]
+                ? (
+                    <Image
+                      avatar
+                      src={postAuthorMeta[PROFILE_PICTURE]}
+                    />
+                )
+                : (
+                    <Icon
+                      name="user circle"
+                      size="big"
+                      inverted
+                      color="black"
+                      verticalAlign="middle"
+                    />
+                )}
+          </Feed.Label>
+          <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: postId })}
+                      </span>
+                  </div>
+                  {postAuthor !== null && timeAgo !== null
+                    ? (
+                        <>
+                            {t('post.list.row.author.pre')}
+                            &nbsp;
+                            <Feed.User>{postAuthor}</Feed.User>
+                            <Feed.Date className="post-summary-meta-date">{timeAgo}</Feed.Date>
+                        </>
+                    )
+                    : <Placeholder><Placeholder.Line length="medium" /></Placeholder>}
+              </Feed.Summary>
+              <Feed.Extra>
+                  {postMessage}
+              </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 {
-    font-size: 12px !important;
-    font-weight: initial;
+.post-profile-picture {
+    margin: 5px 0 0 0;
 }
 
-.list-item {
-    display: flex !important;
-    text-align: start;
+.post-summary-meta-index {
+    float: right;
+    font-size: 12px;
+    opacity: 0.4;
 }
 
-.profile-picture {
-    cursor: pointer;
-    max-width: 36px;
-    max-height: 36px;
-    margin: 0;
-    vertical-align: middle;
-}
-
-.list-content {
-    flex-grow: 1;
+.post-summary-meta-date {
+    float: right !important;
 }

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>