Improve comment components and its reducers

app/javascript/components/Comments/Comment.tsx

@@ -4,7 +4,7 @@ import NewComment from './NewComment';
 import Separator from '../shared/Separator';
 import { MutedText } from '../shared/CustomTexts';
 
-import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
+import { ReplyFormState } from '../../reducers/replyFormReducer';
 
 import friendlyDate from '../../helpers/friendlyDate';
 
@@ -14,7 +14,7 @@ interface Props {
   userFullName: string;
   updatedAt: string;
 
-  reply: CommentRepliesState;
+  replyForm: ReplyFormState;
   handleToggleCommentReply(): void;
   handleCommentReplyBodyChange(e: React.FormEvent): void;
   handleSubmitComment(body: string, parentId: number): void;
@@ -29,7 +29,7 @@ const Comment = ({
   userFullName,
   updatedAt,
 
-  reply,
+  replyForm,
   handleToggleCommentReply,
   handleCommentReplyBodyChange,
   handleSubmitComment,
@@ -44,7 +44,7 @@ const Comment = ({
     <p className="commentBody">{body}</p>
     <div className="commentFooter">
       <a className="commentReplyButton" onClick={handleToggleCommentReply}>
-        { reply.isOpen ? 'Cancel' : 'Reply' }
+        { replyForm.isOpen ? 'Cancel' : 'Reply' }
       </a>
       {
         isPowerUser ?
@@ -59,11 +59,12 @@ const Comment = ({
       <MutedText>{friendlyDate(updatedAt)}</MutedText>
     </div>
     {
-      reply.isOpen ?
+      replyForm.isOpen ?
         <NewComment
-          body={reply.body}
+          body={replyForm.body}
           parentId={id}
-          isSubmitting={reply.isSubmitting}
+          isSubmitting={replyForm.isSubmitting}
+          error={replyForm.error}
           handleChange={handleCommentReplyBodyChange}
           handleSubmit={handleSubmitComment}
 

app/javascript/components/Comments/CommentList.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 import Comment from './Comment';
 
 import IComment from '../../interfaces/IComment';
-import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
+import { ReplyFormState } from '../../reducers/replyFormReducer';
 
 interface Props {
   comments: Array<IComment>;
-  replies: Array<CommentRepliesState>;
+  replyForms: Array<ReplyFormState>;
   parentId: number;
   level: number;
 
@@ -21,7 +21,7 @@ interface Props {
 
 const CommentList = ({
   comments,
-  replies,
+  replyForms,
   parentId,
   level,
 
@@ -38,7 +38,7 @@ const CommentList = ({
         return (
           <div className="commentList" key={i}>
             <Comment
-              reply={replies.find(reply => reply.commentId === comment.id)}
+              replyForm={replyForms.find(replyForm => replyForm.commentId === comment.id)}
               handleToggleCommentReply={() => toggleCommentReply(comment.id)}
               handleCommentReplyBodyChange={
                 (e: React.FormEvent) => (
@@ -54,7 +54,7 @@ const CommentList = ({
 
             <CommentList
               comments={comments}
-              replies={replies}
+              replyForms={replyForms}
               parentId={comment.id}
               level={level+1}
 

app/javascript/components/Comments/CommentsP.tsx

@@ -6,7 +6,7 @@ import Spinner from '../shared/Spinner';
 import { DangerText } from '../shared/CustomTexts';
 
 import IComment from '../../interfaces/IComment';
-import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
+import { ReplyFormState } from '../../reducers/replyFormReducer';
 
 interface Props {
   postId: number;
@@ -15,7 +15,7 @@ interface Props {
   authenticityToken: string;
 
   comments: Array<IComment>;
-  replies: Array<CommentRepliesState>;
+  replyForms: Array<ReplyFormState>;
   areLoading: boolean;
   error: string;
 
@@ -50,7 +50,7 @@ class CommentsP extends React.Component<Props> {
       isPowerUser,
 
       comments,
-      replies,
+      replyForms,
       areLoading,
       error,
 
@@ -58,7 +58,7 @@ class CommentsP extends React.Component<Props> {
       setCommentReplyBody,
     } = this.props;
 
-    const postReply = replies.find(reply => reply.commentId === -1);
+    const postReply = replyForms.find(replyForm => replyForm.commentId === null);
 
     return (
       <div className="commentsContainer">
@@ -66,9 +66,10 @@ class CommentsP extends React.Component<Props> {
           body={postReply && postReply.body}
           parentId={null}
           isSubmitting={postReply && postReply.isSubmitting}
+          error={postReply && postReply.error}
           handleChange={
             (e: React.FormEvent) => (
-              setCommentReplyBody(-1, (e.target as HTMLTextAreaElement).value)
+              setCommentReplyBody(null, (e.target as HTMLTextAreaElement).value)
             )
           }
           handleSubmit={this._handleSubmitComment}
@@ -79,13 +80,13 @@ class CommentsP extends React.Component<Props> {
         { areLoading ? <Spinner /> : null }
         { error ? <DangerText>{error}</DangerText> : null }
 
-        <span className="commentsTitle">
+        <div className="commentsTitle">
           activity &bull; {comments.length} comments
-        </span>
+        </div>
 
         <CommentList
           comments={comments}
-          replies={replies}
+          replyForms={replyForms}
           toggleCommentReply={toggleCommentReply}
           setCommentReplyBody={setCommentReplyBody}
           handleSubmitComment={this._handleSubmitComment}

app/javascript/components/Comments/NewComment.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 
 import Button from '../shared/Button';
 import Spinner from '../shared/Spinner';
+import { DangerText } from '../shared/CustomTexts';
 
 interface Props {
   body: string;
   parentId: number;
   isSubmitting: boolean;
+  error: string;
   handleChange(e: React.FormEvent): void;
   handleSubmit(body: string, parentId: number): void;
 
@@ -17,32 +19,36 @@ const NewComment = ({
   body,
   parentId,
   isSubmitting,
+  error,
   handleChange,
   handleSubmit,
 
   isLoggedIn,
 }: Props) => (
-  <div className="newCommentForm">
-    {
-      isLoggedIn ?
-        <React.Fragment>
-          <textarea
-            value={body}
-            onChange={handleChange}
-            placeholder="Leave a comment"
-            autoFocus
-            className="newCommentBody"
-          />
-          <Button
-            onClick={() => handleSubmit(body, parentId)}
-            className="submitCommentButton">
-            { isSubmitting ? <Spinner /> : 'Submit' }
-          </Button>
-        </React.Fragment>
-      :
-        <a href="/users/sign_in" className="loginInfo">You need to log in to post comments.</a>
-    }
-  </div>
+  <React.Fragment>
+    <div className="newCommentForm">
+      {
+        isLoggedIn ?
+          <React.Fragment>
+            <textarea
+              value={body}
+              onChange={handleChange}
+              placeholder="Leave a comment"
+              autoFocus
+              className="newCommentBody"
+            />
+            <Button
+              onClick={() => handleSubmit(body, parentId)}
+              className="submitCommentButton">
+              { isSubmitting ? <Spinner /> : 'Submit' }
+            </Button>
+          </React.Fragment>
+        :
+          <a href="/users/sign_in" className="loginInfo">You need to log in to post comments.</a>
+      }
+    </div>
+    { error ? <DangerText>{error}</DangerText> : null }
+  </React.Fragment>
 );
 
 export default NewComment;