added boris route

src/containers/App.tsx

@@ -17,6 +17,7 @@ import { BlurWrapper } from '~/components/containers/BlurWrapper';
 import { PageCover } from '~/components/containers/PageCover';
 import { NodeLayout } from './node/NodeLayout';
 import { BottomContainer } from '~/containers/main/BottomContainer';
+import { BorisLayout } from './node/BorisLayout';
 
 const mapStateToProps = state => ({
   modal: selectModal(state),
@@ -41,6 +42,7 @@ const Component: FC<IProps> = ({ modal: { is_shown } }) => {
               <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
               <Route path="/examples/horizontal" component={HorizontalExample} />
               <Route path="/post:id" component={NodeLayout} />
+              <Route path="/boris" component={BorisLayout} />
 
               <Redirect to="/" />
             </Switch>

src/containers/node/BorisLayout/index.tsx

@@ -0,0 +1,45 @@
+import React, { FC, useEffect } from 'react';
+import { RouteComponentProps } from 'react-router';
+import * as NODE_ACTIONS from '~/redux/node/actions';
+import { selectNode } from '~/redux/node/selectors';
+import { selectUser } from '~/redux/auth/selectors';
+import { connect } from 'react-redux';
+
+const mapStateToProps = state => ({
+  node: selectNode(state),
+  user: selectUser(state),
+});
+
+const mapDispatchToProps = {
+  nodeLoadNode: NODE_ACTIONS.nodeLoadNode,
+  nodeUpdateTags: NODE_ACTIONS.nodeUpdateTags,
+  nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage,
+  nodeEdit: NODE_ACTIONS.nodeEdit,
+  nodeLike: NODE_ACTIONS.nodeLike,
+  nodeStar: NODE_ACTIONS.nodeStar,
+};
+
+type IProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps &
+  RouteComponentProps<{ id: string }> & {};
+
+const id = 696;
+
+const BorisLayoutUnconnected: FC<IProps> = ({
+  node: { is_loading, is_loading_comments, comments = [], current: node, related },
+  nodeLoadNode,
+}) => {
+  useEffect(() => {
+    if (is_loading) return;
+    nodeLoadNode(id);
+  }, [nodeLoadNode, id]);
+
+  return <div>{comments.length}</div>;
+};
+
+const BorisLayout = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BorisLayoutUnconnected);
+
+export { BorisLayout };

src/containers/node/NodeLayout/index.tsx

@@ -25,7 +25,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = {
-  nodeLoadNode: NODE_ACTIONS.nodeLoadNode,
+  nodeGotoNode: NODE_ACTIONS.nodeGotoNode,
   nodeUpdateTags: NODE_ACTIONS.nodeUpdateTags,
   nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage,
   nodeEdit: NODE_ACTIONS.nodeEdit,
@@ -45,7 +45,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     node: { is_loading, is_loading_comments, comments = [], current: node, related },
     user,
     user: { is_user },
-    nodeLoadNode,
+    nodeGotoNode,
     nodeUpdateTags,
     nodeEdit,
     nodeLike,
@@ -58,8 +58,8 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
 
     useEffect(() => {
       if (is_loading) return;
-      nodeLoadNode(parseInt(id, 10), null);
-    }, [nodeLoadNode, id]);
+      nodeGotoNode(parseInt(id, 10), null);
+    }, [nodeGotoNode, id]);
 
     const onTagsChange = useCallback(
       (tags: string[]) => {

src/index.tsx

@@ -62,8 +62,8 @@ render(
 );
 
 /*
-  - comment editing
-  - boris with comments
+  --> boris with comments
+
   - profile modal
   - profile editing
   - messages
@@ -78,6 +78,7 @@ render(
   - better node brief update
   
   - social integration (assimilate)
+  - comment editing
 
   Done:
   - better dialogs: https://codepen.io/muemue/pen/abbEMMy

src/redux/node/actions.ts

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

src/redux/node/constants.ts

@@ -18,6 +18,7 @@ const prefix = 'NODE.';
 export const NODE_ACTIONS = {
   SAVE: `${prefix}SAVE`,
   LOAD_NODE: `${prefix}LOAD_NODE`,
+  GOTO_NODE: `${prefix}GOTO_NODE`,
 
   EDIT: `${prefix}EDIT`,
   LIKE: `${prefix}LIKE`,

src/redux/node/sagas.ts

@@ -20,6 +20,7 @@ import {
   nodeEdit,
   nodeLike,
   nodeSetRelated,
+  nodeGotoNode,
 } from './actions';
 import {
   postNode,
@@ -89,17 +90,19 @@ function* onNodeSave({ node }: ReturnType<typeof nodeSave>) {
   return yield put(modalSetShown(false));
 }
 
-function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
+function* onNodeGoto({ id, node_type }: ReturnType<typeof nodeGotoNode>) {
+  if (node_type) yield put(nodeSetCurrent({ ...EMPTY_NODE, type: node_type }));
+  yield put(nodeLoadNode(id));
+  yield put(push(URLS.NODE_URL(id)));
+}
+
+function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
   yield put(nodeSetLoading(true));
   yield put(nodeSetLoadingComments(true));
   yield put(nodeSetSaveErrors({}));
   yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT }));
   yield put(nodeSetRelated(null));
 
-  if (node_type) yield put(nodeSetCurrent({ ...EMPTY_NODE, type: node_type }));
-
-  yield put(push(URLS.NODE_URL(id)));
-
   const {
     data: { node, error },
   } = yield call(reqWrapper, getNode, { id });
@@ -113,7 +116,6 @@ function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
   yield put(nodeSetSaveErrors({}));
   yield put(nodeSetCurrent(node));
 
-  // todo: load comments
   const {
     comments: {
       data: { comments },
@@ -232,6 +234,7 @@ function* onStarSaga({ id }: ReturnType<typeof nodeLike>) {
 
 export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.SAVE, onNodeSave);
+  yield takeLatest(NODE_ACTIONS.GOTO_NODE, onNodeGoto);
   yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
   yield takeLatest(NODE_ACTIONS.POST_COMMENT, onPostComment);
   yield takeLatest(NODE_ACTIONS.UPDATE_TAGS, onUpdateTags);