``update Upgrade dependencies including i18next, react-i18next, eslint, and testing-library; adjust peer dependencies and add new ESLint plugins``

002_source/ionic_mobile/package.json

@@ -43,14 +43,14 @@
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.8.1",
-    "i18next": "^24.2.2",
+    "react-i18next": "^15.2.0",
+    "i18next": "^24.2.0",
     "ionicons": "^7.0.0",
     "lodash": "^4.17.21",
     "pocketbase": "^0.26.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "7.50.1",
-    "react-i18next": "^15.4.1",
     "react-markdown": "^9.0.3",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
@@ -65,15 +65,18 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@testing-library/dom": ">=7.21.4",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-legacy": "^5.0.0",
     "@vitejs/plugin-react": "^4.0.1",
     "cypress": "^13.5.0",
-    "eslint": "^8.35.0",
+    "eslint": "^9.20.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
     "jsdom": "^22.1.0",
     "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.1.0",
@@ -81,6 +84,7 @@
     "sass": "^1.88.0",
     "terser": "^5.4.0",
     "typescript": "^5.1.6",
+    "typescript-eslint": "^8.24.0",
     "vite": "~5.2.0",
     "vitest": "^0.34.6"
   },

002_source/ionic_mobile/src/i18n.ts

@@ -1,26 +1,19 @@
 import i18n from 'i18next';
+// import Backend from "i18next-http-backend";
+// import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from 'react-i18next';
-import resources from './locale/resources';
+import en from './locale/en';
+import zh from './locale/zh';
 
 i18n
-  .use(initReactI18next) // passes i18n down to react-i18next
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
   .init({
-    // the translations
-    // (tip move them in a JSON file and import them,
-    // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
-    //
-    // TODO: need to troubleshoot resource for building webpage
-    // resources,
-    //
-    // if you're using a language detector, do not define the lng option
-    lng: 'en',
+    resources: { en, zh },
     fallbackLng: 'en',
-    //
     // debug: true,
-    //
-    interpolation: {
-      escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
-    },
   });
 
 export default i18n;

002_source/ionic_mobile/src/locale/zh.ts

@@ -0,0 +1,11 @@
+// the translations
+// (tip move them in a JSON file and import them)
+const zh = {
+  translation: {
+    hello: '你好',
+    Loading: 'loading',
+    lesson: 'lesson',
+  },
+};
+
+export default zh;