comment rendering

src/redux/node/actions.ts

@@ -33,9 +33,7 @@ export const nodeSetCurrent = (current: INodeState['current']) => ({
   type: NODE_ACTIONS.SET_CURRENT,
 });
 
-export const nodePostComment = (data: IComment, id: INode['id']) => ({
-  data,
-  id,
+export const nodePostComment = () => ({
   type: NODE_ACTIONS.POST_COMMENT,
 });
 
@@ -48,3 +46,8 @@ export const nodeSetComments = (comments: IComment[]) => ({
   comments,
   type: NODE_ACTIONS.SET_COMMENTS,
 });
+
+export const nodeSetCommentData = (comment_data: IComment) => ({
+  comment_data,
+  type: NODE_ACTIONS.SET_COMMENT_DATA,
+});

src/redux/node/constants.ts

@@ -12,6 +12,8 @@ export const NODE_ACTIONS = {
   SET_LOADING_COMMENTS: `${prefix}SET_LOADING_COMMENTS`,
   SET_SENDING_COMMENT: `${prefix}SET_SENDING_COMMENT`,
   SET_CURRENT: `${prefix}SET_CURRENT`,
+  SET_COMMENT_DATA: `${prefix}SET_COMMENT_DATA`,
+
   POST_COMMENT: `${prefix}POST_COMMENT`,
   SET_COMMENTS: `${prefix}SET_COMMENTS`,
 };

src/redux/node/handlers.ts

@@ -7,6 +7,7 @@ import {
   nodeSetLoadingComments,
   nodeSetSendingComment,
   nodeSetComments,
+  nodeSetCommentData,
 } from './actions';
 import { INodeState } from './reducer';
 
@@ -32,6 +33,11 @@ const setSendingComment = (
 const setComments = (state: INodeState, { comments }: ReturnType<typeof nodeSetComments>) =>
   assocPath(['comments'], comments, state);
 
+const setCommentData = (
+  state: INodeState,
+  { comment_data }: ReturnType<typeof nodeSetCommentData>
+) => assocPath(['comment_data'], comment_data, state);
+
 export const NODE_HANDLERS = {
   [NODE_ACTIONS.SAVE]: setSaveErrors,
   [NODE_ACTIONS.SET_LOADING]: setLoading,
@@ -39,4 +45,5 @@ export const NODE_HANDLERS = {
   [NODE_ACTIONS.SET_CURRENT]: setCurrent,
   [NODE_ACTIONS.SET_SENDING_COMMENT]: setSendingComment,
   [NODE_ACTIONS.SET_COMMENTS]: setComments,
+  [NODE_ACTIONS.SET_COMMENT_DATA]: setCommentData,
 };

src/redux/node/reducer.ts

@@ -1,12 +1,13 @@
 import { createReducer } from '~/utils/reducer';
 import { INode, IComment } from '../types';
-import { EMPTY_NODE } from './constants';
+import { EMPTY_NODE, EMPTY_COMMENT } from './constants';
 import { NODE_HANDLERS } from './handlers';
 
 export type INodeState = Readonly<{
   editor: INode;
   current: INode;
   comments: IComment[];
+  comment_data: IComment;
 
   error: string;
   errors: Record<string, string>;
@@ -24,6 +25,7 @@ const INITIAL_STATE: INodeState = {
     files: [],
   },
   current: { ...EMPTY_NODE },
+  comment_data: { ...EMPTY_COMMENT },
   comments: [],
 
   is_loading: false,

src/redux/node/sagas.ts

@@ -1,7 +1,7 @@
 import { takeLatest, call, put, select, delay } from 'redux-saga/effects';
 import { push } from 'connected-react-router';
 
-import { NODE_ACTIONS, EMPTY_NODE } from './constants';
+import { NODE_ACTIONS, EMPTY_NODE, EMPTY_COMMENT } from './constants';
 import {
   nodeSave,
   nodeSetSaveErrors,
@@ -12,6 +12,7 @@ import {
   nodePostComment,
   nodeSetSendingComment,
   nodeSetComments,
+  nodeSetCommentData,
 } from './actions';
 import { postNode, getNode, postNodeComment, getNodeComments } from './api';
 import { reqWrapper } from '../auth/sagas';
@@ -76,12 +77,14 @@ function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
   return;
 }
 
-function* onPostComment({ data, id }: ReturnType<typeof nodePostComment>) {
+function* onPostComment() {
+  const { current, comment_data } = yield select(selectNode);
+
   yield put(nodeSetSendingComment(true));
   const {
     data: { comment },
     error,
-  } = yield call(reqWrapper, postNodeComment, { data, id });
+  } = yield call(reqWrapper, postNodeComment, { data: comment_data, id: current.id });
   yield put(nodeSetSendingComment(false));
 
   if (error || !comment) {
@@ -92,7 +95,8 @@ function* onPostComment({ data, id }: ReturnType<typeof nodePostComment>) {
 
   const { comments } = yield select(selectNode);
 
-  yield put(nodeSetComments([...comments, comment]));
+  yield put(nodeSetComments([comment, ...comments]));
+  yield put(nodeSetCommentData({ ...EMPTY_COMMENT }));
 }
 
 export default function* nodeSaga() {