diff --git a/src/components/flow/FlowGrid/index.tsx b/src/components/flow/FlowGrid/index.tsx index d9ca30b6..1d798446 100644 --- a/src/components/flow/FlowGrid/index.tsx +++ b/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; onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void; -}; +} -export const FlowGrid: FC = ({ user, nodes, onChangeCellView }) => { +export const FlowGrid: FC = ({ user, nodes, onChangeCellView }) => { if (!nodes) { return null; } diff --git a/src/containers/main/MainRouter/index.tsx b/src/containers/main/MainRouter/index.tsx index 84358a5f..e9d06ab4 100644 --- a/src/containers/main/MainRouter/index.tsx +++ b/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 = () => { return ( - + diff --git a/src/layouts/NodeLayout/index.tsx b/src/layouts/NodeLayout/index.tsx index ffd1b78d..1bea63b4 100644 --- a/src/layouts/NodeLayout/index.tsx +++ b/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 = 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 (
@@ -56,18 +44,18 @@ const NodeLayout: FC = memo( {block}
- +
diff --git a/src/pages/node/[id].tsx b/src/pages/node/[id].tsx new file mode 100644 index 00000000..e612707d --- /dev/null +++ b/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 = ({ + match: { + params: { id }, + }, +}) => { + const { + node, + isLoading, + isLoadingComments, + comments, + commentsCount, + related, + lastSeenCurrent, + } = useFullNode(id); + + useScrollToTop([id, isLoadingComments]); + + return ( + + ); +}; + +export default NodePage; diff --git a/src/utils/hooks/node/useFullNode.ts b/src/utils/hooks/node/useFullNode.ts new file mode 100644 index 00000000..8bad4edf --- /dev/null +++ b/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 }; +};