New comments can be created

app/javascript/components/Comments/CommentsP.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { FormEvent } from 'react';
 
+import NewComment from './NewComment';
 import CommentList from './CommentList';
 import Spinner from '../shared/Spinner';
 import { DangerText } from '../shared/CustomTexts';
@@ -9,15 +11,22 @@ import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
 
 interface Props {
   postId: number;
+  authenticityToken: string;
 
   comments: Array<IComment>;
   replies: Array<CommentRepliesState>;
   areLoading: boolean;
   error: string;
 
-  requestComments(postId: number, page?: number);
-  toggleCommentReply(commentId: number);
-  setCommentReplyBody(commentId: number, body: string);
+  requestComments(postId: number, page?: number): void;
+  toggleCommentReply(commentId: number): void;
+  setCommentReplyBody(commentId: number, body: string): void;
+  submitComment(
+    postId: number,
+    body: string,
+    parentId: number,
+    authenticityToken: string,
+  ): void;
 }
 
 class CommentsP extends React.Component<Props> {
@@ -25,6 +34,15 @@ class CommentsP extends React.Component<Props> {
     this.props.requestComments(this.props.postId);
   }
 
+  _handleSubmitComment = (body, parentId) => {
+    this.props.submitComment(
+      this.props.postId,
+      body,
+      parentId,
+      this.props.authenticityToken,
+    );
+  }
+
   render() {
     const {
       comments,
@@ -34,12 +52,24 @@ class CommentsP extends React.Component<Props> {
 
       toggleCommentReply,
       setCommentReplyBody,
+      submitComment,
     } = this.props;
 
     return (
       <div className="comments">
         <h2>Comments</h2>
 
+        <NewComment
+          body={replies.find(reply => reply.commentId === -1) && replies.find(reply => reply.commentId === -1).body}
+          parentId={null}
+          handleChange={
+            (e: FormEvent) => (
+              setCommentReplyBody(-1, (e.target as HTMLTextAreaElement).value)
+            )
+          }
+          handleSubmit={this._handleSubmitComment}
+        />
+
         { areLoading ? <Spinner /> : null }
         { error ? <DangerText>{error}</DangerText> : null }
 
@@ -48,6 +78,7 @@ class CommentsP extends React.Component<Props> {
           replies={replies}
           toggleCommentReply={toggleCommentReply}
           setCommentReplyBody={setCommentReplyBody}
+          handleSubmitComment={this._handleSubmitComment}
           parentId={null}
           level={1}
         />