hotosm · royallsilwallz · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024 · Aug 20, 2024
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -33,7 +33,7 @@ jobs:
           no_output_timeout: 20m
           command: |
             cd ${CIRCLE_WORKING_DIRECTORY}/frontend/
-            CI=true yarn test -w 1 --silent
+            CI=true yarn test --silent
             CI=true GENERATE_SOURCEMAP=false yarn build
 
   backend-code-check-PEP8:
@@ -255,7 +255,7 @@ jobs:
             export TM_ENVIRONMENT=<< parameters.stack_name >>
             yarn
             CI=true GENERATE_SOURCEMAP=true yarn build
-            aws s3 sync build/ s3://tasking-manager-<< parameters.stack_name >>-react-app --delete --cache-control max-age=31536000
+            aws s3 sync dist/ s3://tasking-manager-<< parameters.stack_name >>-react-app --delete --cache-control max-age=31536000
             aws s3 cp s3://tasking-manager-<< parameters.stack_name >>-react-app s3://tasking-manager-<< parameters.stack_name >>-react-app --recursive --exclude "*" --include "*.html" --metadata-directive REPLACE --cache-control no-cache --content-type text/html
             export DISTRIBUTION_ID=`aws cloudformation list-exports --output=text --query "Exports[?Name=='tasking-manager-<< parameters.stack_name >>-cloudfront-id-${AWS_REGION}'].Value"`
             aws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID --paths "/*"
@@ -452,7 +452,7 @@ workflows:
               value: << pipeline.git.branch >>
         - or:
           ## - equal: [ develop, << pipeline.git.branch >> ] # Disabled while we use dev setup for e2e testing
-          - equal: [ dev-switch-to-sandbox, << pipeline.git.branch >> ]
+          - equal: [ typescript-vite, << pipeline.git.branch >> ]
     jobs:
       - database-backup:
           name: Backup development database

diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,7 @@ tasking-manager*.env
 
 # Generated frontend #
 frontend/node_modules/
-frontend/build/
+frontend/dist/
 frontend/public/static/
 frontend/assets/styles/
 frontend/package-lock.json

diff --git a/TODOS.md b/TODOS.md
@@ -0,0 +1,8 @@
+# TODOS
+
+## FRONTEND
+
+### Typescript Vite Migration ([#6715](https://github.com/hotosm/tasking-manager/pull/6715))
+
+- [ ] Resolve eslint (yarn lint) errors
+- [ ] After all eslint errors are addressed, prefix `npm run lint && ` to `test` & `test:ui` scripts in `package.json`
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -0,0 +1,37 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.vitest,
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    ...pluginReact.configs.flat['jsx-runtime'],
+  },
+  {
+    plugins: {
+      'react-hooks': pluginReactHooks,
+    },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: 'off',
+    },
+  },
+  eslintConfigPrettier,
+];
diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico" />
+    <link rel="shortcut icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- for Google -->
@@ -27,7 +27,7 @@
       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.
@@ -36,12 +36,15 @@
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
+
+      %PUBLIC_URL% is now no longer used, it is automatically refactored to the correct path during the build process.
     -->
     <title>%REACT_APP_ORG_CODE% Tasking Manager</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <div
       id="action-root"
       class="w-100 h-100 vh-minus-122-ns"

diff --git a/frontend/package.json b/frontend/package.json
@@ -2,7 +2,7 @@
   "name": "TaskingManager-frontend",
   "version": "0.1.0",
   "license": "BSD-2-Clause",
