From 398f44e23237c624780297284796bca69328265f Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Mon, 26 Aug 2019 16:46:51 +0700
Subject: [PATCH] loading comments

---
 src/containers/node/NodeLayout/index.tsx |  4 ++--
 src/redux/node/actions.ts                |  2 +-
 src/redux/node/api.ts                    | 10 ++++++++++
 src/redux/node/sagas.ts                  |  9 +++++++--
 src/styles/colors.scss                   |  2 +-
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index b329b578..19d000df 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/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];
 
diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts
index fefccd08..8e13756c 100644
--- a/src/redux/node/actions.ts
+++ b/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,
diff --git a/src/redux/node/api.ts b/src/redux/node/api.ts
index be439b89..20cf9cd4 100644
--- a/src/redux/node/api.ts
+++ b/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);
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index b700e763..5c9af406 100644
--- a/src/redux/node/sagas.ts
+++ b/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;
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index bb1ed0a0..f2684a37 100644
--- a/src/styles/colors.scss
+++ b/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%);