feat(federation): expose routes. refactor. update react-router.

federation.config.json

@@ -1,6 +1,7 @@
 {
     "name": "petasos",
     "exposes": {
-        "./remoteTab": "./src/remoteTab"
+        "./remoteTab": "./src/remoteTab",
+        "./routes": "./src/components/routes"
     }
 }

package.json

@@ -24,7 +24,7 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-json-tree": "0.16.2",
-        "react-router-dom": "6.8.1",
+        "react-router-dom": "6.23.1",
         "semantic-release": "19.0.3",
         "url-join": "5.0.0"
     },
@@ -53,7 +53,6 @@
         "@types/react": "17.0.43",
         "@types/react-dom": "17.0.14",
         "@types/react-helmet": "6.1.5",
-        "@types/react-router-dom": "5.3.3",
         "@types/webpack-dev-server": "4.7.2",
         "@types/webpack-env": "1.16.4",
         "@types/webpack-merge": "5.0.0",

src/api.ts

@@ -1,4 +1,4 @@
-const ACCESS_TOKEN_NAMESPACE = "accessToken";
+import { tokenStorage } from "./tokenStorage";
 
 const addHeaders =
     (customHeaders: Record<string, string>) =>
@@ -14,16 +14,19 @@ const addTokenHeader = (token: string) => addHeaders({ Authorization: `Bearer ${
 
 const withContentType = addHeaders({ "Content-Type": "application/json" });
 
-export const fetchSecured = async <R>(url: string, init: RequestInit = {}): Promise<R> => {
-    const storageToken = localStorage.getItem(ACCESS_TOKEN_NAMESPACE);
-    const queryParamToken = getQueryParameters()[ACCESS_TOKEN_NAMESPACE];
-    const token = queryParamToken ? queryParamToken : storageToken;
-    if (queryParamToken) {
-        localStorage.setItem(ACCESS_TOKEN_NAMESPACE, queryParamToken);
-        window.history.replaceState(null, null, window.location.pathname);
+const getAuthHeader = async (init: RequestInit): Promise<RequestInit> => {
+    try {
+        const token = await tokenStorage.getToken();
+        const withAuth = addTokenHeader(token);
+        return withAuth(init);
+    } catch {
+        return init;
     }
-    const withAuth = addTokenHeader(token);
-    return await fetchJson(url, withAuth(init));
+};
+
+export const fetchSecured = async <R>(url: string, init: RequestInit = {}): Promise<R> => {
+    const options = await getAuthHeader(init);
+    return await fetchJson(url, options);
 };
 
 export const fetchJson = async <R>(url: string, init: RequestInit = {}): Promise<R> => {
@@ -43,15 +46,18 @@ export const fetchJson = async <R>(url: string, init: RequestInit = {}): Promise
     return json as R;
 };
 
-export const getQueryParameters = () => {
-    const queryStringKeyValue = window.location.search.replace("?", "").split("&");
-    return queryStringKeyValue.reduce((acc, curr) => {
-        const [key, value] = curr.split("=");
-        return {
-            ...acc,
-            [key]: value,
-        };
-    }, {});
+export const localStorageToken = (namespace = "accessToken") => {
+    let token: string;
+    const url = new URL(window.location.href);
+    if (url.searchParams.has(namespace)) {
+        token = url.searchParams.get(namespace);
+        localStorage.setItem(namespace, token);
+        url.searchParams.delete(namespace);
+        window.history.replaceState(null, null, url.toString());
+    } else {
+        token = localStorage.getItem(namespace);
+    }
+    return token ? Promise.resolve(token) : Promise.reject();
 };
 
-export const fetchFn = Object.keys(getQueryParameters()).length ? fetchSecured : fetchJson;
+export const fetchFn = fetchSecured;

src/components/navigationBar.tsx

@@ -6,7 +6,7 @@ import { Link as RouterLink, matchPath, PathMatch, useLocation } from "react-rou
 import { useStore } from "../store/storeProvider";
 import { LayoutRow } from "./layout";
 import { LinePlaceholder } from "./linePlaceholder";
-import { RootPath } from "./routes";
+import { RootPath } from "./rootProviders";
 
 function LinkRouter(
     props: PropsWithChildren<{

src/components/root.tsx

@@ -1,17 +1,17 @@
 import { Box, CssBaseline, ThemeProvider } from "@mui/material";
 import React from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import { RootRoutes } from "./routes";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createRoutes } from "./routes";
 import { theme } from "./theme";
 
+const router = createBrowserRouter(createRoutes());
+
 export const Root = () => {
     return (
         <ThemeProvider theme={theme}>
             <CssBaseline />
             <Box minHeight="100vh" display="flex" flex={1}>
-                <Router>
-                    <RootRoutes />
-                </Router>
+                <RouterProvider router={router} />
             </Box>
         </ThemeProvider>
     );