Add comment replies toggle and body to state

app/javascript/components/Comments/Comment.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { FormEvent } from 'react';
 
 import { MutedText } from '../shared/CustomTexts';
 
+import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
+
 interface Props {
   id: number;
   body: string;
@@ -10,6 +13,9 @@ interface Props {
   updatedAt: string;
 
   level: number;
+  reply: CommentRepliesState;
+  handleToggleCommentReply(): void;
+  handleCommentReplyBodyChange(e: FormEvent): void;
 }
 
 const Comment = ({
@@ -20,6 +26,9 @@ const Comment = ({
   updatedAt,
 
   level,
+  reply,
+  handleToggleCommentReply,
+  handleCommentReplyBodyChange,
 }: Props) => (
   <div className="comment">
     <div className="commentHeader">
@@ -27,9 +36,18 @@ const Comment = ({
     </div>
     <p className="commentBody">{body}</p>
     <div className="commentFooter">
-      <a href="#">Reply</a>
+      <a onClick={handleToggleCommentReply}>Reply</a>
       <MutedText>{updatedAt}</MutedText>
     </div>
+    {
+      reply.isOpen ?
+        <textarea
+          value={reply.body}
+          onChange={handleCommentReplyBodyChange}
+        />
+        :
+        null
+    }
   </div>
 );
 

app/javascript/components/Comments/CommentList.tsx

@@ -1,27 +1,55 @@
 import * as React from 'react';
+import { FormEvent } from 'react';
 
 import Comment from './Comment';
 
 import IComment from '../../interfaces/IComment';
+import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
 
 interface Props {
   comments: Array<IComment>;
+  replies: Array<CommentRepliesState>;
   parentId: number;
   level: number;
+
+  toggleCommentReply(commentId: number);
+  setCommentReplyBody(commentId: number, body: string);
 }
 
-const CommentList = ({ comments, parentId, level }: Props) => (
+const CommentList = ({
+  comments,
+  replies,
+  parentId,
+  level,
+
+  toggleCommentReply,
+  setCommentReplyBody,
+}: Props) => (
   <React.Fragment>
     {comments.map((comment, i) => {
       if (comment.parentId === parentId) {
         return (
           <div className="commentList">
-            <Comment level={level} {...comment} />
+            <Comment
+              level={level}
+              reply={replies.find(reply => reply.commentId === comment.id)}
+              handleToggleCommentReply={() => toggleCommentReply(comment.id)}
+              handleCommentReplyBodyChange={
+                (e: FormEvent) => (
+                  setCommentReplyBody(comment.id, (e.target as HTMLTextAreaElement).value)
+                )
+              }
+              {...comment}
+            />
 
             <CommentList
               comments={comments}
+              replies={replies}
               parentId={comment.id}
               level={level+1}
+
+              toggleCommentReply={toggleCommentReply}
+              setCommentReplyBody={setCommentReplyBody}
             />
           </div>
         );

app/javascript/components/Comments/CommentsP.tsx

@@ -5,15 +5,19 @@ import Spinner from '../shared/Spinner';
 import { DangerText } from '../shared/CustomTexts';
 
 import IComment from '../../interfaces/IComment';
+import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
 
 interface Props {
   postId: number;
 
   comments: Array<IComment>;
+  replies: Array<CommentRepliesState>;
   areLoading: boolean;
   error: string;
 
   requestComments(postId: number, page?: number);
+  toggleCommentReply(commentId: number);
+  setCommentReplyBody(commentId: number, body: string);
 }
 
 class CommentsP extends React.Component<Props> {
@@ -24,8 +28,12 @@ class CommentsP extends React.Component<Props> {
   render() {
     const {
       comments,
+      replies,
       areLoading,
       error,
+
+      toggleCommentReply,
+      setCommentReplyBody,
     } = this.props;
 
     return (
@@ -37,6 +45,9 @@ class CommentsP extends React.Component<Props> {
 
         <CommentList
           comments={comments}
+          replies={replies}
+          toggleCommentReply={toggleCommentReply}
+          setCommentReplyBody={setCommentReplyBody}
           parentId={null}
           level={1}
         />