fix: adding new contexts and providers

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

@@ -0,0 +1,19 @@
+import { createContext } from "react";
+// mobx store
+import { AppRootStore, IAppRootStore } from "store/application";
+
+let appRootStore: IAppRootStore = new AppRootStore();
+
+export const AppRootStoreContext = createContext<IAppRootStore>(appRootStore);
+
+const initializeStore = () => {
+  const _appRootStore: IAppRootStore = appRootStore ?? new AppRootStore();
+  if (typeof window === "undefined") return _appRootStore;
+  if (!appRootStore) appRootStore = _appRootStore;
+  return _appRootStore;
+};
+
+export const AppRootStoreProvider = ({ children }: any) => {
+  const store: IAppRootStore = initializeStore();
+  return <AppRootStoreContext.Provider value={store}>{children}</AppRootStoreContext.Provider>;
+};

web/contexts/app-root/index.ts

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

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

@@ -0,0 +1,8 @@
+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/index.ts

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

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,8 @@
+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/hooks/use-page.tsx

@@ -0,0 +1,8 @@
+import { useMobxStore } from "lib/mobx/store-provider";
+
+const usePage = () => {
+  const { page } = useMobxStore();
+  return { ...page };
+};
+
+export default usePage;

web/lib/mobx/store-provider.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { createContext, useContext } from "react";
 // mobx store
 import { RootStore } from "store_legacy/root";

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

@@ -82,7 +82,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
         description_html: newDescription,
       })
       .then(() => {
-        mutatePageDetails((prevData) => ({ ...prevData, description_html: newDescription }) as IPage, false);
+        mutatePageDetails((prevData) => ({ ...prevData, description_html: newDescription } as IPage), false);
       });
   };
 
