@openstack_dev/gatsby-theme-marketing-oif-core 1.0.35-beta.1 → 1.0.35-beta.3

package/gatsby-browser.js

@@ -1,3 +1,6 @@
-import { ReduxWrapperWithCacheProvider } from "./src/state/ReduxWrapper";
+import React from "react";
+import ReduxWrapper from "./src/state/ReduxWrapper";
 
-export const wrapRootElement = ReduxWrapperWithCacheProvider;
+export const wrapRootElement = ({ element }) => (
+  <ReduxWrapper element={element} />
+);

package/gatsby-ssr.js

@@ -1,6 +1,7 @@
+import React from "react";
 import { JSDOM } from "jsdom";
 import { XMLHttpRequest } from "xmlhttprequest";
-import { ReduxWrapper } from "./src/state/ReduxWrapper";
+import ReduxWrapper from "./src/state/ReduxWrapper";
 import { HeadComponents } from "./src/components/head-components";
 
 export const onRenderBody = ({ setHeadComponents }) => {
@@ -9,7 +10,9 @@ export const onRenderBody = ({ setHeadComponents }) => {
   }
 };
 
-export const wrapRootElement = ReduxWrapper;
+export const wrapRootElement = ({ element }) => (
+  <ReduxWrapper element={element} />
+);
 
 // build enabler polyfills
 global.dom = new JSDOM("...");
@@ -19,7 +22,7 @@ global.navigator = global.window.navigator;
 global.window.matchMedia = () => ({
   matches: false,
   addListener: () => {},
-  removeListener: () => {},
+  removeListener: () => {}
 });
 
 global.XMLHttpRequest = XMLHttpRequest;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
-  "version": "1.0.35-beta.1",
+  "version": "1.0.35-beta.3",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [

package/src/components/AuthBootstrap.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
 import { doLoginBasicLogin } from "openstack-uicore-foundation/lib/security/methods";
 import { getBackURL } from "../utils/url";
@@ -7,42 +7,45 @@ export default function AuthBootstrap() {
   const isLoggedUser = useSelector(
     (state) => state.loggedUserState.isLoggedUser
   );
+  const ranRef = useRef(false);
 
-  const checkLoginStatus = async () => {
-    try {
-      const response = await fetch("/oidc/session/whoami", {
-        method: "GET",
-        credentials: "same-origin"
-      });
+  useEffect(() => {
+    // already ran
+    if (ranRef.current || isLoggedUser) return;
+    ranRef.current = true;
+
+    const controller = new AbortController();
+
+    const run = async () => {
+      try {
+        const response = await fetch("/oidc/session/whoami", {
+          method: "GET",
+          credentials: "same-origin",
+          signal: controller.signal
+        });
+
+        if (!response.ok) return;
 
-      if (response.ok) {
         const data = await response.json();
-        if (
-          data.email &&
-          typeof data.email === "string" &&
-          /\S+@\S+\.\S+/.test(data.email)
-        ) {
-          doLoginBasicLogin(getBackURL(), data.email);
-        } else {
-          console.warn(
-            "Invalid or missing email in login response:",
-            data.email
-          );
+        const email = data?.email;
+
+        if (typeof email === "string" && /\S+@\S+\.\S+/.test(email)) {
+          doLoginBasicLogin(getBackURL(), email);
         }
-      }
-    } catch (error) {
-      console.error(
-        "Failed to check login status. Possible network error or invalid response.",
-        {
-          error,
-          attemptedUrl: "/oidc/session/whoami"
+      } catch (err) {
+        if (err?.name !== "AbortError") {
+          console.error("AuthBootstrap whoami failed", err);
         }
-      );
+      }
+    };
+
+    if (typeof window !== "undefined" && "requestIdleCallback" in window) {
+      window.requestIdleCallback(run, { timeout: 1000 });
+    } else {
+      setTimeout(run, 0);
     }
-  };
 
-  useEffect(() => {
-    if (!isLoggedUser) checkLoginStatus();
+    return () => controller.abort();
   }, [isLoggedUser]);
 
   return null;

package/src/state/ReduxWrapper.js

@@ -1,28 +1,33 @@
-import * as React from "react";
+import React from "react";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { CacheProvider } from "@emotion/react";
+
 import { store, persistor } from "./store";
 import createEmotionCache from "../utils/createEmotionCache";
 import AuthBootstrap from "../components/AuthBootstrap";
 
-export function ReduxWrapper({ element }) {
-  return (
-    <Provider store={store}>
-      <PersistGate persistor={persistor}>{() => element}</PersistGate>
-    </Provider>
-  );
-}
+const isBrowser = typeof window !== "undefined";
+
+const ReduxWrapper = ({ element }) => {
+  const cache = createEmotionCache(); // sin hooks: SSR safe
 
-export function ReduxWrapperWithCacheProvider({ element }) {
-  const cacheRef = React.useRef(null);
-  if (!cacheRef.current) cacheRef.current = createEmotionCache();
   return (
-    <CacheProvider value={cacheRef.current}>
+    <CacheProvider value={cache}>
       <Provider store={store}>
-        <AuthBootstrap />
-        <PersistGate persistor={persistor}>{() => element}</PersistGate>
+        {isBrowser && persistor ? (
+          <PersistGate persistor={persistor} loading={element}>
+            <>
+              <AuthBootstrap />
+              {element}
+            </>
+          </PersistGate>
+        ) : (
+          // SSR
+          element
+        )}
       </Provider>
     </CacheProvider>
   );
-}
+};
+export default ReduxWrapper;

package/src/state/store.js

@@ -1,10 +1,20 @@
 import { applyMiddleware, compose, createStore } from "redux";
 import { persistCombineReducers, persistStore } from "redux-persist";
-import storage from "redux-persist/lib/storage";
 import thunk from "redux-thunk";
-
 import * as reducers from "../reducers";
 
+const isBrowser = typeof window !== "undefined";
+
+const createNoopStorage = () => ({
+  getItem: () => Promise.resolve(null),
+  setItem: () => Promise.resolve(),
+  removeItem: () => Promise.resolve()
+});
+
+const storage = isBrowser
+  ? require("redux-persist/lib/storage").default
+  : createNoopStorage();
+
 // Get from process.env because window is not set yet
 const clientId = process.env.GATSBY_OAUTH2_CLIENT_ID;
 
@@ -14,16 +24,17 @@ const config = {
   blacklist: [
     // this will be not saved to persistent storage see
     // https://github.com/rt2zz/redux-persist#blacklist--whitelist
-  ],
+  ]
 };
 
 const states = {
-  loggedUserState: reducers.loggedUserReducer,
+  loggedUserState: reducers.loggedUserReducer
 };
 
-const composeEnhancers = typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-  : compose;
+const composeEnhancers =
+  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    : compose;
 
 const enhancer = composeEnhancers(applyMiddleware(thunk));
 
@@ -33,7 +44,9 @@ export const { store, persistor } = (() => {
 
   const store = createStore(persistedReducers, enhancer);
   const onRehydrateComplete = () => {};
-  const persistor = persistStore(store, null, onRehydrateComplete);
+  const persistor = isBrowser
+    ? persistStore(store, null, onRehydrateComplete)
+    : null;
 
   return { store, persistor };
 })();