Merge pull request #6 from Mastermindzh/snyk-upgrade-39c364a9f908b40f696eff5a143c06b1

[Snyk] Upgrade react-router-dom from 6.4.3 to 6.8.2

.gitignore

@@ -70,3 +70,7 @@ bundle.zip
 cypress/videos
 cypress/screenshots
 dist-tests/**
+
+# ignore oidc fetch files
+public/OidcServiceWorker.js
+public/OidcTrustedDomains.js

.vscode/settings.json

@@ -3,14 +3,11 @@
     "browserslist",
     "camelcase",
     "deepmerge",
-    "etags",
     "flexbugs",
     "Immer",
     "Keycloak",
     "languagedetector",
-    "lcov",
     "luxon",
-    "nestjs",
     "oidc",
     "pmmmwh",
     "preinstall",

CHANGELOG.md

@@ -4,12 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.0] - 2022-08-25
+
+- Added login command for cypress and SSO protected pages
+
 ## [0.6.2] - 2022-08-15
 
-- 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.
+- Added CypressStrictMode
 
 ## [0.6.1] - 2022-08-08
 

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.17.3
+FROM nginx:1.22.1
 
 RUN mkdir -p /usr/share/nginx/html
 COPY dist/ /usr/share/nginx/html

contracts/api/.eslintrc.js

@@ -1,66 +0,0 @@
-module.exports = {
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: "tsconfig.json",
-    tsconfigRootDir: __dirname,
-    sourceType: "module",
-  },
-  plugins: ["@typescript-eslint/eslint-plugin", "import"],
-  extends: ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
-  root: true,
-  env: {
-    node: true,
-    jest: true,
-  },
-  ignorePatterns: [".eslintrc.js"],
-  rules: {
-    "no-console": [
-      "error",
-      {
-        allow: ["debug", "error"],
-      },
-    ],
-    "no-eval": "error",
-    "import/first": "error",
-    camelcase: [
-      "error",
-      {
-        ignoreImports: true,
-        ignoreDestructuring: true,
-      },
-    ],
-    "consistent-return": "warn",
-    "comma-dangle": ["warn", "always-multiline"],
-    "constructor-super": "error",
-    curly: "error",
-    "eol-last": "warn",
-    eqeqeq: ["error", "smart"],
-    "import/order": "always",
-    "new-parens": "error",
-    "no-debugger": "error",
-    "no-fallthrough": "off",
-    "max-len": [
-      "warn",
-      {
-        code: 100,
-      },
-    ],
-    "no-shadow": [
-      "error",
-      {
-        hoist: "all",
-      },
-    ],
-    "no-trailing-spaces": "warn",
-    "no-underscore-dangle": "error",
-    "no-unsafe-finally": "error",
-    "no-var": "error",
-    "object-shorthand": "error",
-    "one-var": ["error", "never"],
-    "prefer-arrow/prefer-arrow-functions": "off",
-    "prefer-const": "error",
-    radix: "off",
-    "space-in-parens": ["off", "never"],
-    quotes: [2, "double"],
-  },
-};

contracts/api/.gitignore

@@ -1,35 +0,0 @@
-# compiled output
-/dist
-/node_modules
-
-# Logs
-logs
-*.log
-npm-debug.log*
-pnpm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# OS
-.DS_Store
-
-# Tests
-/coverage
-/.nyc_output
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json

contracts/api/README.md

@@ -1,11 +0,0 @@
-# Contract api
-
-This API is meant to emulate the different contracts that you have with external systems
-
-## use api based routing
-
-You can use the first part of the URL as your contract and put your resources after that.
-e.g, for `fake` you could do:
-
-`URL/fake/trucks` and `URL/fake/containers`.
-Then simply make `URL/fake` your root url in the React config

contracts/api/nest-cli.json

@@ -1,5 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/nest-cli",
-  "collection": "@nestjs/schematics",
-  "sourceRoot": "src"
-}

contracts/api/package.json

@@ -1,73 +0,0 @@
-{
-  "name": "contract-testing-api",
-  "version": "0.0.1",
-  "description": "",
-  "author": "",
-  "private": true,
-  "license": "UNLICENSED",
-  "scripts": {
-    "prebuild": "rimraf dist",
-    "build": "nest build",
-    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
-    "start": "nest start",
-    "start:dev": "nest start --watch",
-    "start:debug": "nest start --debug --watch",
-    "start:prod": "node dist/main",
-    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:cov": "jest --coverage",
-    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
-    "test:e2e": "jest --config ./test/jest-e2e.json"
-  },
-  "dependencies": {
-    "@nestjs/common": "^9.0.0",
-    "@nestjs/core": "^9.0.0",
-    "@nestjs/platform-express": "^9.0.0",
-    "reflect-metadata": "^0.1.13",
-    "rimraf": "^3.0.2",
-    "rxjs": "^7.2.0"
-  },
-  "devDependencies": {
-    "@nestjs/cli": "^9.0.0",
-    "@nestjs/schematics": "^9.0.0",
-    "@nestjs/testing": "^9.0.0",
-    "@types/express": "^4.17.13",
-    "@types/jest": "28.1.4",
-    "@types/node": "^16.0.0",
-    "@types/supertest": "^2.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
-    "eslint": "^8.0.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "inforit-prettier-config": "^1.0.0",
-    "jest": "28.1.2",
-    "prettier": "^2.3.2",
-    "source-map-support": "^0.5.20",
-    "supertest": "^6.1.3",
-    "ts-jest": "28.0.5",
-    "ts-loader": "^9.2.3",
-    "ts-node": "^10.0.0",
-    "tsconfig-paths": "4.0.0",
-    "typescript": "^4.3.5"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "ts"
-    ],
-    "rootDir": "src",
-    "testRegex": ".*\\.spec\\.ts$",
-    "transform": {
-      "^.+\\.(t|j)s$": "ts-jest"
-    },
-    "collectCoverageFrom": [
-      "**/*.(t|j)s"
-    ],
-    "coverageDirectory": "../coverage",
-    "testEnvironment": "node"
-  },
-  "prettier": "inforit-prettier-config"
-}

