WIP update router and eslint + vite instead of cra

dev/docker-compose.dev.full.test.yml

@@ -23,7 +23,7 @@ services:
       BASE_URL: "${BASE_URL}"
       COMPLETE_DATA_BUCKET: "${COMPLETE_DATA_BUCKET}"
       COUNTRY_DATA_BUCKET: "${COUNTRY_DATA_BUCKET}"
-      REACT_APP_RECAPTCHA_SITE_KEY: "${REACT_APP_RECAPTCHA_SITE_KEY}"
+      REACT_APP_RECAPTCHA_SITE_KEY: "${VITE_APP_RECAPTCHA_SITE_KEY}"
   data:
     command: "npm run dev"
     volumes:

dev/docker-compose.dev.full.yml

@@ -26,7 +26,7 @@ services:
       BASE_URL: "${BASE_URL}"
       COMPLETE_DATA_BUCKET: "${COMPLETE_DATA_BUCKET}"
       COUNTRY_DATA_BUCKET: "${COUNTRY_DATA_BUCKET}"
-      REACT_APP_RECAPTCHA_SITE_KEY: "${REACT_APP_RECAPTCHA_SITE_KEY}"
+      REACT_APP_RECAPTCHA_SITE_KEY: "${VITE_APP_RECAPTCHA_SITE_KEY}"
       NODE_ENV: "dev"
   data:
     command: "npm run dev"
@@ -50,7 +50,7 @@ services:
       REACT_APP_PUBLIC_MAPBOX_TOKEN: "${REACT_APP_PUBLIC_MAPBOX_TOKEN}"
       REACT_APP_POLICY_PUBLIC_ID: "${REACT_APP_POLICY_PUBLIC_ID}"
       REACT_APP_COOKIE_CONSENT_PUBLIC_ID: "${REACT_APP_COOKIE_CONSENT_PUBLIC_ID}"
-      REACT_APP_RECAPTCHA_SITE_KEY: "${REACT_APP_RECAPTCHA_SITE_KEY}"
+      VITE_APP_RECAPTCHA_SITE_KEY: "${VITE_APP_RECAPTCHA_SITE_KEY}"
       ENABLE_LOCAL_AUTH: "true"
       DISEASE_NAME: "${DISEASE_NAME}"
   localstack:

dev/docker-compose.dev.yml

@@ -30,9 +30,9 @@ services:
       # We can't use curator:3001 here because that's an internal DNS,
       # not accessible from the user's browser.
       # In production simply /auth/google would work.
-      REACT_APP_LOGIN_URL: "http://localhost:3001/auth/google"
-      REACT_APP_PUBLIC_MAPBOX_TOKEN: "${REACT_APP_PUBLIC_MAPBOX_TOKEN}"
-      REACT_APP_POLICY_PUBLIC_ID: "${REACT_APP_POLICY_PUBLIC_ID}"
-      REACT_APP_COOKIE_CONSENT_PUBLIC_ID: "${REACT_APP_COOKIE_CONSENT_PUBLIC_ID}"
-      REACT_APP_RECAPTCHA_SITE_KEY: "${REACT_APP_RECAPTCHA_SITE_KEY}"
-      REACT_APP_DISEASE_NAME: "${REACT_APP_DISEASE_NAME}"
+      VITE_APP_LOGIN_URL: "http://localhost:3001/auth/google"
+      VITE_APP_PUBLIC_MAPBOX_TOKEN: "${REACT_APP_PUBLIC_MAPBOX_TOKEN}"
+      VITE_APP_POLICY_PUBLIC_ID: "${REACT_APP_POLICY_PUBLIC_ID}"
+      VITE_APP_COOKIE_CONSENT_PUBLIC_ID: "${REACT_APP_COOKIE_CONSENT_PUBLIC_ID}"
+      VITE_APP_RECAPTCHA_SITE_KEY: "${VITE_APP_RECAPTCHA_SITE_KEY}"
+      VITE_APP_DISEASE_NAME: "${REACT_APP_DISEASE_NAME}"

dev/docker-compose.yml

@@ -93,10 +93,10 @@ services:
     environment:
       PORT: "3002"
       # UI and API run on different ports in dev, make the custom proxy work.
-      REACT_APP_PROXY_URL: "http://curator:3001"
-      REACT_APP_DISEASE_NAME: "${DISEASE_NAME}"
-      REACT_APP_MAP_LINK_LOCAL: "${MAP_LINK_LOCAL}"
-      REACT_APP_MAP_LINK_LOCAL_E2E: "${MAP_LINK_LOCAL_E2E}"
-      REACT_APP_MAP_LINK_DEV: "${MAP_LINK_DEV}"
-      REACT_APP_MAP_LINK_QA: "${MAP_LINK_QA}"
-      REACT_APP_MAP_LINK_PROD: "${MAP_LINK_PROD}"
+      VITE_APP_PROXY_URL: "http://curator:3001"
+      VITE_APP_DISEASE_NAME: "${DISEASE_NAME}"
+      VITE_APP_MAP_LINK_LOCAL: "${MAP_LINK_LOCAL}"
+      VITE_APP_MAP_LINK_LOCAL_E2E: "${MAP_LINK_LOCAL_E2E}"
+      VITE_APP_MAP_LINK_DEV: "${MAP_LINK_DEV}"
+      VITE_APP_MAP_LINK_QA: "${MAP_LINK_QA}"
+      VITE_APP_MAP_LINK_PROD: "${MAP_LINK_PROD}"

