Basic comments visualisation

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>
     );
   }