import { createContext, ReactNode, 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 setWowStore from "src/wow/setWowStore"; type QwilightStore = { noteStore: ReturnType<typeof setNoteStore>; siteStore: ReturnType<typeof setSiteStore>; avatarStore: ReturnType<typeof setAvatarStore>; etcStore: ReturnType<typeof setEtcStore>; wowStore: ReturnType<typeof setWowStore>; }; const qwilightStore = createContext<QwilightStore>({} as QwilightStore); const { Provider } = qwilightStore; export const Stores = ({ children }: { children: ReactNode }) => ( <Provider value={{ noteStore: useLocalObservable(setNoteStore), siteStore: useLocalObservable(setSiteStore), avatarStore: useLocalObservable(setAvatarStore), etcStore: useLocalObservable(setEtcStore), wowStore: useLocalObservable(setWowStore), }} > {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 useWowStore = () => useContext(qwilightStore).wowStore;