loading comments

src/containers/node/NodeLayout/index.tsx

@@ -38,8 +38,8 @@ const NodeLayoutUnconnected: FC<IProps> = ({
 }) => {
   useEffect(() => {
     if (is_loading) return;
-    nodeLoadNode(id, null);
+    nodeLoadNode(parseInt(id, 10), null);
-  }, []);
+  }, [nodeLoadNode, id]);
 
   const block = node && node.type && NODE_COMPONENTS[node.type] && NODE_COMPONENTS[node.type];
 

src/redux/node/actions.ts

@@ -12,7 +12,7 @@ export const nodeSetSaveErrors = (errors: IValidationErrors) => ({
   type: NODE_ACTIONS.SET_SAVE_ERRORS,
 });
 
-export const nodeLoadNode = (id: string | number, node_type: INode['type']) => ({
+export const nodeLoadNode = (id: number, node_type: INode['type']) => ({
   id,
   node_type,
   type: NODE_ACTIONS.LOAD_NODE,

src/redux/node/api.ts

@@ -47,3 +47,13 @@ export const postNodeComment = ({
     .post(API.NODE.COMMENT(id), data, configWithToken(access))
     .then(resultMiddleware)
     .catch(errorMiddleware);
+
+export const getNodeComments = ({
+  id,
+}: {
+  id: number;
+}): Promise<IResultWithStatus<{ comment: Comment }>> =>
+  api
+    .get(API.NODE.COMMENT(id))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);

src/redux/node/sagas.ts

@@ -13,7 +13,7 @@ import {
   nodeSetSendingComment,
   nodeSetComments,
 } from './actions';
-import { postNode, getNode, postNodeComment } from './api';
+import { postNode, getNode, postNodeComment, getNodeComments } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes } from '../flow/actions';
 import { ERRORS } from '~/constants/errors';
@@ -65,7 +65,12 @@ function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
   yield put(nodeSetCurrent(node));
 
   // todo: load comments
-  yield delay(500);
+  const {
+    data: { comments },
+  } = yield call(getNodeComments, { id });
+
+  yield put(nodeSetComments(comments || []));
+
   yield put(nodeSetLoadingComments(false));
 
   return;

src/styles/colors.scss

@@ -32,7 +32,7 @@ $text_sign: 22px;
 $input_bg_color: darken($content_bg, 2%);
 $button_bg_color: $red_gradient;
 
-$comment_bg: lighten($main_bg_color, 0%);
+$comment_bg: lighten($content_bg, 2%);
 $panel_bg: transparent;
 $node_bg: darken($content_bg, 4%);
 $node_image_bg: darken($main_bg_color, 2%);