refactoring gatsby to use client only

gatsby-browser.tsx

@@ -0,0 +1,50 @@
+import React, { Suspense } from "react"
+
+import "./src/styles/fonts.css"
+import "bootstrap/dist/css/bootstrap.min.css"
+import "./src/styles/style.css"
+
+// import { useBrowserStore } from "./src/store"
+import App from "./src/components/App"
+import PageLayout from "./src/components/PageLayout"
+
+const AppLazy = React.lazy(() => import("./src/components/App"))
+const PageLayoutLazy = React.lazy(() => import("./src/components/PageLayout"))
+// Logs when the client route changes
+export function onRouteUpdate({ location, prevLocation }) {
+  console.log("[Layout] render")
+  console.log(
+    "[gatsby-browser]@onRouteUpdate new pathname",
+    location.pathname,
+    "prev pathname",
+    prevLocation?.pathname,
+  )
+  // useBrowserStore.getState().setPath(location.pathname, prevLocation?.pathname)
+}
+
+// Wraps every page in a component
+export function wrapRootElement({ element, props }) {
+  return (
+    <Suspense>
+      <AppLazy {...props}>{element}</AppLazy>
+    </Suspense>
+  )
+}
+
+// wraps every page in a component
+export function wrapPageElement({ element, props }) {
+  console.log("[gatsby-browser]@wrapPageElement", props)
+
+  // display all other pages a s modals
+  return (
+    <main className="position-fixed">
+      <Suspense>
+        <PageLayoutLazy {...props}>{element}</PageLayoutLazy>
+      </Suspense>
+    </main>
+  )
+}
+
+export function shouldUpdateScroll() {
+  return false
+}

src/components/App.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react"
+import { usePersistentStore } from "../store"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import Layout from "../components/Layout"
+import PrefetchData from "../components/PrefetchData"
+import Modals from "../components/Modals"
+
+console.info(
+  "Impresso datalab",
+  "\n - PATH_PREFIX:",
+  process.env.PATH_PREFIX,
+  "\n - GATSBY_PATH_PREFIX:",
+  process.env.GATSBY_PATH_PREFIX,
+)
+
+// setTimeout(() => {
+//   console.info("[gatsby-browser] load version...")
+//   versionService.find().then((data) => {
+//     console.info("[gatsby-browser] use version:", data)
+//   })
+// }, 3000)
+
+const App: React.FC = ({ props, children }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            retry: false,
+            // Add a timeout of 10 seconds
+            staleTime: 10000,
+          },
+        },
+      }),
+  )
+  console.log("[App] rendering...", window)
+  useEffect(() => {
+    // get fresh data from the localstorage
+    const existingToken = window.localStorage.getItem("feathers-jwt")
+
+    if (existingToken && usePersistentStore.getState().token === null) {
+      console.info("[usePersistentStore] use existing token from feathers-jwt")
+      usePersistentStore.setState({ token: existingToken })
+    } else {
+      console.info("[usePersistentStore] use fresh token")
+    }
+  }, [])
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <PrefetchData />
+      <Modals />
+      <Layout {...props}>{children}</Layout>
+    </QueryClientProvider>
+  )
+}
+
+export default App

src/pages/access-to-api.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { graphql, PageProps } from "gatsby"
 import AccessToApi from "../components/AccessToApi"
 import { usePersistentStore } from "../store"
@@ -14,15 +14,18 @@ type DataProps = {
 
 const AccessToApiRoute = ({ data: { site } }: PageProps<DataProps>) => {
   const llToken = usePersistentStore((state) => state.token)
-  console.info("[pages/access-to-api AccessToApiRoute] llToken:", llToken)
+
   // double check if the user is authentified
-  if (!llToken) {
-    console.info(
-      "[pages/access-to-api AccessToApiRoute] no token found, redirecting to /login",
-    )
-    navigate("/login")
-    return
-  }
+  useEffect(() => {
+    console.info("[pages/access-to-api AccessToApiRoute] llToken:", llToken)
+
+    if (!llToken) {
+      console.info(
+        "[pages/access-to-api AccessToApiRoute] no token found, redirecting to /login",
+      )
+      navigate("/login")
+    }
+  }, [llToken])
   return <AccessToApi llToken={llToken} />
 }