adding comments

src/redux/node/actions.ts

@@ -1,4 +1,4 @@
-import { INode, IValidationErrors } from '../types';
+import { INode, IValidationErrors, IComment } from '../types';
 import { NODE_ACTIONS } from './constants';
 import { INodeState } from './reducer';
 
@@ -32,3 +32,19 @@ export const nodeSetCurrent = (current: INodeState['current']) => ({
   current,
   type: NODE_ACTIONS.SET_CURRENT,
 });
+
+export const nodePostComment = (data: IComment, id: INode['id']) => ({
+  data,
+  id,
+  type: NODE_ACTIONS.POST_COMMENT,
+});
+
+export const nodeSetSendingComment = (is_sending_comment: boolean) => ({
+  is_sending_comment,
+  type: NODE_ACTIONS.SET_SENDING_COMMENT,
+});
+
+export const nodeSetComments = (comments: IComment[]) => ({
+  comments,
+  type: NODE_ACTIONS.SET_COMMENTS,
+});

src/redux/node/api.ts

@@ -1,5 +1,5 @@
 import { api, configWithToken, resultMiddleware, errorMiddleware } from '~/utils/api';
-import { INode, IResultWithStatus } from '../types';
+import { INode, IResultWithStatus, IComment } from '../types';
 import { API } from '~/constants/api';
 
 export const postNode = ({
@@ -33,3 +33,17 @@ export const getNode = ({
     .get(API.NODE.GET_NODE(id))
     .then(resultMiddleware)
     .catch(errorMiddleware);
+
+export const postNodeComment = ({
+  id,
+  data,
+  access,
+}: {
+  access: string;
+  id: number;
+  data: IComment;
+}): Promise<IResultWithStatus<{ comment: Comment }>> =>
+  api
+    .post(API.NODE.COMMENT(id), data, configWithToken(access))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);

src/redux/node/constants.ts

@@ -1,7 +1,6 @@
 import { FC } from 'react';
-import { IBlock, INode, ValueOf } from '../types';
+import { IBlock, INode, ValueOf, IComment } from '../types';
 import { NodeImageBlock } from '~/components/node/NodeImageBlock';
-import { NodeImageBlockPlaceholder } from '~/components/node/NodeImageBlockPlaceholder';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -11,7 +10,10 @@ export const NODE_ACTIONS = {
   SET_SAVE_ERRORS: `${prefix}SET_SAVE_ERRORS`,
   SET_LOADING: `${prefix}SET_LOADING`,
   SET_LOADING_COMMENTS: `${prefix}SET_LOADING_COMMENTS`,
+  SET_SENDING_COMMENT: `${prefix}SET_SENDING_COMMENT`,
   SET_CURRENT: `${prefix}SET_CURRENT`,
+  POST_COMMENT: `${prefix}POST_COMMENT`,
+  SET_COMMENTS: `${prefix}SET_COMMENTS`,
 };
 
 export const EMPTY_BLOCK: IBlock = {
@@ -54,3 +56,10 @@ type INodeComponents = Record<ValueOf<typeof NODE_TYPES>, FC<{ node: INode; is_l
 export const NODE_COMPONENTS: INodeComponents = {
   [NODE_TYPES.IMAGE]: NodeImageBlock,
 };
+
+export const EMPTY_COMMENT: IComment = {
+  text: '',
+  files: [],
+  is_private: false,
+  owner: null,
+};

src/redux/node/handlers.ts

@@ -5,6 +5,8 @@ import {
   nodeSetLoading,
   nodeSetCurrent,
   nodeSetLoadingComments,
+  nodeSetSendingComment,
+  nodeSetComments,
 } from './actions';
 import { INodeState } from './reducer';
 
@@ -22,9 +24,19 @@ const setLoadingComments = (
 const setCurrent = (state: INodeState, { current }: ReturnType<typeof nodeSetCurrent>) =>
   assocPath(['current'], current, state);
 
+const setSendingComment = (
+  state: INodeState,
+  { is_sending_comment }: ReturnType<typeof nodeSetSendingComment>
+) => assocPath(['is_sending_comment'], is_sending_comment, state);
+
+const setComments = (state: INodeState, { comments }: ReturnType<typeof nodeSetComments>) =>
+  assocPath(['comments'], comments, state);
+
 export const NODE_HANDLERS = {
   [NODE_ACTIONS.SAVE]: setSaveErrors,
   [NODE_ACTIONS.SET_LOADING]: setLoading,
   [NODE_ACTIONS.SET_LOADING_COMMENTS]: setLoadingComments,
   [NODE_ACTIONS.SET_CURRENT]: setCurrent,
+  [NODE_ACTIONS.SET_SENDING_COMMENT]: setSendingComment,
+  [NODE_ACTIONS.SET_COMMENTS]: setComments,
 };

src/redux/node/reducer.ts

@@ -13,6 +13,7 @@ export type INodeState = Readonly<{
 
   is_loading: boolean;
   is_loading_comments: boolean;
+  is_sending_comment: boolean;
 }>;
 
 const INITIAL_STATE: INodeState = {
@@ -24,8 +25,11 @@ const INITIAL_STATE: INodeState = {
   },
   current: { ...EMPTY_NODE },
   comments: [],
+
   is_loading: false,
   is_loading_comments: false,
+  is_sending_comment: false,
+
   error: null,
   errors: {},
 };

src/redux/node/sagas.ts

@@ -9,14 +9,18 @@ import {
   nodeSetLoading,
   nodeSetCurrent,
   nodeSetLoadingComments,
+  nodePostComment,
+  nodeSetSendingComment,
+  nodeSetComments,
 } from './actions';
-import { postNode, getNode } from './api';
+import { postNode, getNode, postNodeComment } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes } from '../flow/actions';
 import { ERRORS } from '~/constants/errors';
 import { modalSetShown } from '../modal/actions';
 import { selectFlowNodes } from '../flow/selectors';
 import { URLS } from '~/constants/urls';
+import { selectNode } from './selectors';
 
 function* onNodeSave({ node }: ReturnType<typeof nodeSave>) {
   yield put(nodeSetSaveErrors({}));
@@ -67,7 +71,27 @@ function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
   return;
 }
 
+function* onPostComment({ data, id }: ReturnType<typeof nodePostComment>) {
+  yield put(nodeSetSendingComment(true));
+  const {
+    data: { comment },
+    error,
+  } = yield call(reqWrapper, postNodeComment, { data, id });
+  yield put(nodeSetSendingComment(false));
+
+  if (error || !comment) {
+    return yield put(nodeSetSaveErrors({ error: error || ERRORS.EMPTY_RESPONSE }));
+  }
+
+  console.log({ comment });
+
+  const { comments } = yield select(selectNode);
+
+  yield put(nodeSetComments([...comments, comment]));
+}
+
 export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.SAVE, onNodeSave);
   yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
+  yield takeLatest(NODE_ACTIONS.POST_COMMENT, onPostComment);
 }