diff --git a/src/containers/flow/FlowStamp/index.tsx b/src/containers/flow/FlowStamp/index.tsx index d0e28692..38f8b69d 100644 --- a/src/containers/flow/FlowStamp/index.tsx +++ b/src/containers/flow/FlowStamp/index.tsx @@ -1,6 +1,5 @@ import React, { FC, FormEvent, useCallback, useMemo } from 'react'; - import classNames from 'classnames'; import { Superpower } from '~/components/boris/Superpower'; @@ -12,7 +11,7 @@ import { InputText } from '~/components/input/InputText'; import { Toggle } from '~/components/input/Toggle'; import { experimentalFeatures } from '~/constants/features'; import styles from '~/containers/flow/FlowStamp/styles.module.scss'; -import { useFlowContext } from '~/utils/context/FlowContextProvider'; +import { useFlowContext } from '~/utils/providers/FlowProvider'; import { useSearchContext } from '~/utils/providers/SearchProvider'; interface IProps { diff --git a/src/hooks/flow/useFlow.ts b/src/hooks/flow/useFlow.ts index 271aaf98..cf2d7075 100644 --- a/src/hooks/flow/useFlow.ts +++ b/src/hooks/flow/useFlow.ts @@ -5,6 +5,7 @@ import { useFlowLoader } from '~/hooks/flow/useFlowLoader'; import { useFlowSetCellView } from '~/hooks/flow/useFlowSetCellView'; import { useGetLabStats } from '~/hooks/lab/useGetLabStats'; import { useFlowStore } from '~/store/flow/useFlowStore'; +import { GetNodeDiffResult } from '~/types/node'; export const useFlow = () => { const { loadMore, isSyncing } = useFlowLoader(); diff --git a/src/layouts/FlowLayout/index.tsx b/src/layouts/FlowLayout/index.tsx index 9ce2f7f2..3a36033f 100644 --- a/src/layouts/FlowLayout/index.tsx +++ b/src/layouts/FlowLayout/index.tsx @@ -8,16 +8,13 @@ import { FlowStamp } from '~/containers/flow/FlowStamp'; import { SidebarRouter } from '~/containers/main/SidebarRouter'; import { useUser } from '~/hooks/auth/useUser'; import { useInfiniteLoader } from '~/hooks/dom/useInfiniteLoader'; -import { useFlowContext } from '~/utils/context/FlowContextProvider'; +import { useFlowContext } from '~/utils/providers/FlowProvider'; import styles from './styles.module.scss'; -interface Props { - isFluid: boolean; - onToggleLayout: () => void; -} +interface Props {} -const FlowLayout: FC = ({ isFluid, onToggleLayout }) => { +const FlowLayout: FC = () => { const { heroes, nodes, onChangeCellView, loadMore, isSyncing } = useFlowContext(); const { user } = useUser(); @@ -31,7 +28,7 @@ const FlowLayout: FC = ({ isFluid, onToggleLayout }) => {
- +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d8ed50cb..bae117ea 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,44 +1,43 @@ import React, { FC } from 'react'; import { observer } from 'mobx-react-lite'; +import { InferGetStaticPropsType } from 'next'; +import { getNodeDiff } from '~/api/node'; import { PageTitle } from '~/components/common/PageTitle'; import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader'; -import { useFlow } from '~/hooks/flow/useFlow'; import { FlowLayout } from '~/layouts/FlowLayout'; -import { FlowContextProvider } from '~/utils/context/FlowContextProvider'; +import { FlowProvider } from '~/utils/providers/FlowProvider'; import { getPageTitle } from '~/utils/ssr/getPageTitle'; -interface Props {} +export const getStaticProps = async () => { + const fallbackData = await getNodeDiff({ + start: new Date().toISOString(), + end: new Date().toISOString(), + with_heroes: true, + with_updated: true, + with_recent: false, + with_valid: false, + }); -const FlowPage: FC = observer(() => { + return { + props: { + fallbackData, + }, + revalidate: 5 * 60, + }; +}; + +type Props = InferGetStaticPropsType; + +const FlowPage: FC = observer(({ fallbackData }) => { useGlobalLoader(); - const { - updates, - nodes, - heroes, - recent, - isFluid, - toggleLayout, - onChangeCellView, - loadMore, - isSyncing, - } = useFlow(); - return ( - + - - + + ); }); diff --git a/src/utils/context/FlowContextProvider.tsx b/src/utils/context/FlowContextProvider.tsx deleted file mode 100644 index 229840ae..00000000 --- a/src/utils/context/FlowContextProvider.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { createContext, FC, useContext } from 'react'; - -import { FlowDisplay, IFlowNode, INode } from '~/types'; - -export interface FlowContextProps { - updates: IFlowNode[]; - recent: IFlowNode[]; - heroes: IFlowNode[]; - nodes: IFlowNode[]; - isSyncing: boolean; - loadMore: () => Promise; - onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void; -} - -export const FlowContext = createContext({ - updates: [], - recent: [], - heroes: [], - nodes: [], - isSyncing: false, - loadMore: async () => {}, - - onChangeCellView: () => {}, -}); - -export const FlowContextProvider: FC = ({ children, ...contextValue }) => { - return {children}; -}; - -export const useFlowContext = () => useContext(FlowContext); diff --git a/src/utils/providers/FlowProvider.tsx b/src/utils/providers/FlowProvider.tsx new file mode 100644 index 00000000..3917a34d --- /dev/null +++ b/src/utils/providers/FlowProvider.tsx @@ -0,0 +1,58 @@ +import React, { createContext, FC, useContext, useMemo } from 'react'; + +import { observer } from 'mobx-react-lite'; +import { uniq } from 'ramda'; + +import { useFlow } from '~/hooks/flow/useFlow'; +import { FlowDisplay, IFlowNode, INode } from '~/types'; +import { GetNodeDiffResult } from '~/types/node'; + +export interface FlowProviderProps { + fallbackData?: GetNodeDiffResult; +} + +export interface FlowContextProps { + updates: IFlowNode[]; + recent: IFlowNode[]; + heroes: IFlowNode[]; + nodes: IFlowNode[]; + isSyncing: boolean; + loadMore: () => Promise; + onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void; +} + +export const FlowContext = createContext({ + updates: [], + recent: [], + heroes: [], + nodes: [], + isSyncing: false, + loadMore: async () => {}, + + onChangeCellView: () => {}, +}); + +export const FlowProvider: FC = observer(({ fallbackData, children }) => { + const flow = useFlow(); + + const value = useMemo(() => { + if (!flow.nodes?.length && fallbackData) { + return { + ...flow, + heroes: fallbackData.heroes || [], + updates: fallbackData.updated || [], + recent: fallbackData.recent || [], + nodes: uniq([...(fallbackData.before || []), ...(fallbackData.after || [])]), + }; + } + + return { + ...flow, + heroes: fallbackData?.heroes?.length ? fallbackData.heroes : flow.heroes, + }; + }, [flow, fallbackData]); + + return {children}; +}); + +export const useFlowContext = () => useContext(FlowContext);