feat(frontend): upgrade React v17 --> v18 (#1542)

* refactor: remove matomo init from index.html * build(frontend): add @hotosm/ui for matomo component, remove unused deps * build: update node version for debug/prod frontend 18 --> 20 * docs: update npm package.json scripts for dev * build: add shoelace peerdep, upgrade hotosm/ui to latest beta * build: add option to override hotosm/ui during development * build: update dependencies to work with react 18 * test: remove trial tests for button component * fix: update deprecations react --> v18, redux --> v5
hotosm · Jun 2, 2024 · 2ef801c · 2ef801c
1 parent 7522348
commit 2ef801c
Show file tree

Hide file tree

Showing 22 changed files with 6,958 additions and 5,952 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -73,12 +73,12 @@ services:
     volumes:
       - fmtm_logs:/opt/logs
       - fmtm_tiles:/opt/tiles
-      - ./src/backend/pyproject.toml:/opt/pyproject.toml
+      - ./src/backend/pyproject.toml:/opt/pyproject.toml:ro
       - ./src/backend/app:/opt/app
-      - ./src/backend/tests:/opt/tests
-      # - ../osm-fieldwork/osm_fieldwork:/home/appuser/.local/lib/python3.10/site-packages/osm_fieldwork
-      # - ../osm-rawdata/osm_rawdata:/home/appuser/.local/lib/python3.10/site-packages/osm_rawdata
-      # - ../fmtm-splitter/fmtm_splitter:/home/appuser/.local/lib/python3.10/site-packages/fmtm_splitter
+      - ./src/backend/tests:/opt/tests:ro
+      # - ../osm-fieldwork/osm_fieldwork:/home/appuser/.local/lib/python3.10/site-packages/osm_fieldwork:ro
+      # - ../osm-rawdata/osm_rawdata:/home/appuser/.local/lib/python3.10/site-packages/osm_rawdata:ro
+      # - ../fmtm-splitter/fmtm_splitter:/home/appuser/.local/lib/python3.10/site-packages/fmtm_splitter:ro
     depends_on:
       fmtm-db:
         condition: service_healthy
@@ -118,6 +118,7 @@ services:
     volumes:
       - ./src/frontend:/app
       - /app/node_modules/
+      # - ../ui:/app/node_modules/@hotosm/ui:ro
     environment:
       - VITE_API_URL=${API_URL_OVERRIDE:-http://api.${FMTM_DOMAIN}:${FMTM_DEV_PORT:-7050}}
     ports:

diff --git a/docs/dev/Frontend.md b/docs/dev/Frontend.md
@@ -40,7 +40,7 @@ For details on how to run the API first, please see:
 
 ### 2C. Run the project
 
-Run the frontend with hot-reloading: `npm run start:live`
+Run the frontend with hot-reloading: `npm run dev`
 
 The frontend should now be accessible at: `http://127.0.0.1:<PORT_NUMBER>`
 

diff --git a/src/frontend/debug.dockerfile b/src/frontend/debug.dockerfile
@@ -1,9 +1,9 @@
-FROM docker.io/node:18-slim
+FROM docker.io/node:20-slim
 WORKDIR /app
 COPY ./package.json ./pnpm-lock.yaml ./
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
 RUN pnpm install
 ENV NODE_ENV development
-ENTRYPOINT ["npm", "run", "start:live"]
+ENTRYPOINT ["pnpm", "run", "dev"]
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -16,35 +16,6 @@
     <link rel="icon" href="/favicon.ico" sizes="48x48" />
     <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
-
-    <!-- Matomo -->
-    <script type="text/javascript">
-      if (window.location.hostname === 'fmtm.hotosm.org') {
-        console.log('Adding Matomo tracking to fmtm.hotosm.org');
-
-        var _paq = (window._paq = window._paq || []);
-        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-        _paq.push(['requireConsent']);
-        _paq.push(['setDomains', ['fmtm.hotosm.org']]);
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']); // Tracks downloads
-        _paq.push(['trackVisibleContentImpressions']); // Tracks content blocks
-        (function () {
-          var u = '//matomo.hotosm.org/';
-          _paq.push(['setTrackerUrl', u + 'matomo.php']);
-          _paq.push(['setSiteId', '28']);
-          var d = document,
-            g = d.createElement('script'),
-            s = d.getElementsByTagName('script')[0];
-          g.async = true;
-          g.src = u + 'matomo.js';
-          s.parentNode.insertBefore(g, s);
-        })();
-      } else {
-        console.log('Matomo tracking disabled: Not on fmtm.hotosm.org domain.');
-      }
-    </script>
-    <!-- End Matomo Code -->
   </head>
 
   <body>

diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -5,8 +5,8 @@
     "build": "vite build",
     "build:dev": "vite build --mode development",
     "build:start": "cd dist && PORT=8080 npx serve",
-    "start": "env-cmd -f .env.dev vite dev",
-    "start:live": "vite dev",
+    "dev": "vite",
+    "dev:dotenv": "env-cmd -f .env.dev vite",
     "test": "vitest",
     "test:unit": "vitest",
     "test:coverage": "vitest --coverage",
@@ -21,12 +21,10 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.43.0",
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^12.1.5",
     "@types/jest": "^29.5.5",
     "@types/node": "^20.12.5",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
     "@vitejs/plugin-react": "^4.1.0",
@@ -55,10 +53,7 @@
     "workbox-window": "^7.1.0"
   },
   "dependencies": {
-    "@capacitor/geolocation": "^5.0.6",
-    "@capacitor/motion": "^5.0.6",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@hotosm/ui": "0.2.0-b2",
     "@mui/base": "5.0.0-beta.18",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.134",
@@ -71,7 +66,7 @@
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-switch": "^1.0.3",
-    "@reduxjs/toolkit": "^1.9.1",
+    "@reduxjs/toolkit": "^2.2.5",
     "@sentry/react": "^7.59.3",
     "@tiptap/extension-bullet-list": "^2.2.4",
     "@tiptap/extension-document": "^2.2.4",
@@ -100,19 +95,22 @@
     "pako": "^2.1.0",
     "pmtiles": "^3.0.5",
     "qrcode-generator": "^1.4.4",
-    "react": "^17.0.2",
-    "react-datepicker": "^6.1.0",
-    "react-dom": "^17.0.2",
-    "react-lazy-load-image-component": "^1.5.6",
-    "react-loading-skeleton": "^3.1.0",
-    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.6.0",
+    "react": "^18.3.1",
+    "react-datepicker": "^6.9.0",
+    "react-dom": "^18.3.1",
+    "react-lazy-load-image-component": "^1.6.0",
+    "react-loading-skeleton": "^3.3.1",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.23.1",
     "react-spinners": "^0.13.8",
     "recharts": "^2.10.3",
-    "redux": "^4.2.0",
+    "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.1"
+  },
+  "peerDependencies": {
+    "@shoelace-style/shoelace": "^2.15.1"
   }
 }
diff --git a/src/frontend/playwright.config.ts b/src/frontend/playwright.config.ts
@@ -70,7 +70,7 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   // webServer: {
-  //   command: 'npm run start',
+  //   command: 'npm run dev',
   //   url: 'http://127.0.0.1:3000',
   //   reuseExistingServer: !process.env.CI,
   // },