From 5f3accee48f21f266fb41ab5445ee70f6a7cff3b Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 4 Jan 2022 13:44:51 +0700 Subject: [PATCH] added flow context --- .../flow/FlowStamp/index.tsx | 43 +++++++--------- .../flow/FlowStamp/styles.module.scss | 4 +- src/layouts/FlowLayout/index.tsx | 51 +++---------------- src/pages/index.tsx | 23 +++------ src/utils/context/FlowContextProvider.tsx | 25 +++++++++ src/utils/context/SearchContextProvider.tsx | 46 +++++++++++++++++ 6 files changed, 105 insertions(+), 87 deletions(-) rename src/{components => containers}/flow/FlowStamp/index.tsx (81%) rename src/{components => containers}/flow/FlowStamp/styles.module.scss (97%) create mode 100644 src/utils/context/FlowContextProvider.tsx create mode 100644 src/utils/context/SearchContextProvider.tsx diff --git a/src/components/flow/FlowStamp/index.tsx b/src/containers/flow/FlowStamp/index.tsx similarity index 81% rename from src/components/flow/FlowStamp/index.tsx rename to src/containers/flow/FlowStamp/index.tsx index 997d8262..2ef863ae 100644 --- a/src/components/flow/FlowStamp/index.tsx +++ b/src/containers/flow/FlowStamp/index.tsx @@ -1,44 +1,35 @@ import React, { FC, FormEvent, useCallback, useMemo } from 'react'; import { InputText } from '~/components/input/InputText'; -import { FlowRecent } from '../FlowRecent'; +import { FlowRecent } from '~/components/flow/FlowRecent'; -import styles from './styles.module.scss'; -import { FlowSearchResults } from '../FlowSearchResults'; +import styles from '~/containers/flow/FlowStamp/styles.module.scss'; +import { FlowSearchResults } from '~/components/flow/FlowSearchResults'; import { Icon } from '~/components/input/Icon'; import { Group } from '~/components/containers/Group'; import { Toggle } from '~/components/input/Toggle'; import classNames from 'classnames'; import { Superpower } from '~/components/boris/Superpower'; import { experimentalFeatures } from '~/constants/features'; -import { IFlowNode, INode } from '~/redux/types'; +import { useSearchContext } from '~/utils/context/SearchContextProvider'; +import { useFlowContext } from '~/utils/context/FlowContextProvider'; interface IProps { - searchText: string; - searchTotal: number; - searchIsLoading: boolean; - searchResults: INode[]; - onSearchChange: (text: string) => void; - onSearchLoadMore: () => void; - - recent: IFlowNode[]; - updated: IFlowNode[]; isFluid: boolean; onToggleLayout: () => void; } -const FlowStamp: FC = ({ - searchText, - searchIsLoading, - searchTotal, - searchResults, - onSearchChange, - onSearchLoadMore, +const FlowStamp: FC = ({ isFluid, onToggleLayout }) => { + const { + searchText, + searchTotal, + searchIsLoading, + searchResults, + onSearchChange, + onSearchLoadMore, + } = useSearchContext(); + + const { recent, updates } = useFlowContext(); - recent, - updated, - isFluid, - onToggleLayout, -}) => { const onSearchSubmit = useCallback((event: FormEvent) => { event.preventDefault(); }, []); @@ -102,7 +93,7 @@ const FlowStamp: FC = ({
- +
)} diff --git a/src/components/flow/FlowStamp/styles.module.scss b/src/containers/flow/FlowStamp/styles.module.scss similarity index 97% rename from src/components/flow/FlowStamp/styles.module.scss rename to src/containers/flow/FlowStamp/styles.module.scss index ece6125f..1d825b4a 100644 --- a/src/components/flow/FlowStamp/styles.module.scss +++ b/src/containers/flow/FlowStamp/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import "../../../styles/variables"; .wrap { display: flex; @@ -126,4 +126,4 @@ @include tablet { margin-top: $gap; } -} \ No newline at end of file +} diff --git a/src/layouts/FlowLayout/index.tsx b/src/layouts/FlowLayout/index.tsx index a6756640..d53fa994 100644 --- a/src/layouts/FlowLayout/index.tsx +++ b/src/layouts/FlowLayout/index.tsx @@ -1,48 +1,22 @@ import React, { FC } from 'react'; import { FlowGrid } from '~/components/flow/FlowGrid'; import styles from './styles.module.scss'; -import { FlowStamp } from '~/components/flow/FlowStamp'; +import { FlowStamp } from '~/containers/flow/FlowStamp'; import { SidebarRouter } from '~/containers/main/SidebarRouter'; -import { FlowDisplay, IFlowNode, INode } from '~/redux/types'; import classNames from 'classnames'; import { FlowSwiperHero } from '~/components/flow/FlowSwiperHero'; -import { IUser } from '~/redux/auth/types'; +import { useFlowContext } from '~/utils/context/FlowContextProvider'; +import { useUser } from '~/hooks/user/userUser'; interface Props { - updates: IFlowNode[]; - recent: IFlowNode[]; - heroes: IFlowNode[]; - nodes: IFlowNode[]; - user: IUser; isFluid: boolean; onToggleLayout: () => void; - onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void; - - searchText: string; - searchTotal: number; - searchIsLoading: boolean; - searchResults: INode[]; - onSearchChange: (text: string) => void; - onSearchLoadMore: () => void; } -const FlowLayout: FC = ({ - updates, - heroes, - recent, - nodes, - user, - isFluid, - onToggleLayout, - onChangeCellView, +const FlowLayout: FC = ({ isFluid, onToggleLayout }) => { + const { heroes, nodes, onChangeCellView } = useFlowContext(); + const user = useUser(); - searchText, - searchTotal, - searchIsLoading, - searchResults, - onSearchChange, - onSearchLoadMore, -}) => { return (
@@ -51,18 +25,7 @@ const FlowLayout: FC = ({
- +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index eac397d7..57820f4a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,33 +1,26 @@ import React, { FC } from 'react'; import { FlowLayout } from '~/layouts/FlowLayout'; import { useFlow } from '~/hooks/flow/useFlow'; -import { useSearch } from '~/hooks/search/useSearch'; -import { useUser } from '~/hooks/user/userUser'; +import { FlowContextProvider } from '~/utils/context/FlowContextProvider'; +import { SearchContextProvider } from '~/utils/context/SearchContextProvider'; interface Props {} const FlowPage: FC = () => { const { updates, nodes, heroes, recent, isFluid, toggleLayout, onChangeCellView } = useFlow(); - const user = useUser(); - const { search, onSearchLoadMore, onSearchChange } = useSearch(); return ( - + > + + + + ); }; diff --git a/src/utils/context/FlowContextProvider.tsx b/src/utils/context/FlowContextProvider.tsx new file mode 100644 index 00000000..23fa6d6f --- /dev/null +++ b/src/utils/context/FlowContextProvider.tsx @@ -0,0 +1,25 @@ +import React, { createContext, FC, useContext } from 'react'; +import { FlowDisplay, IFlowNode, INode } from '~/redux/types'; + +export interface FlowContextProps { + updates: IFlowNode[]; + recent: IFlowNode[]; + heroes: IFlowNode[]; + nodes: IFlowNode[]; + onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void; +} + +export const FlowContext = createContext({ + updates: [], + recent: [], + heroes: [], + nodes: [], + + onChangeCellView: () => {}, +}); + +export const FlowContextProvider: FC = ({ children, ...contextValue }) => { + return {children}; +}; + +export const useFlowContext = () => useContext(FlowContext); diff --git a/src/utils/context/SearchContextProvider.tsx b/src/utils/context/SearchContextProvider.tsx new file mode 100644 index 00000000..b6230ca8 --- /dev/null +++ b/src/utils/context/SearchContextProvider.tsx @@ -0,0 +1,46 @@ +import React, { createContext, FC, useContext } from 'react'; +import { INode } from '~/redux/types'; +import { useSearch } from '~/hooks/search/useSearch'; + +export interface SearchContextProps { + searchText: string; + searchTotal: number; + searchIsLoading: boolean; + searchResults: INode[]; + onSearchChange: (text: string) => void; + onSearchLoadMore: () => void; +} + +export const SearchContext = createContext({ + searchText: '', + searchTotal: 0, + searchIsLoading: false, + searchResults: [], + onSearchChange: () => {}, + onSearchLoadMore: () => {}, +}); + +export const SearchContextProvider: FC = ({ children }) => { + const { + search: { text, results, is_loading, total }, + onSearchLoadMore, + onSearchChange, + } = useSearch(); + + return ( + + {children} + + ); +}; + +export const useSearchContext = () => useContext(SearchContext);