Basic comments visualisation

app/controllers/comments_controller.rb

@@ -5,7 +5,7 @@ class CommentsController < ApplicationController
     comments = Comment
       .where(post_id: params[:post_id])
       .left_outer_joins(:user)
-      .select('comments.id, comments.body, comments.updated_at, users.full_name as user_full_name')
+      .select('comments.id, comments.body, comments.parent_id, comments.updated_at, users.full_name as user_full_name')
       .order(updated_at: :desc)
 
     render json: comments

app/javascript/components/Comments/Comment.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { MutedText } from '../shared/CustomTexts';
+
+interface Props {
+  id: number;
+  body: string;
+  parentId: number;
+  userFullName: string;
+  updatedAt: string;
+
+  level: number;
+}
+
+const Comment = ({
+  id,
+  body,
+  parentId,
+  userFullName,
+  updatedAt,
+
+  level,
+}: Props) => (
+  <div className="comment">
+    <div className="commentHeader">
+      <span className="commentAuthor">{userFullName}</span>
+    </div>
+    <p className="commentBody">{body}</p>
+    <div className="commentFooter">
+      <a href="#">Reply</a>
+      <MutedText>{updatedAt}</MutedText>
+    </div>
+  </div>
+);
+
+export default Comment;

app/javascript/components/Comments/CommentList.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import Comment from './Comment';
+
+import IComment from '../../interfaces/IComment';
+
+interface Props {
+  comments: Array<IComment>;
+  parentId: number;
+  level: number;
+}
+
+const CommentList = ({ comments, parentId, level }: Props) => (
+  <React.Fragment>
+    {comments.map((comment, i) => {
+      if (comment.parentId === parentId) {
+        return (
+          <div className="commentList">
+            <Comment level={level} {...comment} />
+
+            <CommentList
+              comments={comments}
+              parentId={comment.id}
+              level={level+1}
+            />
+          </div>
+        );
+      } else return null;
+    })}
+  </React.Fragment>
+);
+
+export default CommentList;

app/javascript/components/Comments/CommentsP.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
 
+import CommentList from './CommentList';
+import Spinner from '../shared/Spinner';
+import { DangerText } from '../shared/CustomTexts';
+
 import IComment from '../../interfaces/IComment';
 
 interface Props {
@@ -25,10 +29,17 @@ class CommentsP extends React.Component<Props> {
     } = this.props;
 
     return (
-      <div>
-        {comments.map((comment, i) => (
-          <div key={i}>{comment.body}</div>
-        ))}
+      <div className="comments">
+        <h2>Comments</h2>
+
+        { areLoading ? <Spinner /> : null }
+        { error ? <DangerText>{error}</DangerText> : null }
+
+        <CommentList
+          comments={comments}
+          parentId={null}
+          level={1}
+        />
       </div>
     );
   }

app/javascript/interfaces/IComment.ts

@@ -1,6 +1,7 @@
 interface IComment {
   id: number;
   body: string;
+  parentId: number;
   userFullName: string;
   updatedAt: string;
 }

app/javascript/interfaces/json/IComment.ts

@@ -1,6 +1,7 @@
 interface ICommentJSON {
   id: number;
   body: string;
+  parent_id: number;
   user_full_name: string;
   updated_at: string;
 }

app/javascript/reducers/commentReducer.ts

@@ -7,8 +7,9 @@ import IComment from '../interfaces/IComment';
 const initialState: IComment = {
   id: 0,
   body: '',
-  userFullName: '',
-  updatedAt: '',
+  parentId: null,
+  userFullName: '<Unknown user>',
+  updatedAt: undefined,
 };
 
 const commentReducer = (
@@ -20,6 +21,7 @@ const commentReducer = (
       return {
         id: action.comment.id,
         body: action.comment.body,
+        parentId: action.comment.parent_id,
         userFullName: action.comment.user_full_name,
         updatedAt: action.comment.updated_at,
       };

app/javascript/stylesheets/components/Comments.scss

@@ -0,0 +1,21 @@
+.comments {
+  .commentList > .commentList {
+    padding-left: 32px;
+  }
+
+  .comment {
+    margin-bottom: 32px;
+
+    .commentHeader {
+      @extend
+        .font-weight-bolder;
+
+      font-size: 17px;
+    }
+
+    .commentBody {
+      @extend
+        .my-2;
+    }
+  }
+}

app/javascript/stylesheets/main.scss

@@ -6,11 +6,8 @@
 @import 'general/index';
 @import 'general/navbar';
 
-/*
-  Components stylesheets are not imported here. Instead,
-  they are imported in the specific React components
-  that use them
-*/
+/* Components */
 @import 'components/Board';
+@import 'components/Comments';
 @import 'components/Post';
 @import 'components/Roadmap';