contracts/api/src/api.constants.ts

@@ -1,3 +0,0 @@
-export const API_CONSTANTS = {
-  fake: "fake",
-};

contracts/api/src/app.controller.ts

@@ -1,9 +0,0 @@
-import { Controller, Get } from "@nestjs/common";
-
-@Controller()
-export class AppController {
-  @Get()
-  getHello(): string {
-    return "Welcome to the contract api";
-  }
-}

contracts/api/src/app.module.ts

@@ -1,10 +0,0 @@
-import { Module } from "@nestjs/common";
-import { AppController } from "./app.controller";
-import { FakeTrucksController } from "./contracts/fake/trucks.controller";
-
-@Module({
-  imports: [],
-  controllers: [AppController, FakeTrucksController],
-  providers: [],
-})
-export class AppModule {}

contracts/api/src/contracts/fake/trucks.controller.ts

@@ -1,21 +0,0 @@
-import { Controller, Get } from "@nestjs/common";
-import { API_CONSTANTS } from "./../../api.constants";
-
-@Controller(`${API_CONSTANTS.fake}/trucks`)
-export class FakeTrucksController {
-  @Get()
-  get() {
-    return [
-      {
-        id: "de5ddb70-b2a7-4309-a992-62260a09683a",
-        licensePlate: "xx-yy-zz",
-        color: "black",
-      },
-      {
-        id: "087e0b0b-1c13-46e3-8920-762f5738072e",
-        licensePlate: "xx-yy-zz",
-        color: "red",
-      },
-    ];
-  }
-}

contracts/api/src/main.ts

@@ -1,12 +0,0 @@
-import { NestFactory } from "@nestjs/core";
-import { AppModule } from "./app.module";
-
-async function bootstrap() {
-  const app = await NestFactory.create(AppModule);
-  // allow app to be called from everywhere
-  app.enableCors();
-  // you can disable etags so that you always get 200's instead of 304s :)
-  // app.getHttpAdapter().getInstance().set("etag", false);
-  await app.listen(9600);
-}
-bootstrap();

contracts/api/tsconfig.build.json

@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
-}

contracts/api/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "declaration": true,
-    "removeComments": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "target": "es2017",
-    "sourceMap": true,
-    "outDir": "./dist",
-    "baseUrl": "./",
-    "incremental": true,
-    "skipLibCheck": true,
-    "strictNullChecks": false,
-    "noImplicitAny": false,
-    "strictBindCallApply": false,
-    "forceConsistentCasingInFileNames": false,
-    "noFallthroughCasesInSwitch": false
-  }
-}

