diff --git a/app/javascript/components/Comments/Comment.tsx b/app/javascript/components/Comments/Comment.tsx
index 30cc1dd1..737d9824 100644
--- a/app/javascript/components/Comments/Comment.tsx
+++ b/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 = ({
{body}
{
- reply.isOpen ?
+ replyForm.isOpen ?
;
- replies: Array;
+ replyForms: Array;
parentId: number;
level: number;
@@ -21,7 +21,7 @@ interface Props {
const CommentList = ({
comments,
- replies,
+ replyForms,
parentId,
level,
@@ -38,7 +38,7 @@ const CommentList = ({
return (
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 = ({
;
- replies: Array;
+ replyForms: Array;
areLoading: boolean;
error: string;
@@ -50,7 +50,7 @@ class CommentsP extends React.Component {
isPowerUser,
comments,
- replies,
+ replyForms,
areLoading,
error,
@@ -58,7 +58,7 @@ class CommentsP extends React.Component {
setCommentReplyBody,
} = this.props;
- const postReply = replies.find(reply => reply.commentId === -1);
+ const postReply = replyForms.find(replyForm => replyForm.commentId === null);
return (
@@ -66,9 +66,10 @@ class CommentsP extends React.Component
{
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 {
{ areLoading ? : null }
{ error ? {error} : null }
-
+
activity • {comments.length} comments
-
+
(
-
+
+
+ { error ? {error} : null }
+
);
export default NewComment;
\ No newline at end of file
diff --git a/app/javascript/containers/Comments.tsx b/app/javascript/containers/Comments.tsx
index ccf592d5..0d352dd0 100644
--- a/app/javascript/containers/Comments.tsx
+++ b/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,
});
diff --git a/app/javascript/reducers/commentsReducer.ts b/app/javascript/reducers/commentsReducer.ts
index 17e328be..8950dd9e 100644
--- a/app/javascript/reducers/commentsReducer.ts
+++ b/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;
- replies: Array;
+ replyForms: Array;
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 }),
- ...action.comments.map(
- (comment: ICommentJSON) => commentRepliesReducer(undefined, commentRequestSuccess(comment))
- )],
+ replyForms: replyFormsReducer(state.replyForms, action),
areLoading: false,
error: '',
};
@@ -80,45 +78,21 @@ const commentsReducer = (
case SET_COMMENT_REPLY_BODY:
return {
...state,
- replies: state.replies.map(
- reply => (
- reply.commentId === action.commentId ?
- commentRepliesReducer(reply, action)
- :
- reply
- )
- ),
+ replyForms: replyFormsReducer(state.replyForms, action),
};
case COMMENT_SUBMIT_START:
case COMMENT_SUBMIT_FAILURE:
return {
...state,
- replies: state.replies.map(
- reply => (
- reply.commentId === action.parentId ?
- commentRepliesReducer(reply, action)
- :
- reply
- )
- ),
+ replyForms: replyFormsReducer(state.replyForms, action),
};
case COMMENT_SUBMIT_SUCCESS:
return {
...state,
items: [commentReducer(undefined, commentRequestSuccess(action.comment)), ...state.items],
- replies: [
- ...state.replies.map(
- reply => (
- reply.commentId === action.comment.parent_id ?
- commentRepliesReducer(reply, action)
- :
- reply
- )
- ),
- commentRepliesReducer(undefined, commentRequestSuccess(action.comment)),
- ],
+ replyForms: replyFormsReducer(state.replyForms, action),
};
default:
diff --git a/app/javascript/reducers/commentRepliesReducer.ts b/app/javascript/reducers/replyFormReducer.ts
similarity index 90%
rename from app/javascript/reducers/commentRepliesReducer.ts
rename to app/javascript/reducers/replyFormReducer.ts
index b4924267..5d3162f5 100644
--- a/app/javascript/reducers/commentRepliesReducer.ts
+++ b/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;
\ No newline at end of file
+export default replyFormReducer;
\ No newline at end of file
diff --git a/app/javascript/reducers/replyFormsReducer.ts b/app/javascript/reducers/replyFormsReducer.ts
new file mode 100644
index 00000000..26446626
--- /dev/null
+++ b/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 = [];
+
+const ReplyFormsReducer = (
+ state = initialState,
+ action:
+ CommentsRequestActionTypes |
+ HandleCommentRepliesType |
+ CommentSubmitActionTypes
+): Array => {
+ 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;
\ No newline at end of file