From 96f1529f2bbaf4567a72ec57c18b79245b4c858d Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 22 Nov 2021 16:24:46 +0700 Subject: [PATCH] made lab use provider and context --- src/components/lab/LabHero/index.tsx | 2 +- src/containers/lab/LabGrid/index.tsx | 12 ++++---- src/containers/lab/LabStats/index.tsx | 25 ++++++----------- src/containers/main/MainRouter/index.tsx | 4 +-- src/layouts/LabLayout/index.tsx | 34 ++++------------------- src/pages/lab.tsx | 13 +++++++++ src/utils/context/LabContextProvider.tsx | 34 +++++++++++++++++++++++ src/utils/hooks/lab/useLab.ts | 35 ++++++++++++++++++++++++ src/utils/providers/LabProvider.tsx | 26 ++++++++++++++++++ 9 files changed, 129 insertions(+), 56 deletions(-) create mode 100644 src/pages/lab.tsx create mode 100644 src/utils/context/LabContextProvider.tsx create mode 100644 src/utils/hooks/lab/useLab.ts create mode 100644 src/utils/providers/LabProvider.tsx diff --git a/src/components/lab/LabHero/index.tsx b/src/components/lab/LabHero/index.tsx index be4d28d1..f69cfec2 100644 --- a/src/components/lab/LabHero/index.tsx +++ b/src/components/lab/LabHero/index.tsx @@ -6,7 +6,7 @@ import styles from './styles.module.scss'; import { INode } from '~/redux/types'; import { getPrettyDate } from '~/utils/dom'; import { URLS } from '~/constants/urls'; -import { Link, useHistory } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; interface IProps { node?: Partial; diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx index 4119936a..4bc112c2 100644 --- a/src/containers/lab/LabGrid/index.tsx +++ b/src/containers/lab/LabGrid/index.tsx @@ -4,14 +4,10 @@ import styles from './styles.module.scss'; import { LabNode } from '~/components/lab/LabNode'; import { EMPTY_NODE, NODE_TYPES } from '~/redux/node/constants'; import { values } from 'ramda'; -import { ILabNode } from '~/redux/lab/types'; import { useLabPagination } from '~/utils/hooks/lab/useLabPagination'; +import { useLabContext } from '~/utils/context/LabContextProvider'; -interface IProps { - isLoading: boolean; - nodes: ILabNode[]; - onLoadMore: () => void; -} +interface IProps {} const breakpointCols = { default: 2, @@ -30,7 +26,9 @@ const LoadingNode = () => ( /> ); -const LabGrid: FC = ({ isLoading, nodes, onLoadMore }) => { +const LabGrid: FC = () => { + const { isLoading, nodes, onLoadMore } = useLabContext(); + const columns = useMemo(() => Array.from(document.querySelectorAll(`.${styles.column}`)), []); useLabPagination(isLoading, columns, onLoadMore); diff --git a/src/containers/lab/LabStats/index.tsx b/src/containers/lab/LabStats/index.tsx index b1243a75..43d4c7cf 100644 --- a/src/containers/lab/LabStats/index.tsx +++ b/src/containers/lab/LabStats/index.tsx @@ -2,25 +2,16 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; import { LabBanner } from '~/components/lab/LabBanner'; import { Group } from '~/components/containers/Group'; -import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; -import { - selectLabStatsHeroes, - selectLabStatsLoading, - selectLabStatsTags, - selectLabUpdatesNodes -} from '~/redux/lab/selectors'; import { LabTags } from '~/components/lab/LabTags'; import { LabHeroes } from '~/components/lab/LabHeroes'; import { FlowRecentItem } from '~/components/flow/FlowRecentItem'; import { SubTitle } from '~/components/common/SubTitle'; +import { useLabContext } from '~/utils/context/LabContextProvider'; interface IProps {} const LabStats: FC = () => { - const tags = useShallowSelect(selectLabStatsTags); - const heroes = useShallowSelect(selectLabStatsHeroes); - const isLoading = useShallowSelect(selectLabStatsLoading); - const updates = useShallowSelect(selectLabUpdatesNodes); + const { isLoadingStats, tags, heroes, updates } = useLabContext(); return ( @@ -28,14 +19,14 @@ const LabStats: FC = () => {
- {(!!tags.length || isLoading) && ( - + {(!!tags.length || isLoadingStats) && ( + Тэги )}
- +
@@ -53,14 +44,14 @@ const LabStats: FC = () => { )} - {(!!heroes.length || isLoading) && ( - + {(!!heroes.length || isLoadingStats) && ( + Важные )}
- +
diff --git a/src/containers/main/MainRouter/index.tsx b/src/containers/main/MainRouter/index.tsx index 4efa5f66..09e681e6 100644 --- a/src/containers/main/MainRouter/index.tsx +++ b/src/containers/main/MainRouter/index.tsx @@ -2,13 +2,13 @@ import React, { FC } from 'react'; import { URLS } from '~/constants/urls'; import { ErrorNotFound } from '~/containers/pages/ErrorNotFound'; import { Redirect, Route, Switch, useLocation } from 'react-router'; -import { LabLayout } from '~/layouts/LabLayout'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; import { selectAuthUser } from '~/redux/auth/selectors'; import { ProfileLayout } from '~/layouts/ProfileLayout'; import FlowPage from '~/pages'; import BorisPage from '~/pages/boris'; import NodePage from '~/pages/node/[id]'; +import LabPage from '~/pages/lab'; interface IProps {} @@ -23,7 +23,7 @@ const MainRouter: FC = () => { - {is_user && } + {is_user && } diff --git a/src/layouts/LabLayout/index.tsx b/src/layouts/LabLayout/index.tsx index 933a9f1a..a46af300 100644 --- a/src/layouts/LabLayout/index.tsx +++ b/src/layouts/LabLayout/index.tsx @@ -1,42 +1,18 @@ -import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { FC } from 'react'; import styles from './styles.module.scss'; import { Sticky } from '~/components/containers/Sticky'; import { Container } from '~/containers/main/Container'; import { LabGrid } from '~/containers/lab/LabGrid'; -import { useDispatch } from 'react-redux'; -import { labGetList, labGetMore, labGetStats } from '~/redux/lab/actions'; import { Group } from '~/components/containers/Group'; import { LabHead } from '~/components/lab/LabHead'; import { LabStats } from '~/containers/lab/LabStats'; -import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; -import { selectLabList } from '~/redux/lab/selectors'; import { SidebarRouter } from '~/containers/main/SidebarRouter'; -import { Superpower } from '~/components/boris/Superpower'; -import { Toggle } from '~/components/input/Toggle'; -import { usePersistedState } from '~/utils/hooks/usePersistedState'; -import classNames from 'classnames'; -import { useLabPagination } from '~/utils/hooks/lab/useLabPagination'; +import { useLabContext } from '~/utils/context/LabContextProvider'; interface IProps {} const LabLayout: FC = () => { - const { is_loading, nodes, count } = useShallowSelect(selectLabList); - const dispatch = useDispatch(); - - useEffect(() => { - dispatch(labGetList()); - dispatch(labGetStats()); - }, [dispatch]); - - const onLoadMore = useCallback(() => { - if (nodes.length >= count) { - return; - } - - dispatch(labGetMore()); - }, [nodes, count, dispatch]); - - const isInitialLoading = is_loading && !nodes.length; + const { isLoading } = useLabContext(); return ( @@ -44,10 +20,10 @@ const LabLayout: FC = () => {
- +
- +
diff --git a/src/pages/lab.tsx b/src/pages/lab.tsx new file mode 100644 index 00000000..1ccd8e71 --- /dev/null +++ b/src/pages/lab.tsx @@ -0,0 +1,13 @@ +import React, { VFC } from 'react'; +import { LabLayout } from '~/layouts/LabLayout'; +import { LabProvider } from '~/utils/providers/LabProvider'; + +interface LabPageProps {} + +const LabPage: VFC = () => ( + + + +); + +export default LabPage; diff --git a/src/utils/context/LabContextProvider.tsx b/src/utils/context/LabContextProvider.tsx new file mode 100644 index 00000000..0c347f5d --- /dev/null +++ b/src/utils/context/LabContextProvider.tsx @@ -0,0 +1,34 @@ +import { ILabNode } from '~/redux/lab/types'; +import React, { createContext, FC, useContext } from 'react'; +import { INode, ITag } from '~/redux/types'; + +export interface LabContextProps { + isLoading: boolean; + nodes: ILabNode[]; + count: number; + onLoadMore: () => void; + + tags: ITag[]; + heroes: Partial[]; + isLoadingStats: boolean; + updates: Partial[]; +} + +const defaultValues: LabContextProps = { + isLoading: false, + nodes: [], + count: 0, + onLoadMore: () => {}, + tags: [], + heroes: [], + isLoadingStats: false, + updates: [], +}; + +const LabContext = createContext(defaultValues); + +export const LabContextProvider: FC = ({ children, ...rest }) => ( + {children} +); + +export const useLabContext = () => useContext(LabContext); diff --git a/src/utils/hooks/lab/useLab.ts b/src/utils/hooks/lab/useLab.ts new file mode 100644 index 00000000..aefeb123 --- /dev/null +++ b/src/utils/hooks/lab/useLab.ts @@ -0,0 +1,35 @@ +import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; +import { + selectLabList, + selectLabStatsHeroes, + selectLabStatsLoading, + selectLabStatsTags, + selectLabUpdatesNodes, +} from '~/redux/lab/selectors'; +import { useDispatch } from 'react-redux'; +import { useCallback, useEffect } from 'react'; +import { labGetList, labGetMore, labGetStats } from '~/redux/lab/actions'; + +export const useLab = () => { + const { is_loading: isLoading, nodes, count } = useShallowSelect(selectLabList); + const dispatch = useDispatch(); + const tags = useShallowSelect(selectLabStatsTags); + const heroes = useShallowSelect(selectLabStatsHeroes); + const isLoadingStats = useShallowSelect(selectLabStatsLoading); + const updates = useShallowSelect(selectLabUpdatesNodes); + + useEffect(() => { + dispatch(labGetList()); + dispatch(labGetStats()); + }, [dispatch]); + + const onLoadMore = useCallback(() => { + if (nodes.length >= count) { + return; + } + + dispatch(labGetMore()); + }, [nodes, count, dispatch]); + + return { isLoading, nodes, count, onLoadMore, tags, heroes, isLoadingStats, updates }; +}; diff --git a/src/utils/providers/LabProvider.tsx b/src/utils/providers/LabProvider.tsx new file mode 100644 index 00000000..d33accc6 --- /dev/null +++ b/src/utils/providers/LabProvider.tsx @@ -0,0 +1,26 @@ +import React, { FC } from 'react'; +import { LabContextProvider } from '~/utils/context/LabContextProvider'; +import { useLab } from '~/utils/hooks/lab/useLab'; + +interface LabProviderProps {} + +const LabProvider: FC = ({ children }) => { + const { isLoading, nodes, count, onLoadMore, tags, heroes, isLoadingStats, updates } = useLab(); + + return ( + + {children} + + ); +}; + +export { LabProvider };