refactored node page

src/components/flow/FlowGrid/index.tsx

@@ -8,13 +8,13 @@ import styles from './styles.module.scss';
 import { getURLFromString } from '~/utils/dom';
 import { canEditNode } from '~/utils/node';
 
-type IProps = {
+interface Props {
   nodes: IFlowNode[];
   user: Partial<IUser>;
   onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
-};
+}
 
-export const FlowGrid: FC<IProps> = ({ user, nodes, onChangeCellView }) => {
+export const FlowGrid: FC<Props> = ({ user, nodes, onChangeCellView }) => {
   if (!nodes) {
     return null;
   }

src/containers/main/MainRouter/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { URLS } from '~/constants/urls';
-import { NodeLayout } from '~/layouts/NodeLayout';
 import { BorisLayout } from '~/layouts/BorisLayout';
 import { ErrorNotFound } from '~/containers/pages/ErrorNotFound';
 import { Redirect, Route, Switch, useLocation } from 'react-router';
@@ -9,6 +8,7 @@ import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectAuthUser } from '~/redux/auth/selectors';
 import { ProfileLayout } from '~/layouts/ProfileLayout';
 import FlowPage from '~/pages';
+import NodePage from '~/pages/node/[id]';
 
 interface IProps {}
 
@@ -18,7 +18,7 @@ const MainRouter: FC<IProps> = () => {
 
   return (
     <Switch location={location}>
-      <Route path={URLS.NODE_URL(':id')} component={NodeLayout} />
+      <Route path={URLS.NODE_URL(':id')} component={NodePage} />
       <Route path={URLS.BORIS} component={BorisLayout} />
       <Route path={URLS.ERRORS.NOT_FOUND} component={ErrorNotFound} />
       <Route path={URLS.PROFILE_PAGE(':username')} component={ProfileLayout} />

src/layouts/NodeLayout/index.tsx

@@ -1,51 +1,39 @@
 import React, { FC, memo } from 'react';
-import { Route, RouteComponentProps } from 'react-router';
-import { selectNode } from '~/redux/node/selectors';
+import { Route } from 'react-router';
 import { Card } from '~/components/containers/Card';
 
 import { NodePanel } from '~/components/node/NodePanel';
 import { Footer } from '~/components/main/Footer';
 
-import styles from './styles.module.scss';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { Container } from '~/containers/main/Container';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
 import { NodeBottomBlock } from '~/components/node/NodeBottomBlock';
 import { useNodeCoverImage } from '~/utils/hooks/node/useNodeCoverImage';
-import { useScrollToTop } from '~/utils/hooks/useScrollToTop';
-import { useLoadNode } from '~/utils/hooks/node/useLoadNode';
 import { URLS } from '~/constants/urls';
 import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog';
-import { useOnNodeSeen } from '~/utils/hooks/node/useOnNodeSeen';
-import { canEditNode } from '~/utils/node';
 import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
+import { IComment, INode } from '~/redux/types';
+import { INodeRelated } from '~/redux/node/types';
 
-type IProps = RouteComponentProps<{ id: string }> & {};
+import styles from './styles.module.scss';
+
+type IProps = {
+  node: INode;
+  lastSeenCurrent?: string;
+  related: INodeRelated;
+  comments: IComment[];
+  commentsCount: number;
+  isLoading: boolean;
+  isLoadingComments: boolean;
+};
 
 const NodeLayout: FC<IProps> = memo(
-  ({
-    match: {
-      params: { id },
-    },
-  }) => {
-    const {
-      is_loading,
-      current,
-      comments,
-      comment_count,
-      is_loading_comments,
-      related,
-      lastSeenCurrent,
-    } = useShallowSelect(selectNode);
+  ({ node, comments, commentsCount, related, lastSeenCurrent, isLoading, isLoadingComments }) => {
+    useNodeCoverImage(node);
 
-    useNodeCoverImage(current);
-    useScrollToTop([id, is_loading_comments]);
-    useLoadNode(id, is_loading);
-    useOnNodeSeen(current);
-
-    const { head, block } = useNodeBlocks(current, is_loading);
-    const [canEdit] = useNodePermissions(current);
+    const { head, block } = useNodeBlocks(node, isLoading);
+    const [canEdit] = useNodePermissions(node);
 
     return (
       <div className={styles.wrap}>
@@ -56,18 +44,18 @@ const NodeLayout: FC<IProps> = memo(
             {block}
 
             <div className={styles.panel}>
-              <NodePanel node={current} isLoading={is_loading} />
+              <NodePanel node={node} isLoading={isLoading} />
             </div>
 
             <NodeBottomBlock
               canEdit={canEdit}
-              node={current}
+              node={node}
               comments={comments}
-              commentsCount={comment_count}
+              commentsCount={commentsCount}
               commentsOrder="DESC"
               related={related}
-              isLoadingComments={is_loading_comments}
-              isLoading={is_loading}
+              isLoadingComments={isLoadingComments}
+              isLoading={isLoading}
               lastSeenCurrent={lastSeenCurrent}
             />
 

src/pages/node/[id].tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+import { NodeLayout } from '~/layouts/NodeLayout';
+import { RouteComponentProps } from 'react-router';
+import { useScrollToTop } from '~/utils/hooks/useScrollToTop';
+import { useFullNode } from '~/utils/hooks/node/useFullNode';
+
+type Props = RouteComponentProps<{ id: string }> & {};
+
+const NodePage: FC<Props> = ({
+  match: {
+    params: { id },
+  },
+}) => {
+  const {
+    node,
+    isLoading,
+    isLoadingComments,
+    comments,
+    commentsCount,
+    related,
+    lastSeenCurrent,
+  } = useFullNode(id);
+
+  useScrollToTop([id, isLoadingComments]);
+
+  return (
+    <NodeLayout
+      node={node}
+      related={related}
+      lastSeenCurrent={lastSeenCurrent}
+      comments={comments}
+      commentsCount={commentsCount}
+      isLoading={isLoading}
+      isLoadingComments={isLoadingComments}
+    />
+  );
+};
+
+export default NodePage;

src/utils/hooks/node/useFullNode.ts

@@ -0,0 +1,21 @@
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectNode } from '~/redux/node/selectors';
+import { useLoadNode } from '~/utils/hooks/node/useLoadNode';
+import { useOnNodeSeen } from '~/utils/hooks/node/useOnNodeSeen';
+
+export const useFullNode = (id: string) => {
+  const {
+    is_loading: isLoading,
+    current: node,
+    comments,
+    comment_count: commentsCount,
+    is_loading_comments: isLoadingComments,
+    related,
+    lastSeenCurrent,
+  } = useShallowSelect(selectNode);
+
+  useLoadNode(id, isLoading);
+  useOnNodeSeen(node);
+
+  return { node, comments, commentsCount, related, lastSeenCurrent, isLoading, isLoadingComments };
+};