contracts/docs/.gitkeep

@@ -1 +0,0 @@
-Put your written contracts here

cypress.config.ts

@@ -6,9 +6,6 @@ export default defineConfig({
       // implement node event listeners here
     },
   },
-  env: {
-    appBaseUrl: "http://localhost:3000",
-  },
   video: false,
   reporter: "mocha-junit-reporter",
   reporterOptions: {
@@ -16,4 +13,13 @@ export default defineConfig({
     mochaFile: "dist-tests/test-results/cypress/[hash].xml",
     outputs: true,
   },
+  env: {
+    oidcUrl: "https://sso.mastermindzh.tech/realms/public-tests/protocol/openid-connect/token",
+    oidcClientId: "demo",
+    oidcClientSecret: "lhlPHFUd3fC1Ky0Uwyb2ssC0XiAFeGGF",
+    oidcGrantType: "client_credentials",
+    oidcScope: "openid profile email",
+    oidcToken: "",
+    oidcCallbackUrl: "http://localhost:3000/authentication/callback",
+  },
 });

cypress/e2e/tenders.cy.ts

@@ -0,0 +1,13 @@
+describe("Tenders page", () => {
+  beforeEach(() => {
+    cy.oidcLogin();
+    // you can check that the user is logged in on this page:
+    cy.visit("http://localhost:3000");
+  });
+
+  it("Should navigate to tenders when clicking on Tenders", () => {
+    cy.get('[data-testid="nav.tenders"]').click();
+    cy.contains("tenders");
+    cy.contains("page_count");
+  });
+});

cypress/e2e/trucks.cy.ts

@@ -1,27 +0,0 @@
-/// <reference types="cypress" />
-
-describe("Application trucks", () => {
-  beforeEach(() => {
-    cy.visit(Cypress.env("appBaseUrl"));
-  });
-
-  it("Should render the navigation links", () => {
-    cy.get("[data-testid='nav']");
-  });
-
-  it("Should navigate to trucks and display a result when clicking on trucks", () => {
-    cy.get('[data-testid="nav.trucks"]').click();
-    cy.contains("trucks (contract api) page");
-  });
-
-  it("Should eventually (after the http call) display the results on screen", () => {
-    cy.intercept({
-      method: "GET",
-      url: "http://localhost:9600/fake/trucks",
-    }).as("getTrucks");
-    cy.get('[data-testid="nav.trucks"]').click();
-    cy.contains("trucks (contract api) page");
-    cy.wait("@getTrucks").its("response.statusCode").should("be.oneOf", [200, 304]);
-    cy.get('[data-testid="trucksResult"]').should("not.be.empty");
-  });
-});

cypress/support/auth/commands.ts

@@ -0,0 +1,41 @@
+/// <reference types="cypress" />
+/* eslint-disable camelcase */
+import jwt_decode from "jwt-decode";
+import "./../index";
+
+Cypress.Commands.add("oidcLogin", () => {
+  const options = {
+    method: "POST",
+    url: Cypress.env("oidcUrl"),
+    form: true,
+    body: {
+      grant_type: Cypress.env("oidcGrantType"),
+      client_id: Cypress.env("oidcClientId"),
+      client_secret: Cypress.env("oidcClientSecret"),
+      scope: Cypress.env("oidcScope"),
+    },
+  };
+
+  return cy.request(options).then((response) => {
+    const { access_token, expires_in, id_token, token_type, scope } = response.body;
+    const accessTokenPayload = jwt_decode(access_token);
+    // stub email on the result, as service accounts don't generally have them but we use it in the UI
+    (accessTokenPayload as any).email = "cypress@e2e.email";
+
+    window.sessionStorage.setItem(
+      `oidc.default:${Cypress.env("oidcCallbackUrl")}`,
+      JSON.stringify({
+        tokens: {
+          accessToken: access_token,
+          expiresIn: expires_in,
+          idToken: id_token,
+          tokenType: token_type,
+          idTokenPayload: jwt_decode(id_token),
+          accessTokenPayload,
+          scope,
+        },
+      }),
+    );
+    return response;
+  });
+});

