plane/web/lib/wrappers/store-wrapper.tsx
sriram veeraghanta 78fee22fec feat: event tracking using posthog and created application provider to render multiple wrappers (#2757)
* fix: event tracker changes

* fix: App provider implementation using wrappers

* fix: updating packages

* fix: handling warning

* fix: wrapper fixes and minor optimization changes

* fix: chore app-provider clearnup

* fix: cleanup

* fix: removing jitsu tracking

* fix: minor updates

* fix: adding event to posthog event tracker (#2802)

* dev: posthog event tracker update intitiate

* fix: adding events for posthog integration

* fix: event payload

---------

Co-authored-by: Ramesh Kumar Chandra <31303617+rameshkumarchandra@users.noreply.github.com>
2023-12-07 19:59:35 +05:30

98 lines
2.8 KiB
TypeScript

import { ReactNode, useEffect, useState, FC } from "react";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
import { useTheme } from "next-themes";
import { useRouter } from "next/router";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// helpers
import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
interface IStoreWrapper {
children: ReactNode;
}
const StoreWrapper: FC<IStoreWrapper> = observer((props) => {
const { children } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId } = router.query;
// store
const {
theme: { sidebarCollapsed, toggleSidebar },
user: { currentUser },
workspace: { setWorkspaceSlug },
project: { setProjectId },
cycle: { setCycleId },
module: { setModuleId },
globalViews: { setGlobalViewId },
projectViews: { setViewId },
inbox: { setInboxId },
appConfig: { fetchAppConfig },
} = useMobxStore();
// fetching application Config
useSWR("APP_CONFIG", () => fetchAppConfig(), { revalidateIfStale: false, revalidateOnFocus: false });
// state
const [dom, setDom] = useState<any>();
// theme
const { setTheme } = useTheme();
/**
* Sidebar collapsed fetching from local storage
*/
useEffect(() => {
const localValue = localStorage && localStorage.getItem("app_sidebar_collapsed");
const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
if (localValue && sidebarCollapsed === undefined) {
toggleSidebar(localBoolValue);
}
}, [sidebarCollapsed, currentUser, setTheme, toggleSidebar]);
/**
* Setting up the theme of the user by fetching it from local storage
*/
useEffect(() => {
if (!currentUser) return;
if (window) {
setDom(window.document?.querySelector<HTMLElement>("[data-theme='custom']"));
}
setTheme(currentUser?.theme?.theme || "system");
if (currentUser?.theme?.theme === "custom" && dom) {
applyTheme(currentUser?.theme?.palette, false);
} else unsetCustomCssVariables();
}, [currentUser, setTheme, dom]);
/**
* Setting router info to the respective stores.
*/
useEffect(() => {
if (workspaceSlug) setWorkspaceSlug(workspaceSlug.toString());
setProjectId(projectId?.toString() ?? null);
setCycleId(cycleId?.toString() ?? null);
setModuleId(moduleId?.toString() ?? null);
setGlobalViewId(globalViewId?.toString() ?? null);
setViewId(viewId?.toString() ?? null);
setInboxId(inboxId?.toString() ?? null);
}, [
workspaceSlug,
projectId,
cycleId,
moduleId,
globalViewId,
viewId,
inboxId,
setWorkspaceSlug,
setProjectId,
setCycleId,
setModuleId,
setGlobalViewId,
setViewId,
setInboxId,
]);
return <>{children}</>;
});
export default StoreWrapper;