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