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">
+  <React.Fragment>
-    {
+    <div className="newCommentForm">
-      isLoggedIn ?
+      {
-        <React.Fragment>
+        isLoggedIn ?
-          <textarea
+          <React.Fragment>
-            value={body}
+            <textarea
-            onChange={handleChange}
+              value={body}
-            placeholder="Leave a comment"
+              onChange={handleChange}
-            autoFocus
+              placeholder="Leave a comment"
-            className="newCommentBody"
+              autoFocus
-          />
+              className="newCommentBody"
-          <Button
+            />
-            onClick={() => handleSubmit(body, parentId)}
+            <Button
-            className="submitCommentButton">
+              onClick={() => handleSubmit(body, parentId)}
-            { isSubmitting ? <Spinner /> : 'Submit' }
+              className="submitCommentButton">
-          </Button>
+              { isSubmitting ? <Spinner /> : 'Submit' }
-        </React.Fragment>
+            </Button>
-      :
+          </React.Fragment>
-        <a href="/users/sign_in" className="loginInfo">You need to log in to post comments.</a>
+        :
-    }
+          <a href="/users/sign_in" className="loginInfo">You need to log in to post comments.</a>
-  </div>
+      }
+    </div>
+    { error ? <DangerText>{error}</DangerText> : null }
+  </React.Fragment>
 );
 
 export default NewComment;

app/javascript/containers/Comments.tsx

@@ -13,7 +13,7 @@ import CommentsP from '../components/Comments/CommentsP';
 
 const mapStateToProps = (state: State) => ({
   comments: state.currentPost.comments.items,
-  replies: state.currentPost.comments.replies,
+  replyForms: state.currentPost.comments.replyForms,
   areLoading: state.currentPost.comments.areLoading,
   error: state.currentPost.comments.error,
 });

app/javascript/reducers/commentsReducer.ts

@@ -21,22 +21,23 @@ import {
 } from '../actions/submitComment';
 
 import commentReducer from './commentReducer';
-import commentRepliesReducer from './commentRepliesReducer';
+import replyFormsReducer from './replyFormsReducer';
+
+import { ReplyFormState } from './replyFormReducer';
 
 import IComment from '../interfaces/IComment';
 import ICommentJSON from '../interfaces/json/IComment';
-import { CommentRepliesState } from './commentRepliesReducer';
 
 export interface CommentsState {
   items: Array<IComment>;
-  replies: Array<CommentRepliesState>;
+  replyForms: Array<ReplyFormState>;
   areLoading: boolean;
   error: string;
 }
 
 const initialState: CommentsState = {
   items: [],
-  replies: [],
+  replyForms: [],
   areLoading: false,
   error: '',
 };
@@ -61,10 +62,7 @@ const commentsReducer = (
         items: action.comments.map(
           (comment: ICommentJSON) => commentReducer(undefined, commentRequestSuccess(comment))
         ),
-        replies: [commentRepliesReducer(undefined, {type: 'COMMENT_REQUEST_SUCCESS', comment: { id: -1 } as ICommentJSON }),
+        replyForms: replyFormsReducer(state.replyForms, action),
-          ...action.comments.map(
-            (comment: ICommentJSON) => commentRepliesReducer(undefined, commentRequestSuccess(comment))
-        )],
         areLoading: false,
         error: '',
       };
