added flow context

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 styles from '~/containers/flow/FlowStamp/styles.module.scss';
-import { FlowSearchResults } from '../FlowSearchResults';
+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<IProps> = ({
+const FlowStamp: FC<IProps> = ({ isFluid, onToggleLayout }) => {
-  searchText,
+  const {
-  searchIsLoading,
+    searchText,
-  searchTotal,
+    searchTotal,
-  searchResults,
+    searchIsLoading,
-  onSearchChange,
+    searchResults,
-  onSearchLoadMore,
+    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<IProps> = ({
           </div>
 
           <div className={styles.items}>
-            <FlowRecent updated={updated} recent={recent} />
+            <FlowRecent updated={updates} recent={recent} />
           </div>
         </div>
       )}

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;
   }
-}
+}

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<Props> = ({
+const FlowLayout: FC<Props> = ({ isFluid, onToggleLayout }) => {
-  updates,
+  const { heroes, nodes, onChangeCellView } = useFlowContext();
-  heroes,
+  const user = useUser();
-  recent,
-  nodes,
-  user,
-  isFluid,
-  onToggleLayout,
-  onChangeCellView,
 
-  searchText,
-  searchTotal,
-  searchIsLoading,
-  searchResults,
-  onSearchChange,
-  onSearchLoadMore,
-}) => {
   return (
     <div className={classNames(styles.container)}>
       <div className={styles.grid}>
@@ -51,18 +25,7 @@ const FlowLayout: FC<Props> = ({
         </div>
 
         <div className={styles.stamp}>
-          <FlowStamp
+          <FlowStamp isFluid={isFluid} onToggleLayout={onToggleLayout} />
-            isFluid={isFluid}
-            recent={recent}
-            updated={updates}
-            searchText={searchText}
-            searchIsLoading={searchIsLoading}
-            searchTotal={searchTotal}
-            searchResults={searchResults}
-            onSearchChange={onSearchChange}
-            onSearchLoadMore={onSearchLoadMore}
-            onToggleLayout={onToggleLayout}
-          />
         </div>
 
         <FlowGrid nodes={nodes} user={user} onChangeCellView={onChangeCellView} />

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 { FlowContextProvider } from '~/utils/context/FlowContextProvider';
-import { useUser } from '~/hooks/user/userUser';
+import { SearchContextProvider } from '~/utils/context/SearchContextProvider';
 
 interface Props {}
 
 const FlowPage: FC<Props> = () => {
   const { updates, nodes, heroes, recent, isFluid, toggleLayout, onChangeCellView } = useFlow();
-  const user = useUser();
-  const { search, onSearchLoadMore, onSearchChange } = useSearch();
 
   return (
-    <FlowLayout
+    <FlowContextProvider
       updates={updates}
       recent={recent}
       heroes={heroes}
       nodes={nodes}
-      user={user}
-      isFluid={isFluid}
-      onToggleLayout={toggleLayout}
       onChangeCellView={onChangeCellView}
-      searchResults={search.results}
+    >
-      searchText={search.text}
+      <SearchContextProvider>
-      searchTotal={search.total}
+        <FlowLayout isFluid={isFluid} onToggleLayout={toggleLayout} />
-      searchIsLoading={search.is_loading}
+      </SearchContextProvider>
-      onSearchLoadMore={onSearchLoadMore}
+    </FlowContextProvider>
-      onSearchChange={onSearchChange}
-    />
   );
 };
 

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<FlowContextProps>({
+  updates: [],
+  recent: [],
+  heroes: [],
+  nodes: [],
+
+  onChangeCellView: () => {},
+});
+
+export const FlowContextProvider: FC<FlowContextProps> = ({ children, ...contextValue }) => {
+  return <FlowContext.Provider value={contextValue}>{children}</FlowContext.Provider>;
+};
+
+export const useFlowContext = () => useContext(FlowContext);

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<SearchContextProps>({
+  searchText: '',
+  searchTotal: 0,
+  searchIsLoading: false,
+  searchResults: [],
+  onSearchChange: () => {},
+  onSearchLoadMore: () => {},
+});
+
+export const SearchContextProvider: FC = ({ children }) => {
+  const {
+    search: { text, results, is_loading, total },
+    onSearchLoadMore,
+    onSearchChange,
+  } = useSearch();
+
+  return (
+    <SearchContext.Provider
+      value={{
+        searchText: text,
+        searchResults: results,
+        searchIsLoading: is_loading,
+        searchTotal: total,
+        onSearchChange,
+        onSearchLoadMore,
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+export const useSearchContext = () => useContext(SearchContext);