cypress/support/commands.ts

@@ -1,37 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }

cypress/support/e2e.ts

@@ -14,7 +14,5 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import "./commands";
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+import "./index";
+import "./auth/commands";

cypress/support/index.ts

@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-vars */
+// load type definitions that come with Cypress module
+/// <reference types="cypress" />
+export {};
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Login to the oidc provider
+       */
+      oidcLogin(): Chainable<Response<any>>;
+    }
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-starter-kit",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "A modern, create-react-app-based, starter kit for React projects",
   "keywords": [
     "react",
@@ -28,19 +28,16 @@
     "build:prod": "npm run build",
     "cypress-run": "cypress run",
     "e2e": "cypress open -d --e2e",
-    "e2e-ci": "start-server-and-test start-e2e-dependencies \"http://localhost:3000|9600\" cypress-run",
-    "postinstall": "husky install && npm install --prefix contracts/api",
+    "e2e-ci": "start-server-and-test start http://localhost:3000 cypress-run",
+    "postinstall": "husky install",
     "lint": "eslint \"src/**\"",
     "lint-staged": "lint-staged --relative",
     "organize-package-json": "npx format-package -w && npx sort-package-json",
     "pretty-quick": "pretty-quick --staged",
     "start": "node scripts/start.js",
-    "start-with-contract": "concurrently \"npm start\" \"npm run start-contract-api\"",
-    "start-contract-api": "npm run start:dev --prefix contracts/api",
-    "start-e2e-dependencies": "npm run start-with-contract",
     "test": "node scripts/test.js --verbose",
     "test-ci": "node scripts/test.js --ci --coverage",
-    "test-live-coverage": "concurrently \"npm run test-with-coverage\" \"npx http-server -c-1 coverage/lcov-report\"",
+    "test-live-coverage": "concurrently --kill-others \"npm run test-with-coverage\" \"npx http-server -c-1 coverage/lcov-report\"",
     "test-with-coverage": "node scripts/test.js --coverage",
     "test:prod": "npm run test-ci && npm run e2e-ci"
   },
@@ -48,95 +45,97 @@
     "*.{ts,js,jsx,tsx,css,scss,json,md}": "prettier --write"
   },
   "dependencies": {
-    "@axa-fr/react-oidc": "^6.0.0-beta10",
-    "@reduxjs/toolkit": "^1.8.3",
+    "@axa-fr/react-oidc": "^6.10.8",
+    "@reduxjs/toolkit": "^1.9.3",
     "deepmerge": "^4.2.2",
-    "i18next-http-backend": "^1.4.1",
-    "luxon": "^2.4.0",
+    "i18next-http-backend": "^2.1.1",
+    "luxon": "^3.1.0",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.2",
-    "react-router-dom": "^6.3.0",
-    "styled-components": "^5.3.5"
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.8.2",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.20.2",
     "@mastermindzh/prettier-config": "^1.0.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.3.0",
-    "@types/jest": "^28.1.6",
-    "@types/luxon": "^3.0.0",
-    "@types/node": "^18.6.1",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@types/styled-components": "^5.1.25",
-    "babel-jest": "^27.4.2",
-    "babel-loader": "^8.2.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
+    "@svgr/webpack": "^6.5.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.2",
+    "@types/jwt-decode": "^3.1.0",
+    "@types/luxon": "^3.1.0",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@types/styled-components": "^5.1.26",
+    "babel-jest": "^29.3.0",
+    "babel-loader": "^9.1.0",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
     "bfj": "^7.0.2",
-    "browserslist": "^4.21.2",
+    "browserslist": "^4.21.4",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "concurrently": "^7.3.0",
+    "concurrently": "^7.5.0",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "cypress": "^10.3.1",
-    "dotenv": "^10.0.0",
-    "dotenv-expand": "^5.1.0",
-    "eslint": "^8.20.0",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "cypress": "^10.11.0",
+    "dotenv": "^16.0.3",
+    "dotenv-expand": "^9.0.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-watch": "^8.0.0",
     "eslint-webpack-plugin": "^3.2.0",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.1.0",
     "html-webpack-plugin": "^5.5.0",
     "http-proxy-middleware": "^2.0.6",
-    "husky": "^8.0.1",
-    "i18next": "^21.8.14",
-    "i18next-browser-languagedetector": "^6.1.4",
+    "husky": "^8.0.2",
+    "i18next": "^22.0.4",
+    "i18next-browser-languagedetector": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "immer": "^9.0.15",
-    "jest": "^27.4.3",
-    "jest-environment-jsdom": "^27.4.3",
-    "jest-junit": "^14.0.0",
-    "jest-resolve": "^27.4.2",
-    "jest-watch-typeahead": "^1.0.0",
+    "immer": "^9.0.16",
+    "jest": "^29.3.0",
+    "jest-environment-jsdom": "^29.3.0",
+    "jest-junit": "^14.0.1",
+    "jest-resolve": "^29.3.0",
+    "jest-watch-typeahead": "^2.2.0",
+    "jwt-decode": "^3.1.2",
     "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.6.1",
-    "mocha-junit-reporter": "^2.0.2",
-    "postcss": "^8.4.14",
+    "mocha-junit-reporter": "^2.1.1",
+    "postcss": "^8.4.18",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^7.0.1",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.7.2",
+    "postcss-preset-env": "^7.8.2",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
     "prompts": "^2.4.2",
-    "react-i18next": "^11.18.1",
+    "react-i18next": "^12.0.0",
     "react-refresh": "^0.14.0",
     "resolve": "^1.22.1",
-    "resolve-url-loader": "^4.0.0",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.7",
-    "source-map-loader": "^3.0.0",
+    "resolve-url-loader": "^5.0.0",
+    "sass-loader": "^13.1.0",
+    "semver": "^7.3.8",
+    "source-map-loader": "^4.0.1",
     "start-server-and-test": "^1.14.0",
     "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.3",
-    "typescript": "^4.7.4",
-    "web-vitals": "^2.1.4",
-    "webpack": "^5.73.0",
-    "webpack-dev-server": "^4.9.3",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.5.3"
+    "terser-webpack-plugin": "^5.3.6",
+    "typescript": "^4.8.4",
+    "web-vitals": "^3.0.4",
+    "webpack": "^5.74.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-manifest-plugin": "^5.0.0",
+    "workbox-webpack-plugin": "^6.5.4"
   }
 }

