EyeSeeTea · adrianq · Apr 9, 2026 · Mar 26, 2026 · Mar 26, 2026 · Mar 26, 2026
diff --git a/.env b/.env
@@ -1,5 +1,7 @@
 BROWSER=false
 PORT=8081
+VITE_PORT=8081
 SKIP_PREFLIGHT_CHECK=true
-REACT_APP_DHIS2_BASE_URL=https://dev.eyeseetea.com/play
-REACT_APP_LOGO_PATH=
+
+VITE_DHIS2_BASE_URL=https://dev.eyeseetea.com/play
+VITE_LOGO_PATH=
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,10 @@ cypress/videos/
 # Custom
 bak
 dist
+
+# Yarn 4
+.yarn/cache
+.yarn/install-state.gz
+.yarn/unplugged
+.yarn/build-state.yml
+.pnp.*
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.14.0
+v22.22.0
diff --git a/.travis.yml b/.travis.yml
@@ -30,7 +30,7 @@ install:
     - yarn cy:verify
     - yarn build
 script:
-    - PORT=8081 REACT_APP_DHIS2_BASE_URL=http://localhost:8080 REACT_APP_CYPRESS=true yarn start &
+    - VITE_PORT=8081 VITE_DHIS2_BASE_URL=http://localhost:8080 REACT_APP_CYPRESS=true yarn start &
     - yarn wait-on http-get://localhost:8081
     - yarn wait-on http-get://localhost:8080
     - CYPRESS_EXTERNAL_API=http://localhost:8080 CYPRESS_ROOT_URL=http://localhost:8081 yarn cy:e2e:run --record --key $CYPRESS_KEY

diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/README.md b/README.md
@@ -1,15 +1,61 @@
 ## Setup
 
 ```
+$ nvm use # uses node version in .nvmrc
 $ yarn install
 ```
 
+This project uses **Yarn 4** managed by **Corepack** and declares:
+
+```json
+"packageManager": "yarn@4.12.0"
+```
+
+### If you have Yarn 1 globally and see a packageManager error
+
+If running `yarn` shows an error like:
+
+> This project's package.json defines "packageManager": "yarn@4.12.0". However the current global version of Yarn is 1.22.x.
+
+do the following once on your machine:
+
+```bash
+# 1) Remove global Yarn (optional but recommended)
+npm uninstall -g yarn
+
+# 2) Enable Corepack (shipped with Node 16.9+ / 14.19+)
+corepack enable
+
+# 3) Set Yarn 1.x as the default for projects WITHOUT packageManager
+corepack prepare yarn@1.22.22 --activate
+```
+
+Then, in this project (normal case, once Corepack is enabled):
+
+```bash
+nvm use                 # use the version from .nvmrc
+yarn install
+```
+
+If for some reason `yarn --version` still shows `1.x` inside this repo (for example due to old Corepack state), prepare the Yarn 4 binary without changing the global default or `package.json`:
+
+```bash
+COREPACK_ENABLE_AUTO_PIN=0 corepack prepare yarn@4.12.0
+yarn --version          # should now print 4.12.0
+yarn install
+```
+
+After this:
+
+-   This repo will use **Yarn 4.12.0**.
+-   Other repos without `packageManager` will keep using **Yarn 1.22.22** (or whatever you activated with `corepack prepare`).
+
 ## Development
 
 Start development server:
 
 ```
-$ PORT=8082 REACT_APP_DHIS2_BASE_URL="https://play.dhis2.org/dev" yarn start
+$ VITE_PORT=8082 VITE_DHIS2_BASE_URL="https://play.dhis2.org/dev" yarn start
 ```
 
 Linting:
@@ -85,7 +131,7 @@ const SomeComponent: React.FunctionComponent = () => {
 
 ### App logo
 
-Add `REACT_APP_LOGO_PATH` to change the path from where the app is loading the logo image on Homepage. Since the root path is `public`, the variable value must be preceded by `img/`. By default, if the value is left blank, WHO logo will show up.
+Add `VITE_LOGO_PATH` to change the path from where the app is loading the logo image on Homepage. Since the root path is `public`, the variable value must be preceded by `img/`. By default, if the value is left blank, WHO logo will show up.
 
 ### Build as a library
 

diff --git a/craco.config.js b/craco.config.js
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="/favicon.ico?v=1" />
+        <link type="text/css" rel="stylesheet" href="/includes/material-design-icons/material-icons.css" />
+        <link type="text/css" rel="stylesheet" href="/includes/roboto-font.css" />
+        <link
+            href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
+            integrity="sha384-X7L1bhgb36bF1iFvaqvhgpaGpayKM+vXNNYRlF89BFA5s3vi1qZ8EX9086RlZjy1"
+            rel="stylesheet"
+            crossorigin="anonymous"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta name="theme-color" content="#000000" />
+        <title>Training App</title>
+        <script
+            src="https://code.jquery.com/jquery-1.11.1.min.js"
+            integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE="
+            crossorigin="anonymous"
+        ></script>
+    </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>
+    </body>
+</html>
diff --git a/jest.config.js b/jest.config.js
diff --git a/package.json b/package.json
@@ -11,21 +11,23 @@
         "type": "git",
         "url": "git+https://github.com/eyeseetea/training-app.git"
     },
