From 20926609b954bc82f0cdecaa22a0ccd95f815973 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 20 Sep 2021 12:59:02 +0700 Subject: [PATCH] made boris with hooks --- src/components/boris/BorisComments/index.tsx | 4 +- src/components/node/NodeBottomBlock/index.tsx | 2 +- .../node/NodeRelatedBlock/index.tsx | 2 +- src/layouts/BorisLayout/index.tsx | 34 +++--- src/layouts/NodeLayout/index.tsx | 103 ++++++++---------- src/redux/node/api.ts | 3 +- src/redux/node/sagas.ts | 2 +- .../node/{useNodeFetcher.ts => useNode.ts} | 2 +- src/utils/hooks/node/useNodeRelated.ts | 12 ++ 9 files changed, 85 insertions(+), 79 deletions(-) rename src/utils/hooks/node/{useNodeFetcher.ts => useNode.ts} (84%) create mode 100644 src/utils/hooks/node/useNodeRelated.ts diff --git a/src/components/boris/BorisComments/index.tsx b/src/components/boris/BorisComments/index.tsx index 4a61c8d0..67d379ca 100644 --- a/src/components/boris/BorisComments/index.tsx +++ b/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 = ({ return ( <> - {user.is_user && } + {user.is_user && } {isLoadingComments ? ( diff --git a/src/components/node/NodeBottomBlock/index.tsx b/src/components/node/NodeBottomBlock/index.tsx index 7e3c6b78..a4416753 100644 --- a/src/components/node/NodeBottomBlock/index.tsx +++ b/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; diff --git a/src/components/node/NodeRelatedBlock/index.tsx b/src/components/node/NodeRelatedBlock/index.tsx index eae15277..60ff5b51 100644 --- a/src/components/node/NodeRelatedBlock/index.tsx +++ b/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 = ({ isLoading, node, related }) => { diff --git a/src/layouts/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx index 5816cc3f..4493096d 100644 --- a/src/layouts/BorisLayout/index.tsx +++ b/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 = () => { 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 = () => { 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 = () => { } diff --git a/src/layouts/NodeLayout/index.tsx b/src/layouts/NodeLayout/index.tsx index 31426a76..8f95167c 100644 --- a/src/layouts/NodeLayout/index.tsx +++ b/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 = 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 = 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 ( -
- {head} + return ( +
+ {head} - - - {block} + + + {block} - + - + -
- - +
+ + - + - } /> -
- ); - } -); + } /> +
+ ); +}); export { NodeLayout }; diff --git a/src/redux/node/api.ts b/src/redux/node/api.ts index 3add6bf7..d4b44350 100644 --- a/src/redux/node/api.ts +++ b/src/redux/node/api.ts @@ -93,8 +93,7 @@ export const apiGetNodeComments = ({ .get(API.NODE.COMMENT(id), { params: { take, skip } }) .then(cleanResult); -export const apiGetNodeRelated = ({ id }: ApiGetNodeRelatedRequest) => - api.get(API.NODE.RELATED(id)).then(cleanResult); +export const apiGetNodeRelated = url => api.get(url).then(cleanResult); export const apiPostNodeTags = ({ id, tags }: ApiPostNodeTagsRequest) => api diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts index 755b382e..d5d60a8c 100644 --- a/src/redux/node/sagas.ts +++ b/src/redux/node/sagas.ts @@ -165,7 +165,7 @@ function* onNodeLoad({ id }: ReturnType) { Unwrap ] = yield all([ call(apiGetNodeComments, { id, take: COMMENTS_DISPLAY, skip: 0 }), - call(apiGetNodeRelated, { id }), + call(apiGetNodeRelated, id), ]); yield put( diff --git a/src/utils/hooks/node/useNodeFetcher.ts b/src/utils/hooks/node/useNode.ts similarity index 84% rename from src/utils/hooks/node/useNodeFetcher.ts rename to src/utils/hooks/node/useNode.ts index 5c727829..a1c4b28f 100644 --- a/src/utils/hooks/node/useNodeFetcher.ts +++ b/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; diff --git a/src/utils/hooks/node/useNodeRelated.ts b/src/utils/hooks/node/useNodeRelated.ts new file mode 100644 index 00000000..492ab80e --- /dev/null +++ b/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 }; +};