public/config.js

@@ -1,12 +1,6 @@
 const defaultConfig = {
   version: "0.1.0",
   name: "React-starter-kit",
-  services: {
-    fake: {
-      root: "http://localhost:9600/fake",
-      trucks: "trucks",
-    },
-  },
   // oidc: {
   //   url: "private_url",
   //   realm: "inforit",

public/i18n/en.json

@@ -11,8 +11,7 @@
     "home": "home",
     "about": "about",
     "counter": "counter",
-    "tenders": "tenders (with auth)",
-    "trucks": "trucks (contract api)"
+    "tenders": "tenders (with auth)"
   },
   "about": {
     "title": "About"

public/i18n/nl.json

@@ -11,8 +11,7 @@
     "home": "home",
     "about": "over ons",
     "counter": "teller",
-    "tenders": "aanbestedingen (met auth)",
-    "trucks": "trucks (contract api)"
+    "tenders": "aanbestedingen (met auth)"
   },
   "about": {
     "title": "Over ons"

src/Routes.tsx

@@ -4,7 +4,6 @@ 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 = {};
 
@@ -13,11 +12,10 @@ export const ROUTE_KEYS = {
   about: "about",
   counter: "counter",
   tenders: "tenders",
-  trucks: "trucks",
 };
 
 export const AppRoutes: FunctionComponent<Props> = () => {
-  const { home, about, counter, tenders, trucks } = ROUTE_KEYS;
+  const { home, about, counter, tenders } = ROUTE_KEYS;
   return (
     <Routes>
       <Route path={home} element={<HomeContainer />} />
@@ -32,7 +30,6 @@ 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

@@ -1,34 +0,0 @@
-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

@@ -1,4 +1,3 @@
-import React from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { createGlobalStyle } from "styled-components";

src/infrastructure/config/RunTimeConfig.ts

@@ -4,13 +4,6 @@ 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, tenders, trucks } = ROUTE_KEYS;
+  const { home, about, counter } = ROUTE_KEYS;
   return (
     <div className={className}>
       <h1>{translate("navBar.intro")}</h1>
@@ -41,12 +41,9 @@ 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 />