+    "packageManager": "yarn@4.12.0",
+    "zipName": "training-app",
     "peerDependencies": {
         "react": ">=17",
         "react-dom": ">=17"
     },
     "dependencies": {
-        "@dhis2/app-runtime": "3.2.4",
+        "@dhis2/app-runtime": "3.12.0",
         "@dhis2/d2-i18n": "1.1.3",
         "@dhis2/d2-i18n-extract": "1.0.8",
         "@dhis2/d2-i18n-generate": "1.2.0",
         "@dhis2/d2-ui-core": "7.3.3",
         "@dhis2/d2-ui-forms": "7.3.3",
         "@dhis2/ui": "7.4.3",
-        "@eyeseetea/d2-api": "1.9.2",
+        "@eyeseetea/d2-api": "1.16.0",
         "@eyeseetea/d2-ui-components": "2.13.0-beta.2",
-        "@eyeseetea/feedback-component": "0.1.3-beta.3",
+        "@eyeseetea/feedback-component": "0.2.0",
         "@ffmpeg/core": "0.10.0",
         "@ffmpeg/ffmpeg": "0.10.1",
         "@material-ui/core": "4.12.3",
@@ -38,13 +40,13 @@
         "d2": "31.10.0",
         "d2-manifest": "1.0.0",
         "file-saver": "2.0.5",
-        "file-type": "16.5.3",
+        "file-type": "21.3.2",
         "font-awesome": "4.7.0",
         "history": "5.0.1",
-        "jszip": "3.7.1",
+        "jszip": "3.8.0",
         "lodash": "4.17.21",
         "md5": "^2.3.0",
-        "postcss-rtl": "1.7.3",
+        "postcss-rtl": "2.0.0",
         "purify-ts": "1.1.0",
         "purify-ts-extra-codec": "0.6.0",
         "react": "17.0.2",
@@ -62,54 +64,52 @@
         "styled-jsx": "4.0.1"
     },
     "scripts": {
-        "build-lib": "mkdir -p dist && yarn build-lib-locales && yarn build-lib-tsc && node ./build-lib.js",
+        "build-lib": "vite build --mode library && mkdir -p dist && yarn build-lib-locales && yarn build-lib-tsc && node ./build-lib.js",
+        "build:lib": "yarn build-lib",
         "build-lib-tsc": "tsc --build tsconfig.lib.json",
         "build-lib-locales": "yarn localize && mkdir -p dist/locales && cp -a src/locales/* dist/locales",
-        "start": "react-scripts start",
-        "craco-start": "craco start",
+        "start": "vite --strictPort",
         "prebuild": "yarn localize && yarn test",
-        "build-folder": "rm -rf build/ && d2-manifest package.json manifest.webapp && react-scripts build && yarn run manifest && cp -r i18n icon.png build",
-        "build": "REACT_APP_DHIS2_BASE_URL='' REACT_APP_DHIS2_AUTH='' yarn build-folder && cd build && zip --quiet -r ../${npm_package_name##*/}.zip *",
-        "test": "jest --passWithNoTests",
+        "build-folder": "rm -rf build/ && d2-manifest package.json manifest.webapp && vite build --outDir=build && yarn run manifest && cp -r i18n icon.png build",
+        "build": "yarn localize && VITE_DHIS2_BASE_URL='' VITE_DHIS2_AUTH='' yarn build-folder && rm -f ${npm_package_zipName:-training-app}.zip && cd build && zip --quiet -r ../${npm_package_zipName:-training-app}.zip *",
+        "test": "vitest run --passWithNoTests",
+        "test-watch": "vitest watch",
         "lint": "eslint src cypress --ext .js,.jsx,.ts,.tsx",
-        "eject": "react-scripts eject",
         "prettify": "prettier \"./**/*.{js,jsx,json,css,ts,tsx}\" --write",
         "extract-pot": "yarn d2-i18n-extract -p src/ -o i18n/",
         "localize": "yarn update-po && d2-i18n-generate -n training-app -p ./i18n/ -o ./src/locales/",
-        "update-po": "yarn extract-pot && for pofile in i18n/*.po; do msgmerge --backup=off -U $pofile i18n/en.pot; done",
+        "update-po": "yarn extract-pot && find i18n/ -name '*.po' -exec msgmerge --backup=off -U {} i18n/en.pot \\;",
         "manifest": "d2-manifest package.json build/manifest.webapp",
         "cy:verify": "cypress verify",
         "check-uncommited": "test -z \"$(git status -uno --porcelain)\"",
         "cy:e2e:open": "NODE_ENV=test CYPRESS_E2E=true cypress open",
         "cy:e2e:run": "NODE_ENV=test CYPRESS_E2E=true cypress run --browser chrome",
         "release": "bash scripts/publish.sh",
-        "_prepare": "husky install"
+        "prepare": "corepack enable 2>/dev/null || true && husky install"
     },
     "devDependencies": {
         "@babel/core": "7.15.8",
         "@babel/preset-typescript": "7.15.0",
         "@testing-library/jest-dom": "5.14.1",
         "@testing-library/react": "12.1.2",
-        "@types/file-saver": "2.0.3",
         "@types/axios-mock-adapter": "1.10.0",
         "@types/btoa": "1.2.3",
         "@types/classnames": "2.3.1",
-        "@types/jest": "27.0.2",
+        "@types/file-saver": "2.0.3",
         "@types/lodash": "4.14.176",
         "@types/material-ui": "0.21.12",
         "@types/md5": "2.3.1",
-        "@types/node": "16.11.6",
-        "@types/react": "17.0.33",
-        "@types/react-dom": "17.0.10",
+        "@types/node": "^20",
+        "@types/qs": "^6.15.0",
+        "@types/react": "17.0.88",
+        "@types/react-dom": "17.0.25",
         "@types/react-router-dom": "5.3.2",
         "@types/styled-components": "5.1.15",
         "@typescript-eslint/eslint-plugin": "5.2.0",
         "@typescript-eslint/parser": "5.2.0",
+        "@vitejs/plugin-react": "^4.3.4",
         "@welldone-software/why-did-you-render": "6.2.1",
         "axios-mock-adapter": "1.18.2",
-        "babel-core": "6.26.3",
-        "babel-eslint": "10.1.0",
-        "craco": "0.0.3",
         "cypress": "8.7.0",
         "cypress-xpath": "1.6.2",
         "eslint": "8.1.0",
@@ -125,14 +125,25 @@
         "eslint-plugin-unused-imports": "1.1.5",
         "http-proxy-middleware": "2.0.1",
         "husky": "7.0.4",
-        "jest": "27.3.1",
+        "jsdom": "^21.1.2",
+        "node-stdlib-browser": "^1",
         "prettier": "2.4.1",
-        "react-scripts": "4.0.3",
         "react-test-renderer": "17.0.2",
-        "ts-jest": "27.0.7",
-        "typescript": "4.4.4",
+        "typescript": "5.7.3",
+        "vite": "^4.5.14",
+        "vite-plugin-node-stdlib-browser": "^0.2.1",
+        "vitest": "^0.34.6",
         "wait-on": "5.3.0"
     },
