import { createContext, FC, PropsWithChildren, useContext } from "react"; import { useLocalObservable } from "mobx-react-lite"; import setSiteStore from "src/site/setSiteStore"; import setNoteStore from "src/note/setNoteStore"; import setAvatarStore from "src/avatar/setAvatarStore"; import setEtcStore from "src/etc/setEtcStore"; import setHOFStore from "src/hof/setHOFStore"; type QwilightStore = { noteStore: ReturnType<typeof setNoteStore>; siteStore: ReturnType<typeof setSiteStore>; avatarStore: ReturnType<typeof setAvatarStore>; etcStore: ReturnType<typeof setEtcStore>; hofStore: ReturnType<typeof setHOFStore>; }; const qwilightStore = createContext<QwilightStore>({} as QwilightStore); const { Provider } = qwilightStore; export const Stores: FC<PropsWithChildren> = ({ children }) => ( <Provider value={{ noteStore: useLocalObservable(setNoteStore), siteStore: useLocalObservable(setSiteStore), avatarStore: useLocalObservable(setAvatarStore), etcStore: useLocalObservable(setEtcStore), hofStore: useLocalObservable(setHOFStore), }} > {children} </Provider> ); export const useSiteStore = () => useContext(qwilightStore).siteStore; export const useNoteStore = () => useContext(qwilightStore).noteStore; export const useAvatarStore = () => useContext(qwilightStore).avatarStore; export const useEtcStore = () => useContext(qwilightStore).etcStore; export const useHOFStore = () => useContext(qwilightStore).hofStore;