forked from github/plane
98b1a078de
* fix: project layout added and theme fixes * feat: input color picker component added to ui package * fix: layout fixes * fix: conflicts and build issues resolved * fix: layout headers fixes
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
// next themes
|
|
import { useTheme } from "next-themes";
|
|
// mobx store
|
|
import { useMobxStore } from "lib/mobx/store-provider";
|
|
import { useRouter } from "next/router";
|
|
import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
|
|
import { observer } from "mobx-react-lite";
|
|
|
|
const MobxStoreInit = observer(() => {
|
|
const {
|
|
theme: themeStore,
|
|
user: userStore,
|
|
workspace: workspaceStore,
|
|
project: projectStore,
|
|
module: moduleStore,
|
|
globalViews: globalViewsStore,
|
|
projectViews: projectViewsStore,
|
|
inbox: inboxStore,
|
|
} = useMobxStore();
|
|
// state
|
|
const [dom, setDom] = useState<any>();
|
|
// theme
|
|
const { setTheme } = useTheme();
|
|
// router
|
|
const router = useRouter();
|
|
const { workspaceSlug, projectId, moduleId, globalViewId, viewId, inboxId } = router.query;
|
|
|
|
// const dom = useMemo(() => window && window.document?.querySelector<HTMLElement>("[data-theme='custom']"), [document]);
|
|
|
|
useEffect(() => {
|
|
// sidebar collapsed toggle
|
|
if (localStorage && localStorage.getItem("app_sidebar_collapsed") && themeStore?.sidebarCollapsed === null)
|
|
themeStore.setSidebarCollapsed(
|
|
localStorage.getItem("app_sidebar_collapsed")
|
|
? localStorage.getItem("app_sidebar_collapsed") === "true"
|
|
? true
|
|
: false
|
|
: false
|
|
);
|
|
}, [themeStore, userStore, setTheme]);
|
|
|
|
useEffect(() => {
|
|
if (!userStore.currentUser) return;
|
|
if (window) {
|
|
setDom(window.document?.querySelector<HTMLElement>("[data-theme='custom']"));
|
|
}
|
|
setTheme(userStore.currentUser?.theme?.theme || "system");
|
|
if (userStore.currentUser?.theme?.theme === "custom" && dom) {
|
|
console.log("userStore.currentUser?.theme?.theme", userStore.currentUser?.theme);
|
|
applyTheme(userStore.currentUser?.theme?.palette, false);
|
|
} else unsetCustomCssVariables();
|
|
}, [userStore.currentUser, setTheme, dom]);
|
|
|
|
useEffect(() => {
|
|
if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
|
|
if (projectId) projectStore.setProjectId(projectId.toString());
|
|
if (moduleId) moduleStore.setModuleId(moduleId.toString());
|
|
if (globalViewId) globalViewsStore.setGlobalViewId(globalViewId.toString());
|
|
if (viewId) projectViewsStore.setViewId(viewId.toString());
|
|
if (inboxId) inboxStore.setInboxId(inboxId.toString());
|
|
}, [
|
|
workspaceSlug,
|
|
projectId,
|
|
moduleId,
|
|
globalViewId,
|
|
viewId,
|
|
inboxId,
|
|
workspaceStore,
|
|
projectStore,
|
|
moduleStore,
|
|
globalViewsStore,
|
|
projectViewsStore,
|
|
inboxStore,
|
|
]);
|
|
|
|
return <></>;
|
|
});
|
|
|
|
export default MobxStoreInit;
|