made boris with hooks

src/components/boris/BorisComments/index.tsx

@@ -13,7 +13,7 @@ import { IComment, IFile, INode } from '~/redux/types';
 interface IProps {
   isLoadingComments: boolean;
   commentCount: number;
-  node: INode;
+  node?: INode;
   comments: IComment[];
   onDelete: (id: IComment['id'], locked: boolean) => void;
   onLoadMoreComments: () => void;
@@ -34,7 +34,7 @@ const BorisComments: FC<IProps> = ({
   return (
     <>
       <Group className={styles.grid}>
-        {user.is_user && <NodeCommentForm isBefore nodeId={node.id} />}
+        {user.is_user && <NodeCommentForm isBefore nodeId={node?.id} />}
 
         {isLoadingComments ? (
           <NodeNoComments is_loading count={7} />

src/components/node/NodeBottomBlock/index.tsx

@@ -19,8 +19,8 @@ interface IProps {
   commentsOrder: 'ASC' | 'DESC';
   comments: IComment[];
   commentsCount: number;
+  related?: INodeRelated;
   isLoadingComments: boolean;
-  related: INodeRelated;
   onDeleteComment: (id: IComment['id'], locked: boolean) => void;
   onLoadMoreComments: () => void;
   onShowPhotoswipe: (images: IFile[], index: number) => void;

src/components/node/NodeRelatedBlock/index.tsx

@@ -9,7 +9,7 @@ import { Link } from 'react-router-dom';
 interface IProps {
   isLoading: boolean;
   node?: INode;
-  related: INodeRelated;
+  related?: INodeRelated;
 }
 
 const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {

src/layouts/BorisLayout/index.tsx

@@ -27,16 +27,27 @@ import { useHistory, useLocation } from 'react-router';
 import { Card } from '~/components/containers/Card';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
 import { BorisContactItem } from '~/components/boris/BorisContactItem';
+import { useNode } from '~/utils/hooks/node/useNode';
+import { useNodeComments } from '~/utils/hooks/node/useNodeComments';
 
 type IProps = {};
 
+const borisNodeID = 696;
+
 const BorisLayout: FC<IProps> = () => {
   const title = useRandomPhrase('BORIS_TITLE');
   const dispatch = useDispatch();
-  const node = useShallowSelect(selectNode);
+  const { node } = useNode(borisNodeID);
+  const {
+    comments,
+    isLoading: isLoadingComments,
+    count: commentCount,
+    onLoadMoreComments,
+    onShowPhotoswipe,
+    onDelete,
+  } = useNodeComments(borisNodeID);
   const user = useShallowSelect(selectUser);
   const stats = useShallowSelect(selectBorisStats);
-  const comments = useShallowSelect(selectNodeComments);
   const is_tester = useShallowSelect(selectAuthIsTester);
 
   useEffect(() => {
@@ -54,11 +65,6 @@ const BorisLayout: FC<IProps> = () => {
     dispatch(authSetUser({ last_seen_boris: last_comment.created_at }));
   }, [user.last_seen_boris, dispatch, comments]);
 
-  useEffect(() => {
-    if (node.is_loading) return;
-    dispatch(nodeLoadNode(696, 'DESC'));
-  }, [dispatch]);
-
   useEffect(() => {
     dispatch(borisLoadStats());
   }, [dispatch]);
@@ -111,13 +117,13 @@ const BorisLayout: FC<IProps> = () => {
                 <Route path={`${URLS.BORIS}/ui`} component={BorisUIDemo} />
 
                 <BorisComments
-                  isLoadingComments={node.is_loading_comments}
-                  commentCount={node.comment_count}
-                  node={node.current}
-                  comments={node.comments}
-                  onDelete={console.log}
-                  onLoadMoreComments={console.log}
-                  onShowPhotoswipe={console.log}
+                  isLoadingComments={isLoadingComments}
+                  commentCount={commentCount}
+                  node={node}
+                  comments={comments}
+                  onDelete={onDelete}
+                  onLoadMoreComments={onLoadMoreComments}
+                  onShowPhotoswipe={onShowPhotoswipe}
                 />
               </Switch>
             }

src/layouts/NodeLayout/index.tsx

@@ -1,90 +1,79 @@
-import React, { FC, memo, useCallback } from 'react';
+import React, { FC, memo } from 'react';
 import { Route, RouteComponentProps } from 'react-router';
-import { selectNode } from '~/redux/node/selectors';
 import { Card } from '~/components/containers/Card';
 
 import { NodePanel } from '~/components/node/NodePanel';
 import { Footer } from '~/components/main/Footer';
 
 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 styles from './styles.module.scss';
-import { useNodeFetcher } from '~/utils/hooks/node/useNodeFetcher';
+import { useNode } from '~/utils/hooks/node/useNode';
 import { useNodeComments } from '~/utils/hooks/node/useNodeComments';
-import { IFile } from '~/redux/types';
-import { modalShowPhotoswipe } from '~/redux/modal/actions';
-import { useDispatch } from 'react-redux';
+import { useNodeRelated } from '~/utils/hooks/node/useNodeRelated';
 
 type IProps = RouteComponentProps<{ id: string }> & {};
 
-const NodeLayout: FC<IProps> = memo(
-  ({
-    match: {
-      params: { id },
-    },
-  }) => {
-    const { node, isLoading } = useNodeFetcher(parseInt(id, 10));
-    const {
-      comments,
-      isLoading: isLoadingComments,
-      count: commentsCount,
-      onDelete,
-      onLoadMoreComments,
-      onShowPhotoswipe,
-    } = useNodeComments(parseInt(id, 10));
+const NodeLayout: FC<IProps> = memo(({ match: { params } }) => {
+  const id = parseInt(params.id, 10);
+  const { node, isLoading } = useNode(id);
+  const {
+    comments,
+    isLoading: isLoadingComments,
+    count: commentsCount,
+    onDelete,
+    onLoadMoreComments,
+    onShowPhotoswipe,
+  } = useNodeComments(id);
 
-    const { related } = useShallowSelect(selectNode);
+  const { related } = useNodeRelated(id);
 
-    useNodeCoverImage(node);
-    useScrollToTop([id]);
-    useOnNodeSeen(node);
-    useLoadNode(id, isLoading);
+  useNodeCoverImage(node);
+  useScrollToTop([id]);
+  useOnNodeSeen(node);
 
-    const { head, block } = useNodeBlocks(node, isLoading);
+  const { head, block } = useNodeBlocks(node, isLoading);
 
-    return (
-      <div className={styles.wrap}>
-        {head}
+  return (
+    <div className={styles.wrap}>
+      {head}
 
-        <Container>
-          <Card className={styles.node} seamless>
-            {block}
+      <Container>
+        <Card className={styles.node} seamless>
+          {block}
 
-            <NodePanel node={node} isLoading={isLoading} />
+          <NodePanel node={node} isLoading={isLoading} />
 
-            <NodeBottomBlock
-              node={node}
-              comments={comments}
-              isLoading={isLoading}
-              isLoadingComments={isLoadingComments}
-              commentsCount={commentsCount}
-              commentsOrder="DESC"
-              related={related}
-              onShowPhotoswipe={onShowPhotoswipe}
-              onDeleteComment={onDelete}
-              onLoadMoreComments={onLoadMoreComments}
-            />
+          <NodeBottomBlock
+            node={node}
+            comments={comments}
+            isLoading={isLoading}
+            isLoadingComments={isLoadingComments}
+            commentsCount={commentsCount}
+            commentsOrder="DESC"
+            related={related}
+            onShowPhotoswipe={onShowPhotoswipe}
+            onDeleteComment={onDelete}
+            onLoadMoreComments={onLoadMoreComments}
+          />
 
-            <Footer />
-          </Card>
-        </Container>
+          <Footer />
+        </Card>
+      </Container>
 
-        <SidebarRouter prefix="/post:id" />
+      <SidebarRouter prefix="/post:id" />
 
-        <Route path={URLS.NODE_EDIT_URL(':id')} render={() => <EditorEditDialog />} />
-      </div>
-    );
-  }
-);
+      <Route path={URLS.NODE_EDIT_URL(':id')} render={() => <EditorEditDialog />} />
+    </div>
+  );
+});
 
 export { NodeLayout };

src/redux/node/api.ts

@@ -93,8 +93,7 @@ export const apiGetNodeComments = ({
     .get<ApiGetNodeCommentsResponse>(API.NODE.COMMENT(id), { params: { take, skip } })
     .then(cleanResult);
 
-export const apiGetNodeRelated = ({ id }: ApiGetNodeRelatedRequest) =>
-  api.get<ApiGetNodeRelatedResult>(API.NODE.RELATED(id)).then(cleanResult);
+export const apiGetNodeRelated = url => api.get<ApiGetNodeRelatedResult>(url).then(cleanResult);
 
 export const apiPostNodeTags = ({ id, tags }: ApiPostNodeTagsRequest) =>
   api

src/redux/node/sagas.ts

@@ -165,7 +165,7 @@ function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
       Unwrap<typeof apiGetNodeRelated>
     ] = yield all([
       call(apiGetNodeComments, { id, take: COMMENTS_DISPLAY, skip: 0 }),
-      call(apiGetNodeRelated, { id }),
+      call(apiGetNodeRelated, id),
     ]);
 
     yield put(

src/utils/hooks/node/useNode.ts

@@ -2,7 +2,7 @@ import useSWR from 'swr';
 import { INode } from '~/redux/types';
 import { apiGetNode } from '~/redux/node/api';
 
-export const useNodeFetcher = (id: INode['id']) => {
+export const useNode = (id: INode['id']) => {
   const { data, error, isValidating } = useSWR(`${id}`, apiGetNode);
   const node = data?.node;
   const isLoading = !data && !isValidating;

src/utils/hooks/node/useNodeRelated.ts

@@ -0,0 +1,12 @@
+import { INode } from '~/redux/types';
+import useSWR from 'swr';
+import { apiGetNodeRelated } from '~/redux/node/api';
+import { API } from '~/constants/api';
+
+export const useNodeRelated = (id?: INode['id']) => {
+  const { data, error, isValidating } = useSWR(API.NODE.RELATED(id), apiGetNodeRelated);
+  const isLoading = !data && !isValidating;
+  const related = data?.related;
+
+  return { related, error, isLoading };
+};