@@ -162,15 +162,12 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   }, [pageDetails?.description_html]); // TODO: Verify the exhaustive-deps warning
 
   function createObjectFromArray(keys: string[], options: any): any {
-    return keys.reduce(
+    return keys.reduce((obj, key) => {
-      (obj, key) => {
       if (options[key] !== undefined) {
         obj[key] = options[key];
       }
       return obj;
-      },
+    }, {} as { [key: string]: any });
-      {} as { [key: string]: any }
-    );
   }
 
   const mutatePageDetailsHelper = (

web/store/application/app-config.store.ts

@@ -1,6 +1,5 @@
 import { observable, action, makeObservable, runInAction } from "mobx";
 // types
-import { RootStore } from "../root.store";
 import { IAppConfig } from "types/app";
 // services
 import { AppConfigService } from "services/app_config.service";
@@ -14,13 +13,10 @@ export interface IAppConfigStore {
 export class AppConfigStore implements IAppConfigStore {
   // observables
   envConfig: IAppConfig | null = null;
-
-  // root store
-  rootStore;
   // service
   appConfigService;
 
-  constructor(_rootStore: RootStore) {
+  constructor() {
     makeObservable(this, {
       // observables
       envConfig: observable.ref,
@@ -28,9 +24,8 @@ export class AppConfigStore implements IAppConfigStore {
       fetchAppConfig: action,
     });
     this.appConfigService = new AppConfigService();
-
-    this.rootStore = _rootStore;
   }
+
   fetchAppConfig = async () => {
     try {
       const config = await this.appConfigService.envConfig();

web/store/application/command-palette.store.ts

@@ -1,6 +1,4 @@
 import { observable, action, makeObservable, computed } from "mobx";
-// types
-import { RootStore } from "../root.store";
 // services
 import { ProjectService } from "services/project";
 import { PageService } from "services/page.service";
@@ -58,15 +56,13 @@ export class CommandPaletteStore implements ICommandPaletteStore {
   isCreateIssueModalOpen: boolean = false;
   isDeleteIssueModalOpen: boolean = false;
   isBulkDeleteIssueModalOpen: boolean = false;
-  // root store
-  rootStore;
   // service
   projectService;
   pageService;
 
   createIssueStoreType: EProjectStore = EProjectStore.PROJECT;
 
-  constructor(_rootStore: RootStore) {
+  constructor() {
     makeObservable(this, {
       // observable
       isCommandPaletteOpen: observable.ref,
@@ -95,7 +91,6 @@ export class CommandPaletteStore implements ICommandPaletteStore {
       toggleBulkDeleteIssueModal: action,
     });
 
-    this.rootStore = _rootStore;
     this.projectService = new ProjectService();
     this.pageService = new PageService();
   }

web/store/application/index.ts

@@ -1,7 +1,6 @@
-import { RootStore } from "../root.store";
 import { AppConfigStore, IAppConfigStore } from "./app-config.store";
 import { CommandPaletteStore, ICommandPaletteStore } from "./command-palette.store";
-import { EventTrackerStore, IEventTrackerStore } from "./event-tracker.store";
+// import { EventTrackerStore, IEventTrackerStore } from "./event-tracker.store";
 import { InstanceStore, IInstanceStore } from "./instance.store";
 import { RouterStore, IRouterStore } from "./router.store";
 import { ThemeStore, IThemeStore } from "./theme.store";
@@ -9,7 +8,7 @@ import { ThemeStore, IThemeStore } from "./theme.store";
 export interface IAppRootStore {
   config: IAppConfigStore;
   commandPalette: ICommandPaletteStore;
-  eventTracker: IEventTrackerStore;
+  // eventTracker: IEventTrackerStore;
   instance: IInstanceStore;
   theme: IThemeStore;
   router: IRouterStore;
@@ -18,17 +17,17 @@ export interface IAppRootStore {
 export class AppRootStore implements IAppRootStore {
   config: IAppConfigStore;
   commandPalette: ICommandPaletteStore;
-  eventTracker: IEventTrackerStore;
+  // eventTracker: IEventTrackerStore;
   instance: IInstanceStore;
   theme: IThemeStore;
   router: IRouterStore;
 
-  constructor(rootStore: RootStore) {
+  constructor() {
-    this.config = new AppConfigStore(rootStore);
-    this.commandPalette = new CommandPaletteStore(rootStore);
-    this.eventTracker = new EventTrackerStore(rootStore);
-    this.instance = new InstanceStore(rootStore);
-    this.theme = new ThemeStore(rootStore);
     this.router = new RouterStore();
+    this.config = new AppConfigStore();
+    this.commandPalette = new CommandPaletteStore();
+    // this.eventTracker = new EventTrackerStore(this.router);
+    this.instance = new InstanceStore();
+    this.theme = new ThemeStore();
   }
 }

web/store/application/instance.store.ts

@@ -1,6 +1,4 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
-// store
-import { RootStore } from "../root.store";
 // types
 import { IInstance, IInstanceConfiguration, IFormattedInstanceConfiguration, IInstanceAdmin } from "types/instance";
 // services
@@ -31,9 +29,8 @@ export class InstanceStore implements IInstanceStore {
   configurations: IInstanceConfiguration[] | null = null;
   // service
   instanceService;
-  rootStore;
 
-  constructor(_rootStore: RootStore) {
+  constructor() {
     makeObservable(this, {
       // observable
       loader: observable.ref,
@@ -51,7 +48,6 @@ export class InstanceStore implements IInstanceStore {
       updateInstanceConfigurations: action,
     });
 
-    this.rootStore = _rootStore;
     this.instanceService = new InstanceService();
   }
 

web/store/page.store.ts

@@ -10,7 +10,7 @@ import { PageService } from "services/page.service";
 // types
 import { IPage, IRecentPages } from "types";
 // store
-import { RootStore } from "./root.store";
+import { AppRootStore } from "store/application";
 
 export interface IPageStore {
   pages: Record<string, IPage>;
@@ -19,7 +19,7 @@ export interface IPageStore {
   projectPages: IPage[] | undefined;
   favoriteProjectPages: IPage[] | undefined;
   privateProjectPages: IPage[] | undefined;
-  sharedProjectPages: IPage[] | undefined;
+  publicProjectPages: IPage[] | undefined;
   recentProjectPages: IRecentPages | undefined;
   // archived pages computed
   archivedProjectPages: IPage[] | undefined;
@@ -49,7 +49,7 @@ export class PageStore {
   // stores
   router;
 
-  constructor(_rootStore: RootStore) {
+  constructor(appRootStore: AppRootStore) {
     makeObservable(this, {
       pages: observable,
       archivedPages: observable,
@@ -78,7 +78,7 @@ export class PageStore {
       restorePage: action,
     });
     // stores
-    this.router = _rootStore.app.router;
+    this.router = appRootStore.router;
     // services
     this.pageService = new PageService();
   }