Add post updates

app/javascript/components/Post/PostP.tsx

@@ -15,11 +15,14 @@ import { MutedText } from '../shared/CustomTexts';
 
 import friendlyDate from '../../helpers/friendlyDate';
 import { LikesState } from '../../reducers/likesReducer';
+import { CommentsState } from '../../reducers/commentsReducer';
+import PostUpdateList from './PostUpdateList';
 
 interface Props {
   postId: number;
   post: IPost;
   likes: LikesState;
+  comments: CommentsState;
   boards: Array<IBoard>;
   postStatuses: Array<IPostStatus>;
   isLoggedIn: boolean;
@@ -51,6 +54,7 @@ class PostP extends React.Component<Props> {
     const {
       post,
       likes,
+      comments,
       boards,
       postStatuses,
 
@@ -66,6 +70,12 @@ class PostP extends React.Component<Props> {
     return (
       <div className="pageContainer">
         <div className="sidebar">
+          <PostUpdateList
+            postUpdates={comments.items.filter(comment => comment.isPostUpdate === true)}
+            areLoading={comments.areLoading}
+            error={comments.error}
+          />
+
           <LikeList
             likes={likes.items}
             areLoading={likes.areLoading}

app/javascript/components/Post/PostUpdateList.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Gravatar from 'react-gravatar';
+
+import { TitleText, DangerText, CenteredMutedText, MutedText } from '../shared/CustomTexts';
+import Spinner from '../shared/Spinner';
+
+import IComment from '../../interfaces/IComment';
+
+import friendlyDate from '../../helpers/friendlyDate';
+
+interface Props {
+  postUpdates: Array<IComment>;
+  areLoading: boolean;
+  error: string;
+}
+
+const PostUpdateList = ({
+  postUpdates,
+  areLoading,
+  error,
+}: Props) => (
+  <div className="postUpdateListContainer">
+    <TitleText>Post updates:</TitleText>
+    { areLoading ? <Spinner /> : null }
+    { error ? <DangerText>{error}</DangerText> : null }
+    <div className="postUpdateList">
+      { postUpdates.length === 0 ? <CenteredMutedText>There are not post updates yet.</CenteredMutedText> : null }
+      {
+        postUpdates.map((postUpdate, i) => (
+          <div className="postUpdateListItem" key={i}>
+            <div className="postUpdateListItemHeader">
+              <Gravatar email={postUpdate.userEmail} size={28} className="gravatar" />
+              <span>{postUpdate.userFullName}</span>
+            </div>
+
+            <p className="postUpdateListItemBody">{postUpdate.body}</p>
+
+            <MutedText>{friendlyDate(postUpdate.updatedAt)}</MutedText>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+);
+
+export default PostUpdateList;

app/javascript/containers/Post.tsx

@@ -12,6 +12,7 @@ import PostP from '../components/Post/PostP';
 const mapStateToProps = (state: State) => ({
   post: state.currentPost.item,
   likes: state.currentPost.likes,
+  comments: state.currentPost.comments,
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/javascript/interfaces/IComment.ts

@@ -2,6 +2,7 @@ interface IComment {
   id: number;
   body: string;
   parentId: number;
+  isPostUpdate: boolean;
   userFullName: string;
   userEmail: string;
   updatedAt: string;

app/javascript/interfaces/json/IComment.ts

@@ -2,6 +2,7 @@ interface ICommentJSON {
   id: number;
   body: string;
   parent_id: number;
+  is_post_update: boolean;
   user_full_name: string;
   user_email: string;
   updated_at: string;

app/javascript/reducers/commentReducer.ts

@@ -9,6 +9,7 @@ const initialState: IComment = {
   id: 0,
   body: '',
   parentId: null,
+  isPostUpdate: false,
   userFullName: '<Unknown user>',
   userEmail: 'example@example.com',
   updatedAt: undefined,
@@ -24,6 +25,7 @@ const commentReducer = (
         id: action.comment.id,
         body: action.comment.body,
         parentId: action.comment.parent_id,
+        isPostUpdate: action.comment.is_post_update,
         userFullName: action.comment.user_full_name,
         userEmail: action.comment.user_email,
         updatedAt: action.comment.updated_at,

app/javascript/stylesheets/components/Post.scss

@@ -13,6 +13,43 @@
   }
 
   .sidebar {
+    .postUpdateListContainer {
+      @extend .sidebarCard;
+
+      .postUpdateList {
+        @extend .w-100;
+
+        max-height: 250px;
+        overflow-y: scroll;
+
+        .postUpdateListItem {
+          @extend
+            .d-flex,
+            .flex-column,
+            .p-2,
+            .my-1;
+
+          .postUpdateListItemHeader {
+            @extend .d-flex;
+
+            span {
+              @extend
+                .ml-2;
+
+              font-weight: 600;
+              vertical-align: middle;
+            }
+          }
+
+          .postUpdateListItemBody {
+            @extend .m-0;
+
+            font-size: 15px;
+          }
+        }
+      }
+    }
+
     .likeListContainer {
       @extend .sidebarCard;