New comments can be created

app/javascript/components/Comments/Comment.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FormEvent } from 'react';
 
+import NewComment from './NewComment';
 import { MutedText } from '../shared/CustomTexts';
 
 import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
@@ -16,6 +17,7 @@ interface Props {
   reply: CommentRepliesState;
   handleToggleCommentReply(): void;
   handleCommentReplyBodyChange(e: FormEvent): void;
+  handleSubmitComment(body: string, parentId: number): void;
 }
 
 const Comment = ({
@@ -29,6 +31,7 @@ const Comment = ({
   reply,
   handleToggleCommentReply,
   handleCommentReplyBodyChange,
+  handleSubmitComment,
 }: Props) => (
   <div className="comment">
     <div className="commentHeader">
@@ -41,9 +44,11 @@ const Comment = ({
     </div>
     {
       reply.isOpen ?
-        <textarea
-          value={reply.body}
-          onChange={handleCommentReplyBodyChange}
+        <NewComment
+          body={reply.body}
+          parentId={id}
+          handleChange={handleCommentReplyBodyChange}
+          handleSubmit={handleSubmitComment}
         />
         :
         null

app/javascript/components/Comments/CommentList.tsx

@@ -12,8 +12,9 @@ interface Props {
   parentId: number;
   level: number;
 
-  toggleCommentReply(commentId: number);
-  setCommentReplyBody(commentId: number, body: string);
+  toggleCommentReply(commentId: number): void;
+  setCommentReplyBody(commentId: number, body: string): void;
+  handleSubmitComment(body: string, parentId: number): void;
 }
 
 const CommentList = ({
@@ -24,12 +25,13 @@ const CommentList = ({
 
   toggleCommentReply,
   setCommentReplyBody,
+  handleSubmitComment,
 }: Props) => (
   <React.Fragment>
     {comments.map((comment, i) => {
       if (comment.parentId === parentId) {
         return (
-          <div className="commentList">
+          <div className="commentList" key={i}>
             <Comment
               level={level}
               reply={replies.find(reply => reply.commentId === comment.id)}
@@ -39,6 +41,7 @@ const CommentList = ({
                   setCommentReplyBody(comment.id, (e.target as HTMLTextAreaElement).value)
                 )
               }
+              handleSubmitComment={handleSubmitComment}
               {...comment}
             />
 
@@ -50,6 +53,7 @@ const CommentList = ({
 
               toggleCommentReply={toggleCommentReply}
               setCommentReplyBody={setCommentReplyBody}
+              handleSubmitComment={handleSubmitComment}
             />
           </div>
         );

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}
         />

app/javascript/components/Comments/NewComment.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { FormEvent } from 'react';
+
+import Button from '../shared/Button';
+
+interface Props {
+  body: string;
+  parentId: number;
+  handleChange(e: FormEvent): void;
+  handleSubmit(body: string, parentId: number): void;
+}
+
+const NewComment = ({
+  body,
+  parentId,
+  handleChange,
+  handleSubmit,
+}: Props) => (
+  <div className="newCommentForm">
+    <textarea
+      value={body}
+      onChange={handleChange}
+    />
+    <Button onClick={() => handleSubmit(body, parentId)}>Submit</Button>
+  </div>
+);
+
+export default NewComment;