@@ -80,45 +78,21 @@ const commentsReducer = (
     case SET_COMMENT_REPLY_BODY:
       return {
         ...state,
-        replies: state.replies.map(
+        replyForms: replyFormsReducer(state.replyForms, action),
-          reply => (
-            reply.commentId === action.commentId ?
-              commentRepliesReducer(reply, action)
-            :
-              reply
-          )
-        ),
       };
 
     case COMMENT_SUBMIT_START:
     case COMMENT_SUBMIT_FAILURE:
       return {
         ...state,
-        replies: state.replies.map(
+        replyForms: replyFormsReducer(state.replyForms, action),
-          reply => (
-            reply.commentId === action.parentId ?
-              commentRepliesReducer(reply, action)
-            :
-              reply
-          )
-        ),
       };
 
     case COMMENT_SUBMIT_SUCCESS:
       return {
         ...state,
         items: [commentReducer(undefined, commentRequestSuccess(action.comment)), ...state.items],
-        replies: [
+        replyForms: replyFormsReducer(state.replyForms, action),
-          ...state.replies.map(
-            reply => (
-              reply.commentId === action.comment.parent_id ?
-                commentRepliesReducer(reply, action)
-              :
-                reply
-            )
-          ),
-          commentRepliesReducer(undefined, commentRequestSuccess(action.comment)),
-        ],
       };
 
     default:

app/javascript/reducers/replyFormReducer.ts

@@ -16,7 +16,7 @@ import {
   COMMENT_SUBMIT_FAILURE,
 } from '../actions/submitComment';
 
-export interface CommentRepliesState {
+export interface ReplyFormState {
   commentId: number;
   isOpen: boolean;
   body: string;
@@ -24,7 +24,7 @@ export interface CommentRepliesState {
   error: string;
 }
 
-const initialState: CommentRepliesState = {
+const initialState: ReplyFormState = {
   commentId: undefined,
   isOpen: false,
   body: '',
@@ -32,7 +32,7 @@ const initialState: CommentRepliesState = {
   error: '',
 }
 
-const commentRepliesReducer = (
+const replyFormReducer = (
   state = initialState,
   action:
     CommentRequestSuccessAction |
@@ -77,6 +77,7 @@ const commentRepliesReducer = (
       return {
         ...state,
         error: action.error,
+        isSubmitting: false,
       };
 
     default:
@@ -84,4 +85,4 @@ const commentRepliesReducer = (
   }
 }
 
-export default commentRepliesReducer;
+export default replyFormReducer;

app/javascript/reducers/replyFormsReducer.ts

@@ -0,0 +1,88 @@
+import {
+  CommentsRequestActionTypes,
+  COMMENTS_REQUEST_SUCCESS,
+} from '../actions/requestComments';
+
+import { commentRequestSuccess } from '../actions/requestComment';
+
+import {
+  HandleCommentRepliesType,
+  TOGGLE_COMMENT_REPLY,
+  SET_COMMENT_REPLY_BODY,
+} from '../actions/handleCommentReplies';
+
+import {
+  CommentSubmitActionTypes,
+  COMMENT_SUBMIT_START,
+  COMMENT_SUBMIT_SUCCESS,
+  COMMENT_SUBMIT_FAILURE,
+} from '../actions/submitComment';
+
+
+import replyFormReducer, { ReplyFormState } from './replyFormReducer';
+
+import ICommentJSON from '../interfaces/json/IComment';
+
+const initialState: Array<ReplyFormState> = [];
+
+const ReplyFormsReducer = (
+  state = initialState,
+  action:
+    CommentsRequestActionTypes |
+    HandleCommentRepliesType |
+    CommentSubmitActionTypes
+): Array<ReplyFormState> => {
+  switch (action.type) {
+    case COMMENTS_REQUEST_SUCCESS:
+      return ([
+        ...action.comments.map(
+          (comment: ICommentJSON) => replyFormReducer(undefined, commentRequestSuccess(comment))
+        ),
+        replyFormReducer(undefined, commentRequestSuccess({ id: null } as ICommentJSON)),
+      ]);
+
+    case TOGGLE_COMMENT_REPLY:
+    case SET_COMMENT_REPLY_BODY:
+      return (
+        state.map(
+          replyForm => (
+            replyForm.commentId === action.commentId ?
+              replyFormReducer(replyForm, action)
+            :
+              replyForm
+          )
+        )
+      );
+
+    case COMMENT_SUBMIT_START:
+    case COMMENT_SUBMIT_FAILURE:
+      return (
+        state.map(
+          replyForm => (
+            replyForm.commentId === action.parentId ?
+              replyFormReducer(replyForm, action)
+            :
+              replyForm
+          )
+        )
+      );
+
+    case COMMENT_SUBMIT_SUCCESS:
+      return ([
+        ...state.map(
+          replyForm => (
+            replyForm.commentId === action.comment.parent_id ?
+              replyFormReducer(replyForm, action)
+            :
+              replyForm
+          )
+        ),
+        replyFormReducer(undefined, commentRequestSuccess(action.comment)),
+      ]);
+
+    default:
+      return state;
+  }
+}
+
+export default ReplyFormsReducer;