136 lines
4.1 KiB
JavaScript
136 lines
4.1 KiB
JavaScript
import { ApolloProvider } from "@apollo/client/react";
|
|
import * as Sentry from "@sentry/react";
|
|
import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
|
|
import { ConfigProvider } from "antd";
|
|
import enLocale from "antd/es/locale/en_US";
|
|
import { useEffect } from "react";
|
|
import { CookiesProvider } from "react-cookie";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
|
|
import { setDarkMode } from "../redux/application/application.actions";
|
|
import { selectDarkMode } from "../redux/application/application.selectors";
|
|
import { selectCurrentUser } from "../redux/user/user.selectors.js";
|
|
import { signOutStart } from "../redux/user/user.actions";
|
|
import client from "../utils/GraphQLClient";
|
|
import App from "./App";
|
|
import getTheme from "./themeProvider";
|
|
|
|
// Base Split configuration
|
|
const config = {
|
|
core: {
|
|
authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
|
|
key: "anon"
|
|
}
|
|
};
|
|
|
|
function SplitClientProvider({ children }) {
|
|
const imexshopid = useSelector((state) => state.user.imexshopid);
|
|
const splitClient = useSplitClient({ key: imexshopid || "anon" });
|
|
|
|
useEffect(() => {
|
|
if (import.meta.env.DEV && splitClient && imexshopid) {
|
|
console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
|
|
}
|
|
}, [splitClient, imexshopid]);
|
|
|
|
return children;
|
|
}
|
|
|
|
function AppContainer() {
|
|
const { t } = useTranslation();
|
|
const dispatch = useDispatch();
|
|
|
|
const currentUser = useSelector(selectCurrentUser);
|
|
const isDarkMode = useSelector(selectDarkMode);
|
|
|
|
const theme = () => getTheme(isDarkMode);
|
|
|
|
const antdInput = () => ({ autoComplete: "new-password" });
|
|
|
|
const antdForm = () => ({
|
|
validateMessages: {
|
|
required: t("general.validation.required", { label: "${label}" })
|
|
}
|
|
});
|
|
|
|
// Global seamless logout listener with redirect to /signin
|
|
useEffect(() => {
|
|
const handleSeamlessLogout = (event) => {
|
|
if (event.data?.type !== "seamlessLogoutRequest") return;
|
|
|
|
// Only accept messages from the parent window
|
|
if (event.source !== window.parent) return;
|
|
|
|
const targetOrigin = event.origin || "*";
|
|
|
|
if (currentUser?.authorized !== true) {
|
|
window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
|
|
return;
|
|
}
|
|
|
|
dispatch(signOutStart());
|
|
window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
|
|
};
|
|
|
|
window.addEventListener("message", handleSeamlessLogout);
|
|
return () => {
|
|
window.removeEventListener("message", handleSeamlessLogout);
|
|
};
|
|
}, [dispatch, currentUser?.authorized]);
|
|
|
|
// Update data-theme attribute (no cleanup to avoid transient style churn)
|
|
useEffect(() => {
|
|
document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
|
|
}, [isDarkMode]);
|
|
|
|
// Sync darkMode with localStorage
|
|
useEffect(() => {
|
|
const uid = currentUser?.uid;
|
|
|
|
if (!uid) {
|
|
dispatch(setDarkMode(false));
|
|
return;
|
|
}
|
|
|
|
const key = `dark-mode-${uid}`;
|
|
const raw = localStorage.getItem(key);
|
|
|
|
if (raw == null) {
|
|
dispatch(setDarkMode(false));
|
|
return;
|
|
}
|
|
|
|
try {
|
|
dispatch(setDarkMode(Boolean(JSON.parse(raw))));
|
|
} catch {
|
|
dispatch(setDarkMode(false));
|
|
}
|
|
}, [currentUser?.uid, dispatch]);
|
|
|
|
// Persist darkMode
|
|
useEffect(() => {
|
|
const uid = currentUser?.uid;
|
|
if (!uid) return;
|
|
|
|
localStorage.setItem(`dark-mode-${uid}`, JSON.stringify(isDarkMode));
|
|
}, [isDarkMode, currentUser?.uid]);
|
|
|
|
return (
|
|
<CookiesProvider>
|
|
<ApolloProvider client={client}>
|
|
<ConfigProvider input={antdInput} locale={enLocale} theme={theme} form={antdForm}>
|
|
<GlobalLoadingBar />
|
|
<SplitFactoryProvider config={config}>
|
|
<SplitClientProvider>
|
|
<App />
|
|
</SplitClientProvider>
|
|
</SplitFactoryProvider>
|
|
</ConfigProvider>
|
|
</ApolloProvider>
|
|
</CookiesProvider>
|
|
);
|
|
}
|
|
|
|
export default Sentry.withProfiler(AppContainer);
|