-  "private": false,
+  "type": "module",
   "dependencies": {
     "@hotosm/id": "^2.30.2",
     "@hotosm/iso-countries-languages": "^1.1.2",
@@ -12,9 +12,10 @@
     "@mapbox/mapbox-gl-language": "^0.10.1",
     "@placemarkio/geo-viewport": "^1.0.2",
     "@rapideditor/rapid": "^2.4.2",
+    "@redux-devtools/extension": "^3.3.0",
     "@sentry/react": "^7.102.0",
-    "@tanstack/react-query": "^4.29.7",
-    "@tanstack/react-query-devtools": "^4.29.7",
+    "@tanstack/react-query": "^5.52.0",
+    "@tanstack/react-query-devtools": "^5.62.8",
     "@tanstack/react-table": "^8.20.1",
     "@tmcw/togeojson": "^5.8.1",
     "@turf/area": "^6.5.0",
@@ -30,7 +31,7 @@
     "axios": "^1.6.7",
     "chart.js": "^4.4.1",
     "chartjs-adapter-date-fns": "^3.0.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.6.0",
     "dompurify": "^3.0.9",
     "downshift-hooks": "^0.8.1",
     "final-form": "^4.20.10",
@@ -39,7 +40,7 @@
     "humanize-duration": "^3.31.0",
     "mapbox-gl": "^1.13.3",
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
-    "marked": "^4.3.0",
+    "marked": "^14.0.0",
     "osmtogeojson": "^3.0.0-beta.5",
     "prop-types": "^15.8.1",
     "query-string": "^8.2.0",
@@ -66,7 +67,7 @@
     "redux-thunk": "^2.4.2",
     "sass": "^1.71.0",
     "short-number": "^1.0.7",
-    "shpjs": "^4.0.4",
+    "shpjs": "^6.1.0",
     "slug": "^8.2.3",
     "swiper": "^11.1.4",
     "tachyons": "^4.12.0",
@@ -85,18 +86,19 @@
     "copy-static": "bash -c \"mkdir -p public/static/rapid; if ! (test -a public/static/rapid/rapid.js); then cp -R node_modules/@rapideditor/rapid/dist/* public/static/rapid; fi\"",
     "copy-id-static": "bash -c \"mkdir -p public/static/id; if ! (test -a public/static/id/data); then cp -R node_modules/@hotosm/id/dist/data public/static/id && cp -R node_modules/@hotosm/id/dist/img public/static/id && cp -R node_modules/@hotosm/id/dist/locales public/static/id; fi;\"",
     "update-static": "bash -c \"mkdir -p public/static/rapid; cp -R node_modules/@rapideditor/rapid/dist/* public/static/rapid;\"",
-    "update-id-static": "bash -c \"mkdir -p public/static/id; cp -R node_modules/@hotosm/id/dist/data public/static/id && cp -R node_modules/@hotosm/id/dist/img public/static/id && cp -R node_modules/@hotosm/id/dist/locales public/static/id;\"",    "patch-rapid": "bash -c \"cp patch/rapid-imagery.min.json public/static/rapid/data/imagery.min.json\"",
+    "update-id-static": "bash -c \"mkdir -p public/static/id; cp -R node_modules/@hotosm/id/dist/data public/static/id && cp -R node_modules/@hotosm/id/dist/img public/static/id && cp -R node_modules/@hotosm/id/dist/locales public/static/id;\"",
+    "patch-rapid": "bash -c \"cp patch/rapid-imagery.min.json public/static/rapid/data/imagery.min.json\"",
     "preparation": "bash -c \"if (test -a ../tasking-manager.env); then grep -hs ^ ../tasking-manager.env .env.expand > .env; else cp .env.expand .env; fi\"",
-    "start": "npm run preparation && npm run copy-static && npm run copy-id-static && npm run patch-rapid && craco start",
-    "build": "npm run preparation && npm run update-static && npm run update-id-static && npm run patch-rapid && craco build && npm run sentry:sourcemaps",    "prettier": "prettier --write 'src/**/*.js'",
-    "lint": "eslint src",
-    "test": "npm run lint && craco test --env=jsdom",
+    "dev": "vite",
+    "start": "npm run preparation && npm run copy-static && npm run copy-id-static && npm run patch-rapid && vite",
+    "build": "npm run preparation && npm run update-static && npm run update-id-static && npm run patch-rapid && vite build && npm run sentry:sourcemaps",
+    "prettier": "prettier --write ./src/",
+    "lint": "eslint ./src/",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
     "coverage": "npm run test -- --coverage --watchAll=false",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "sentry:sourcemaps": "if sentry-cli info; then sentry-cli sourcemaps inject --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./build && sentry-cli sourcemaps upload --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./build; fi"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "sentry:sourcemaps": "if sentry-cli info; then sentry-cli sourcemaps inject --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./dist && sentry-cli sourcemaps upload --org humanitarian-openstreetmap-tea --project taskingmanager-frontend ./dist; fi"
   },
   "browserslist": {
     "production": [
@@ -112,20 +114,42 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@craco/craco": "^7.1.0",
+    "@eslint/js": "^9.19.0",
     "@sentry/cli": "^2.28.6",
     "@tanstack/eslint-plugin-query": "^4.29.8",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/chart.js": "^2.9.41",
+    "@types/dompurify": "^3.0.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-redux": "^7.1.34",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-test-renderer": "^18.3.0",
+    "@types/slug": "^5.0.9",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitest/ui": "2.1.8",
     "combine-react-intl-messages": "^4.0.0",
-    "jest-canvas-mock": "^2.5.2",
-    "msw": "^1.3.2",
-    "prettier": "^2.8.8",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.14.0",
+    "happy-dom": "^16.5.2",
+    "msw": "^2.7.0",
+    "prettier": "^3.4.2",
     "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.1",
     "react-test-renderer": "^18.2.0",
-    "source-map-explorer": "^2.5.3"
+    "source-map-explorer": "^2.5.3",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.21.0",
+    "vite": "^5.4.2",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^2.1.8",
+    "vitest-canvas-mock": "^0.3.3"
   },
   "resolutions": {
     "dom-accessibility-api": "0.5.14"
@@ -142,6 +166,7 @@
     ]
   },
   "volta": {
-    "node": "18.19.1"
+    "node": "18.19.1",
+    "yarn": "1.22.19"
   }
 }
diff --git a/frontend/prettier.config.js b/frontend/prettier.config.js
@@ -1,4 +1,5 @@
-module.exports = {
+// @type {import("prettier").Config}
+const config = {
   printWidth: 100,
   singleQuote: true,
   trailingComma: 'all',
@@ -7,3 +8,5 @@ module.exports = {
   tabWidth: 2,
   semi: true,
 };
+
+export default config;
diff --git a/frontend/src/App.js b/frontend/src/App.js