diff --git a/Components/Layout/Auth.jsx b/Components/Layout/Auth.jsx index 0a3bb33..f2deb0e 100644 --- a/Components/Layout/Auth.jsx +++ b/Components/Layout/Auth.jsx @@ -1,5 +1,5 @@ import { observer } from 'mobx-react-lite'; -import { useStore } from 'stores/Provider'; +import { useStore } from 'stores/hooks'; import styled from 'styled-components'; import { Flex } from 'UIKit/grid'; import { min } from 'UIKit/mq'; diff --git a/pages/_app.tsx b/pages/_app.tsx index 23cd5d6..880fcc0 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,10 +4,10 @@ import { useApollo } from 'apollo/hooks'; import Layout from 'Components/Layout'; import type { AppProps } from 'next/app'; import Head from 'next/head'; +import { StoreProvider } from 'stores/Provider'; import { ThemeProvider } from 'styled-components'; import { GlobalStyle } from 'UIKit/colors'; import theme from 'UIKit/theme'; -import { StoreProvider } from '../stores/Provider'; import '../styles/globals.css'; if (process.env.NODE_ENV === 'development') { diff --git a/stores/Provider.jsx b/stores/Provider.jsx index 3da37a5..e4f65e0 100644 --- a/stores/Provider.jsx +++ b/stores/Provider.jsx @@ -1,32 +1,4 @@ -import { createContext, useContext } from 'react'; -import { RootStore } from './root'; - -/** @type{RootStore} */ -let store; -const StoreContext = createContext(store); - -export function useStore() { - const context = useContext(StoreContext); - if (context === undefined) { - throw new Error('useStore must be used within StoreProvider'); - } - - return context; -} - -function initializeStore(initialData) { - const _store = store ?? new RootStore(); - - if (initialData) { - const { user } = initialData; - _store.$user.hydrate(user); - } - - if (typeof window === 'undefined') return _store; - if (!store) store = _store; - - return _store; -} +import { initializeStore, StoreContext } from '.'; export function StoreProvider({ children, ...initialData }) { const store = initializeStore(initialData); diff --git a/stores/hooks.js b/stores/hooks.js new file mode 100644 index 0000000..f197550 --- /dev/null +++ b/stores/hooks.js @@ -0,0 +1,11 @@ +import { useContext } from 'react'; +import { StoreContext } from '.'; + +export function useStore() { + const context = useContext(StoreContext); + if (context === undefined) { + throw new Error('useStore must be used within StoreProvider'); + } + + return context; +} diff --git a/stores/index.js b/stores/index.js new file mode 100644 index 0000000..e143d9d --- /dev/null +++ b/stores/index.js @@ -0,0 +1,20 @@ +import { createContext } from 'react'; +import { RootStore } from './root'; + +/** @type{RootStore} */ +let store; +export const StoreContext = createContext(store); + +export function initializeStore(initialData) { + const _store = store ?? new RootStore(); + + if (initialData) { + const { user } = initialData; + _store.$user.hydrate(user); + } + + if (typeof window === 'undefined') return _store; + if (!store) store = _store; + + return _store; +}