Update and consolidate i18n (#3313)

Author: imnasnainaec

package-lock.json

@@ -55,9 +55,9 @@
     "distinct-colors": "^3.0.0",
     "history": "^5.3.0",
     "http-status-codes": "^2.3.0",
-    "i18next": "^23.4.6",
+    "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.2.2",
+    "i18next-http-backend": "^2.6.0",
     "js-base64": "^3.7.7",
     "make-dir": "^4.0.0",
     "material-react-table": "^2.9.2",
@@ -70,7 +70,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^14.1.2",
+    "react-i18next": "^15.0.1",
     "react-modal": "^3.16.1",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",

package.json

@@ -1,7 +1,7 @@
 // https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb#getting-started
 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import Backend from "i18next-http-backend";
+import Backend, { type HttpBackendOptions } from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
 
 import { getCurrentUser } from "backend/localStorage";
@@ -18,17 +18,17 @@ i18n
   .use(Backend)
   .use(LanguageDetector)
   .use(initReactI18next)
-  .init(
+  .init<HttpBackendOptions>(
     {
       //debug: true, // Uncomment to troubleshoot
       returnNull: false,
-      // detection: options,
       // ignoring localStorage and cookies for the detection order lets the user change languages
       // more easily (just switch in the browser and reload, instead of clearing all site data)
       detection: { order: ["queryString", "path", "navigator"] },
       supportedLngs: i18nLangs,
-      // nonExplicitSupportedLngs will (e.g.) use 'es' if the browser is 'es-MX'
-      nonExplicitSupportedLngs: true,
+      // "languageOnly" means use only the language part (first subtag) of the full language tag;
+      // e.g., if the user's browser is set to 'es-MX', we just use 'es'
+      load: "languageOnly",
       fallbackLng: i18nFallbacks,
       interpolation: { escapeValue: false },
     },

src/i18n.ts renamed to src/i18n/index.ts

@@ -1,9 +1,9 @@
 /* Adapted from https://react.i18next.com/misc/testing
  * (In most cases, this isn't needed.
- * Instead you can use tests/reactI18nextMock.ts to mock out i18n completely.)
+ * Instead you can use i18n/tests/reactI18nextMock.ts to mock out i18n completely.)
  * For a simple i18next wrapper, add the following to a test file:
  * * import { I18nextProvider } from "react-i18next";
- * * import i18n from "tests/i18nMock";
+ * * import i18n from "i18n/tests/i18nMock";
  * Then wrap the component being rendered with <I18nextProvider i18n={i18n}> */
 
 import i18n from "i18next";

src/tests/i18nMock.ts renamed to src/i18n/tests/i18nMock.ts

@@ -1,5 +1,5 @@
-/* Use `import "tests/reactI18nextMock.ts";` in `setupTests.js` to mock i18next globally.
- * (For testing components with `Trans`, see tests/i18nMock.ts instead.)
+/* Use `import "i18n/tests/reactI18nextMock.ts";` in `setupTests.js` to mock i18next globally.
+ * (For testing components with `Trans`, see i18n/tests/i18nMock.ts instead.)
  * This import should occur before other internal imports that use `react-i18next`. */
 
 jest.mock("react-i18next", () => ({

src/tests/reactI18nextMock.ts renamed to src/i18n/tests/reactI18nextMock.ts

@@ -1,4 +1,4 @@
-import "tests/reactI18nextMock";
+import "i18n/tests/reactI18nextMock";
 
 // Force tests to fail on console.error and console.warn
 global.console.error = (message) => {