verification/curator-service/Dockerfile

@@ -1,7 +1,7 @@
 # This dockerfile builds the curator API service and its UI in a single container.
 # The UI is served as a static resource from the curator API service express server.
 # Security best practices are followed and a trimmed down image is used for production serving.
-FROM node:16.18.0 as builder
+FROM node:18.18.0 as builder
 
 # Build the curator service.
 WORKDIR /usr/src/app/verification/curator-service/api
@@ -42,12 +42,12 @@ ENV REACT_APP_PUBLIC_MAPBOX_TOKEN "pk.eyJ1IjoiaGVhbHRobWFwIiwiYSI6ImNrYzNjczdmcz
 ENV REACT_APP_POLICY_PUBLIC_ID "89575059"
 ENV REACT_APP_COOKIE_CONSENT_PUBLIC_ID "2070778"
 ENV REACT_APP_RECAPTCHA_SITE_KEY "6LdhjvwgAAAAALrxavR_zR58kxxap07D4ba8X-jE"
-ENV REACT_APP_DISEASE_NAME "Mpox"
-ENV REACT_APP_MAP_LINK_DEV "http://dev-map.marburg.global.health/"
-ENV REACT_APP_MAP_LINK_LOCAL "http://dev-map.marburg.global.health/"
-ENV REACT_APP_MAP_LINK_LOCAL_E2E "http://dev-map.marburg.global.health/"
-ENV REACT_APP_MAP_LINK_PROD "http://dev-map.marburg.global.health/"
-ENV REACT_APP_MAP_LINK_QA "http://map.marburg.global.health/"
+ENV VITE_APP_DISEASE_NAME "Mpox"
+ENV VITE_APP_MAP_LINK_DEV "http://dev-map.marburg.global.health/"
+ENV VITE_APP_MAP_LINK_LOCAL "http://dev-map.marburg.global.health/"
+ENV VITE_APP_MAP_LINK_LOCAL_E2E "http://dev-map.marburg.global.health/"
+ENV VITE_APP_MAP_LINK_PROD "http://dev-map.marburg.global.health/"
+ENV VITE_APP_MAP_LINK_QA "http://map.marburg.global.health/"
 
 RUN npm run build
 

verification/curator-service/ui/.eslintrc

@@ -42,13 +42,12 @@
     {
       "files": ["**/*.ts", "**/*.tsx"],
       "plugins": ["@typescript-eslint"],
-      "extends": [        
-        "react-app",
+      "extends": [
         "eslint:recommended", 
         "plugin:@typescript-eslint/recommended",        
         "plugin:cypress/recommended",
         "prettier", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-        "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array        
+        "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array
       ]
     }
   ],

verification/curator-service/ui/.eslintrc.json

@@ -0,0 +1,59 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],  
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    "parserOptions": {
+    "ecmaVersion": 2017,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },  
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+    "rules": {
+    "no-bitwise": [
+      "error"
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    "@typescript-eslint/no-redeclare": "off",
+    "@typescript-eslint/no-unused-expressions": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-var-requires": "off"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "plugins": ["@typescript-eslint"],
+      "extends": [
+        "eslint:recommended", 
+        "plugin:@typescript-eslint/recommended",        
+        "plugin:cypress/recommended",
+        "prettier", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+        "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array
+      ]
+    }
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

verification/curator-service/ui/Dockerfile

@@ -1,5 +1,5 @@
 # Dev docker file for curator UI.
-FROM node:16.18.0
+FROM node:18.18.0
 
 WORKDIR /usr/src/app/verification/curator-service/ui
 # Install app dependencies

verification/curator-service/ui/public/index.html → verification/curator-service/ui/index.html

@@ -3,31 +3,31 @@
 
 <head>  
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="/favicon.ico" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Epidemiology data ingestion and curation" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
 
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:site" content="@globaldothealth" />
   <meta name="twitter:creator" content="@globaldothealth" />
   <meta property="twitter:description" content="Epidemiology data ingestion and curation" />
   <meta property="twitter:title" content="Global.health | a Data Science Initiative" />
-  <meta property="twitter:image" content="%PUBLIC_URL%/Gh-ogimage.png" />
+  <meta property="twitter:image" content="/Gh-ogimage.png" />
   <meta property="og:url" content="https://data.covid-19.global.health/" />
   <meta property="og:title" content="Global.health | a Data Science Initiative" />
   <meta property="og:description" content="Epidemiology data ingestion and curation" />
-  <meta property="og:image" content="%PUBLIC_URL%/Gh-ogimage.png" />
-  <meta property="og:image:url" content="%PUBLIC_URL%/Gh-ogimage.png" />
+  <meta property="og:image" content="/Gh-ogimage.png" />
+  <meta property="og:image:url" content="/Gh-ogimage.png" />
   <meta name="twitter:card" content="Epidemiology data ingestion and curation" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="manifest" href="/manifest.json" />
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -53,6 +53,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 
 </html>