feature/IO-3499-React-19 - Checkpoint

client/src/App/App.container.jsx

@@ -3,11 +3,10 @@ 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, useMemo } from "react";
+import { useEffect } from "react";
 import { CookiesProvider } from "react-cookie";
 import { useTranslation } from "react-i18next";
-import { connect, useSelector } from "react-redux";
-import { createStructuredSelector } from "reselect";
+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";
@@ -28,93 +27,99 @@ const config = {
 function SplitClientProvider({ children }) {
   const imexshopid = useSelector((state) => state.user.imexshopid);
   const splitClient = useSplitClient({ key: imexshopid || "anon" });
+
   useEffect(() => {
-    if (splitClient && imexshopid) {
+    if (import.meta.env.DEV && splitClient && imexshopid) {
       console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
     }
   }, [splitClient, imexshopid]);
+
   return children;
 }
 
-const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode)),
-  signOutStart: () => dispatch(signOutStart())
-});
-
-function AppContainer({ currentUser, setDarkMode, signOutStart }) {
+function AppContainer() {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const currentUser = useSelector(selectCurrentUser);
   const isDarkMode = useSelector(selectDarkMode);
-  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
+
+  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;
 
-      const requestOrigin = event.origin;
+      // 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" },
-          requestOrigin || "*"
-        );
+        window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "already_logged_out" }, targetOrigin);
         return;
       }
 
-      signOutStart();
-      window.parent.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, requestOrigin || "*");
+      dispatch(signOutStart());
+      window.parent?.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, targetOrigin);
     };
 
     window.addEventListener("message", handleSeamlessLogout);
     return () => {
       window.removeEventListener("message", handleSeamlessLogout);
     };
-  }, [signOutStart, currentUser]);
+  }, [dispatch, currentUser?.authorized]);
 
-  // Update data-theme attribute
+  // Update data-theme attribute (no cleanup to avoid transient style churn)
   useEffect(() => {
-    document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
-    return () => document.documentElement.removeAttribute("data-theme");
+    document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
   }, [isDarkMode]);
 
   // Sync darkMode with localStorage
   useEffect(() => {
-    if (currentUser?.uid) {
-      const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
-      if (savedMode !== null) {
-        setDarkMode(JSON.parse(savedMode));
-      } else {
-        setDarkMode(false);
-      }
-    } else {
-      setDarkMode(false);
+    const uid = currentUser?.uid;
+
+    if (!uid) {
+      dispatch(setDarkMode(false));
+      return;
     }
-  }, [currentUser?.uid, setDarkMode]);
+
+    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(() => {
-    if (currentUser?.uid) {
-      localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));
-    }
+    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={{ autoComplete: "new-password" }}
-          locale={enLocale}
-          theme={theme}
-          form={{
-            validateMessages: {
-              required: t("general.validation.required", { label: "${label}" })
-            }
-          }}
-        >
+        <ConfigProvider input={antdInput} locale={enLocale} theme={theme} form={antdForm}>
           <GlobalLoadingBar />
           <SplitFactoryProvider config={config}>
             <SplitClientProvider>
@@ -127,4 +132,4 @@ function AppContainer({ currentUser, setDarkMode, signOutStart }) {
   );
 }
 
-export default Sentry.withProfiler(connect(mapStateToProps, mapDispatchToProps)(AppContainer));
+export default Sentry.withProfiler(AppContainer);