+    "resolutions": {
+        "axios": "1.13.5",
+        "glob-parent": "5.1.2",
+        "lodash": "4.17.23",
+        "node-fetch": "2.6.7",
+        "qs": "6.14.2",
+        "@types/react": "17.0.88",
+        "@types/react-dom": "17.0.25"
+    },
     "manifest.webapp": {
         "name": "Training App",
         "description": "DHIS2 Training App",

diff --git a/src/data/clients/http/AxiosHttpClient.ts b/src/data/clients/http/AxiosHttpClient.ts
diff --git a/src/data/clients/http/FetchHttpClient.ts b/src/data/clients/http/FetchHttpClient.ts
@@ -36,7 +36,9 @@ export class FetchHttpClient implements HttpClient {
         const credentialsStrategy = auth ? "omit" : "include";
         const fetchOptions: RequestInit = {
             method,
-            signal: controller.signal,
+            // `abort-controller` ships its own AbortSignal type, which is not identical to DOM's AbortSignal in TS 5.x.
+            // Cast to keep compatibility across environments.
+            signal: controller.signal as unknown as AbortSignal,
             body: getBody(dataType, data),
             headers: { ...baseHeaders, ...authHeaders, ...extraHeaders },
             credentials: credentials === "include" ? credentialsStrategy : undefined,