Merge branch 'refactor/mobx-store' of github.com:makeplane/plane into refactor/mobx-store

web/contexts/app-root.context.tsx

@@ -1,4 +1,4 @@
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 // mobx store
 import { AppRootStore, IAppRootStore } from "store/application";
 
@@ -17,3 +17,9 @@ export const AppRootStoreProvider = ({ children }: any) => {
   const store: IAppRootStore = initializeStore();
   return <AppRootStoreContext.Provider value={store}>{children}</AppRootStoreContext.Provider>;
 };
+
+export const useAppRootStore = () => {
+  const context = useContext(AppRootStoreContext);
+  if (context === undefined) throw new Error("useMobxStore must be used within MobxStoreProvider");
+  return context;
+};

web/contexts/app-root/index.ts

@@ -1,2 +0,0 @@
-export * from "./app-root-provider";
-export * from "./use-app-root";

web/contexts/app-root/use-app-root.tsx

@@ -1,8 +0,0 @@
-import { useContext } from "react";
-import { AppRootStoreContext } from "./app-root-provider";
-
-export const useAppRoot = () => {
-  const context = useContext(AppRootStoreContext);
-  if (context === undefined) throw new Error("useAppRoot must be used within AppRootStoreContext");
-  return context;
-};

web/contexts/page.context.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+// mobx store
+import { PageStore } from "store/page.store";
+import { AppRootStore } from "store/application";
+import { useAppRootStore } from "./app-root.context";
+
+export const PageContext = createContext<PageStore | undefined>(undefined);
+
+let pageStore: PageStore | undefined;
+
+export const PageStoreProvider = ({ children }: any) => {
+  const appRootStore = useAppRootStore();
+  pageStore = pageStore ?? new PageStore(appRootStore);
+  return <PageContext.Provider value={pageStore}>{children}</PageContext.Provider>;
+};
+
+export const usePage = () => {
+  const context = useContext(PageContext);
+  if (context === undefined) throw new Error("usePage must be used within AppRootStoreContext");
+  return context;
+};

web/contexts/page.context/index.ts

@@ -1,2 +0,0 @@
-export * from "./page-provider";
-export * from "./use-page";

web/contexts/page.context/page-provider.tsx

@@ -1,20 +0,0 @@
-import { createContext } from "react";
-// mobx store
-import { PageStore } from "store/page.store";
-import { AppRootStore } from "store/application";
-
-let pageStore: PageStore = new PageStore(new AppRootStore());
-
-export const PageContext = createContext<PageStore>(pageStore);
-
-const initializeStore = () => {
-  const _pageStore: PageStore = pageStore ?? new PageStore(pageStore);
-  if (typeof window === "undefined") return _pageStore;
-  if (!pageStore) pageStore = _pageStore;
-  return _pageStore;
-};
-
-export const AppRootStoreProvider = ({ children }: any) => {
-  const store: PageStore = initializeStore();
-  return <PageContext.Provider value={store}>{children}</PageContext.Provider>;
-};

web/contexts/page.context/use-page.tsx

@@ -1,8 +0,0 @@
-import { useContext } from "react";
-import { PageContext } from "./page-provider";
-
-export const usePage = () => {
-  const context = useContext(PageContext);
-  if (context === undefined) throw new Error("useAppRoot must be used within AppRootStoreContext");
-  return context;
-};

web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -17,6 +17,7 @@ import { PagesHeader } from "components/headers";
 import { NextPageWithLayout } from "types/app";
 // constants
 import { PAGE_TABS_LIST } from "constants/page";
+import { PageStoreProvider } from "contexts/page.context";
 
 const AllPagesList = dynamic<any>(() => import("components/pages").then((a) => a.AllPagesList), {
   ssr: false,
@@ -82,6 +83,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
   };
 
   return (
+    <PageStoreProvider>
       <>
         {workspaceSlug && projectId && (
           <CreateUpdatePageModal
@@ -157,6 +159,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
           </Tab.Group>
         </div>
       </>
+    </PageStoreProvider>
   );
 });