mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: context changes
This commit is contained in:
sriram veeraghanta
parent
71381330b1
commit
b66ae418a0
@ -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;
|
||||
};
|
||||
@ -1,2 +0,0 @@
|
||||
export * from "./app-root-provider";
|
||||
export * from "./use-app-root";
|
||||
@ -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;
|
||||
};
|
||||
21
web/contexts/page.context.tsx
Normal file
21
web/contexts/page.context.tsx
Normal file
@ -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;
|
||||
};
|
||||
@ -1,2 +0,0 @@
|
||||
export * from "./page-provider";
|
||||
export * from "./use-page";
|
||||
@ -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>;
|
||||
};
|
||||
@ -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;
|
||||
};
|
||||
@ -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,81 +83,83 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{workspaceSlug && projectId && (
|
||||
<CreateUpdatePageModal
|
||||
isOpen={createUpdatePageModal}
|
||||
handleClose={() => setCreateUpdatePageModal(false)}
|
||||
projectId={projectId.toString()}
|
||||
/>
|
||||
)}
|
||||
<div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
|
||||
<div className="flex justify-between gap-4">
|
||||
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
|
||||
<PageStoreProvider>
|
||||
<>
|
||||
{workspaceSlug && projectId && (
|
||||
<CreateUpdatePageModal
|
||||
isOpen={createUpdatePageModal}
|
||||
handleClose={() => setCreateUpdatePageModal(false)}
|
||||
projectId={projectId.toString()}
|
||||
/>
|
||||
)}
|
||||
<div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
|
||||
<div className="flex justify-between gap-4">
|
||||
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
|
||||
</div>
|
||||
<Tab.Group
|
||||
as={Fragment}
|
||||
defaultIndex={currentTabValue(pageTab)}
|
||||
onChange={(i) => {
|
||||
switch (i) {
|
||||
case 0:
|
||||
return setPageTab("Recent");
|
||||
case 1:
|
||||
return setPageTab("All");
|
||||
case 2:
|
||||
return setPageTab("Favorites");
|
||||
case 3:
|
||||
return setPageTab("Private");
|
||||
case 4:
|
||||
return setPageTab("Shared");
|
||||
case 5:
|
||||
return setPageTab("Archived");
|
||||
default:
|
||||
return setPageTab("All");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tab.List as="div" className="mb-6 flex items-center justify-between">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{PAGE_TABS_LIST.map((tab) => (
|
||||
<Tab
|
||||
key={tab.key}
|
||||
className={({ selected }) =>
|
||||
`rounded-full border px-5 py-1.5 text-sm outline-none ${
|
||||
selected
|
||||
? "border-custom-primary bg-custom-primary text-white"
|
||||
: "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{tab.title}
|
||||
</Tab>
|
||||
))}
|
||||
</div>
|
||||
</Tab.List>
|
||||
<Tab.Panels as={Fragment}>
|
||||
<Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto">
|
||||
<RecentPagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<AllPagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<FavoritePagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<PrivatePagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<SharedPagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<ArchivedPagesList />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
<Tab.Group
|
||||
as={Fragment}
|
||||
defaultIndex={currentTabValue(pageTab)}
|
||||
onChange={(i) => {
|
||||
switch (i) {
|
||||
case 0:
|
||||
return setPageTab("Recent");
|
||||
case 1:
|
||||
return setPageTab("All");
|
||||
case 2:
|
||||
return setPageTab("Favorites");
|
||||
case 3:
|
||||
return setPageTab("Private");
|
||||
case 4:
|
||||
return setPageTab("Shared");
|
||||
case 5:
|
||||
return setPageTab("Archived");
|
||||
default:
|
||||
return setPageTab("All");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tab.List as="div" className="mb-6 flex items-center justify-between">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{PAGE_TABS_LIST.map((tab) => (
|
||||
<Tab
|
||||
key={tab.key}
|
||||
className={({ selected }) =>
|
||||
`rounded-full border px-5 py-1.5 text-sm outline-none ${
|
||||
selected
|
||||
? "border-custom-primary bg-custom-primary text-white"
|
||||
: "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{tab.title}
|
||||
</Tab>
|
||||
))}
|
||||
</div>
|
||||
</Tab.List>
|
||||
<Tab.Panels as={Fragment}>
|
||||
<Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto">
|
||||
<RecentPagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<AllPagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<FavoritePagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<PrivatePagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<SharedPagesList />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel as="div" className="h-full overflow-hidden">
|
||||
<ArchivedPagesList />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
</PageStoreProvider>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user