Added a nestJS based contract api

- Added an example with trucks and basic fetch in useEffect on page load
  - Added simply test to see whether any data is displayed (and shows the interceptor)
Introduced "CypressStrictMode" which wraps React.StrictMode and checks whether Cypress is involved, if so disable StrictMode.

src/Routes.tsx

@@ -4,6 +4,7 @@ import { Route, Routes } from "react-router-dom";
 import { AboutContainer } from "./features/about/About";
 import { CounterContainer } from "./features/examples/counter/Counter";
 import { Tenders } from "./features/examples/tenders/Tenders";
+import { Trucks } from "./features/examples/trucks/Trucks";
 import { HomeContainer } from "./features/home/Home";
 type Props = {};
 
@@ -12,10 +13,11 @@ export const ROUTE_KEYS = {
   about: "about",
   counter: "counter",
   tenders: "tenders",
+  trucks: "trucks",
 };
 
 export const AppRoutes: FunctionComponent<Props> = () => {
-  const { home, about, counter, tenders } = ROUTE_KEYS;
+  const { home, about, counter, tenders, trucks } = ROUTE_KEYS;
   return (
     <Routes>
       <Route path={home} element={<HomeContainer />} />
@@ -30,6 +32,7 @@ export const AppRoutes: FunctionComponent<Props> = () => {
           </OidcSecure>
         }
       />
+      <Route path={trucks} element={<Trucks />} />
       {/* <Route index element={<Home />} /> */}
       {/* <Route path="teams" element={<Teams />}>
       <Route path=":teamId" element={<Team />} />

src/features/examples/trucks/Trucks.tsx

@@ -0,0 +1,34 @@
+import { useOidcAccessToken } from "@axa-fr/react-oidc";
+import { FunctionComponent, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Config } from "../../../infrastructure/config";
+
+type Props = {};
+
+export const Trucks: FunctionComponent<Props> = () => {
+  const [trucks, setTrucks] = useState(null);
+  const [translate] = useTranslation();
+  const { accessToken } = useOidcAccessToken();
+
+  useEffect(() => {
+    const { fake } = Config.services;
+    fetch(`${fake.root}/${fake.trucks}`, {
+      // fetch's way of adding headers. Not required to access the api... but :shrug:
+      headers: new Headers({
+        Authorization: `Bearer ${accessToken}`,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setTrucks(data);
+      });
+  }, [accessToken]);
+  return (
+    <>
+      <h1>{translate("nav.trucks")} page</h1>
+      <div data-testid="trucksResult">
+        {trucks ? <pre>{JSON.stringify(trucks, null, 2)}</pre> : <h2>loading...</h2>}
+      </div>
+    </>
+  );
+};

src/index.tsx

@@ -4,6 +4,7 @@ import { Provider } from "react-redux";
 import { createGlobalStyle } from "styled-components";
 import App from "./App";
 import { store } from "./app/store";
+import { CypressStrictMode } from "./infrastructure/CypressStrictMode";
 import "./infrastructure/i18n/init";
 import { OidcProvider } from "./infrastructure/sso/OidcProvider";
 import { Loader } from "./infrastructure/wrappers/WithPageSuspense";
@@ -27,7 +28,7 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 root.render(
-  <React.StrictMode>
+  <CypressStrictMode>
     <GlobalStyle />
     <Provider store={store}>
       <OidcProvider>
@@ -36,7 +37,7 @@ root.render(
         </Loader>
       </OidcProvider>
     </Provider>
-  </React.StrictMode>,
+  </CypressStrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

src/infrastructure/CypressStrictMode.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent, ReactNode } from "react";
+
+type Props = { children?: ReactNode };
+
+/**
+ * React StrictMode that disables itself when detected to be running in Cypress
+ */
+export const CypressStrictMode: FunctionComponent<Props> = ({ children }) => {
+  const isInCypress = (window as any).Cypress;
+
+  if (isInCypress) {
+    return <>{children}</>;
+  } else {
+    return <React.StrictMode>{children}</React.StrictMode>;
+  }
+};

src/infrastructure/config/RunTimeConfig.ts

@@ -4,6 +4,13 @@ export interface RunTimeConfig {
   version: number;
   name: string;
 
+  services: {
+    fake: {
+      root: string;
+      trucks: string;
+    };
+  };
+
   /**
    * Settings for the OIDC connection
    */

src/infrastructure/navbar/Navbar.tsx

@@ -12,7 +12,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
   const [translate, i18n] = useTranslation();
   const { login, logout, isAuthenticated } = useOidc();
   const { accessTokenPayload } = useOidcAccessToken();
-  const { home, about, counter } = ROUTE_KEYS;
+  const { home, about, counter, tenders, trucks } = ROUTE_KEYS;
   return (
     <div className={className}>
       <h1>{translate("navBar.intro")}</h1>
@@ -41,9 +41,12 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
         <Link to={counter} data-testid="nav.counter">
           {translate("nav.counter")}
         </Link>
-        <Link to="/tenders" data-testid="nav.tenders">
+        <Link to={tenders} data-testid="nav.tenders">
           {translate("nav.tenders")}
         </Link>
+        <Link to={trucks} data-testid="nav.trucks">
+          {translate("nav.trucks")}
+        </Link>
         <button onClick={() => i18n.changeLanguage("en")}>en</button>
         <button onClick={() => i18n.changeLanguage("nl")}>nl</button>
         <hr />