boris comment more properly showing

src/redux/node/actions.ts

@@ -133,3 +133,7 @@ export const nodeSetCoverImage = (current_cover_image: IFile) => ({
   type: NODE_ACTIONS.SET_COVER_IMAGE,
   current_cover_image,
 });
+
+export const nodeLoadMoreComments = () => ({
+  type: NODE_ACTIONS.LOAD_MORE_COMMENTS,
+});

src/redux/node/api.ts

@@ -103,7 +103,7 @@ export const getNodeComments = ({
   access: string;
   take?: number;
   skip?: number;
-}): Promise<IResultWithStatus<{ comments: Comment[] }>> =>
+}): Promise<IResultWithStatus<{ comments: IComment[]; comment_count: number }>> =>
   api
     .get(API.NODE.COMMENT(id), configWithToken(access, { params: { take, skip } }))
     .then(resultMiddleware)

src/redux/node/constants.ts

@@ -29,6 +29,7 @@ export const NODE_ACTIONS = {
   EDIT_COMMENT: `${prefix}EDIT_COMMENT`,
   CANCEL_COMMENT_EDIT: `${prefix}CANCEL_COMMENT_EDIT`,
   CREATE: `${prefix}CREATE`,
+  LOAD_MORE_COMMENTS: `${prefix}LOAD_MORE_COMMENTS`,
 
   SET_SAVE_ERRORS: `${prefix}SET_SAVE_ERRORS`,
   SET_LOADING: `${prefix}SET_LOADING`,

src/redux/node/sagas.ts

@@ -1,4 +1,4 @@
-import { takeLatest, call, put, select, delay, all } from 'redux-saga/effects';
+import { takeLatest, call, put, select, delay, all, takeLeading } from 'redux-saga/effects';
 import { push } from 'connected-react-router';
 import omit from 'ramda/es/omit';
 
@@ -53,7 +53,7 @@ import { modalSetShown, modalShowDialog } from '../modal/actions';
 import { selectFlowNodes, selectFlow } from '../flow/selectors';
 import { URLS } from '~/constants/urls';
 import { selectNode } from './selectors';
-import { IResultWithStatus, INode } from '../types';
+import { IResultWithStatus, INode, Unwrap } from '../types';
 import { NODE_EDITOR_DIALOGS } from '~/constants/dialogs';
 import { DIALOGS } from '~/redux/modal/constants';
 import { INodeState } from './reducer';
@@ -119,6 +119,36 @@ function* onNodeGoto({ id, node_type }: ReturnType<typeof nodeGotoNode>) {
   yield put(push(URLS.NODE_URL(id)));
 }
 
+function* onNodeLoadMoreComments() {
+  const {
+    current: { id },
+    comments,
+  }: ReturnType<typeof selectNode> = yield select(selectNode);
+
+  const { data, error }: Unwrap<ReturnType<typeof getNodeComments>> = yield call(
+    reqWrapper,
+    getNodeComments,
+    {
+      id,
+      take: COMMENTS_DISPLAY,
+      skip: comments.length,
+    }
+  );
+
+  const current: ReturnType<typeof selectNode> = yield select(selectNode);
+
+  if (!data || error || current.current.id != id) {
+    return;
+  }
+
+  yield put(
+    nodeSet({
+      comments: [...comments, ...data.comments],
+      comment_count: data.comment_count,
+    })
+  );
+}
+
 function* onNodeLoad({ id, order = 'ASC' }: ReturnType<typeof nodeLoadNode>) {
   yield put(nodeSetLoading(true));
   yield put(nodeSetLoadingComments(true));
@@ -338,4 +368,5 @@ export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.LOCK, onLockSaga);
   yield takeLatest(NODE_ACTIONS.LOCK_COMMENT, onLockCommentSaga);
   yield takeLatest(NODE_ACTIONS.EDIT_COMMENT, onEditCommentSaga);
+  yield takeLeading(NODE_ACTIONS.LOAD_MORE_COMMENTS, onNodeLoadMoreComments);
 }

src/redux/types.ts

@@ -191,3 +191,5 @@ export type INodeNotification = {
 };
 
 export type INotification = IMessageNotification | ICommentNotification;
+
+export type Unwrap<T> = T extends Promise<infer U> ? U : T;