diff --git a/web/contexts/app-root/app-root-provider.tsx b/web/contexts/app-root/app-root-provider.tsx new file mode 100644 index 000000000..92a3f73ef --- /dev/null +++ b/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(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 {children}; +}; diff --git a/web/contexts/app-root/index.ts b/web/contexts/app-root/index.ts new file mode 100644 index 000000000..416a8ec63 --- /dev/null +++ b/web/contexts/app-root/index.ts @@ -0,0 +1,2 @@ +export * from "./app-root-provider"; +export * from "./use-app-root"; diff --git a/web/contexts/app-root/use-app-root.tsx b/web/contexts/app-root/use-app-root.tsx new file mode 100644 index 000000000..363192716 --- /dev/null +++ b/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; +}; diff --git a/web/contexts/page.context/index.ts b/web/contexts/page.context/index.ts new file mode 100644 index 000000000..78f8c7a77 --- /dev/null +++ b/web/contexts/page.context/index.ts @@ -0,0 +1,2 @@ +export * from "./page-provider"; +export * from "./use-page"; diff --git a/web/contexts/page.context/page-provider.tsx b/web/contexts/page.context/page-provider.tsx new file mode 100644 index 000000000..5026edabc --- /dev/null +++ b/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); + +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 {children}; +}; diff --git a/web/contexts/page.context/use-page.tsx b/web/contexts/page.context/use-page.tsx new file mode 100644 index 000000000..85e3d1500 --- /dev/null +++ b/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; +}; diff --git a/web/hooks/use-page.tsx b/web/hooks/use-page.tsx new file mode 100644 index 000000000..3852cc79b --- /dev/null +++ b/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; diff --git a/web/lib/mobx/store-provider.tsx b/web/lib/mobx/store-provider.tsx index 7e9a57c51..1fd33b256 100644 --- a/web/lib/mobx/store-provider.tsx +++ b/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"; diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx index 69d6db1d3..4b12e6d5f 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx +++ b/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( - (obj, key) => { - if (options[key] !== undefined) { - obj[key] = options[key]; - } - return obj; - }, - {} as { [key: string]: any } - ); + return keys.reduce((obj, key) => { + if (options[key] !== undefined) { + obj[key] = options[key]; + } + return obj; + }, {} as { [key: string]: any }); } const mutatePageDetailsHelper = ( diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx index f6df0c4fc..d8469f129 100644 --- a/web/pages/onboarding/index.tsx +++ b/web/pages/onboarding/index.tsx @@ -158,8 +158,8 @@ const OnboardingPage: NextPageWithLayout = observer(() => { currentUser?.first_name ? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}` : value.length > 0 - ? value - : currentUser?.email + ? value + : currentUser?.email } src={currentUser?.avatar} size={35} @@ -174,8 +174,8 @@ const OnboardingPage: NextPageWithLayout = observer(() => { {currentUser?.first_name ? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}` : value.length > 0 - ? value - : null} + ? value + : null}

)} diff --git a/web/store/application/app-config.store.ts b/web/store/application/app-config.store.ts index 8e6ff558c..99d8d10ec 100644 --- a/web/store/application/app-config.store.ts +++ b/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(); diff --git a/web/store/application/command-palette.store.ts b/web/store/application/command-palette.store.ts index 4403c786a..b98a14049 100644 --- a/web/store/application/command-palette.store.ts +++ b/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(); } diff --git a/web/store/application/index.ts b/web/store/application/index.ts index 6e2ea3577..efc83f613 100644 --- a/web/store/application/index.ts +++ b/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) { - 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); + constructor() { 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(); } } diff --git a/web/store/application/instance.store.ts b/web/store/application/instance.store.ts index 3332a11d9..009d8aa6d 100644 --- a/web/store/application/instance.store.ts +++ b/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(); } diff --git a/web/store/page.store.ts b/web/store/page.store.ts index 5f95758f5..8d61e2033 100644 --- a/web/store/page.store.ts +++ b/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; @@ -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(); }