Replace i18next backend with i18next-fetch-backend (#37633)

Signed-off-by: Jon Koops <[email protected]>

Author: jonkoops

docs/documentation/server_development/topics/themes-react.adoc

@@ -42,7 +42,7 @@ import { KeycloakProvider } from "@keycloak/keycloak-ui-shared";
 
 The pages are translated using the `i18next` library.
 You can set it up as described on their [website](https://react.i18next.com/).
-If you want to use the translations that are provided then you need to add i18next-http-backend to your project and add:
+If you want to use the translations that are provided then you need to add `i18next-fetch-backend` to your project and add:
 
 [source,javascript]
 ----
@@ -51,9 +51,9 @@ backend: {
   parse: (data: string) => {
     const messages = JSON.parse(data);
 
-    const result: Record<string, string> = {};
-    messages.forEach((v) => (result[v.key] = v.value)); //need to convert to record
-    return result;
+    return Object.fromEntries(
+      messages.map(({ key, value }) => [key, value])
+    );
   },
 },
 ----

js/apps/account-ui/README.md

@@ -33,7 +33,7 @@ import { KeycloakProvider } from "@keycloak/keycloak-ui-shared";
 ### Translation
 
 For the translation we use `react-i18next` you can [set it up](https://react.i18next.com/) as described on their website.
-If you want to use the translations that are provided then you need to add `i18next-http-backend` to your project and add:
+If you want to use the translations that are provided then you need to add `i18next-fetch-backend` to your project and add:
 
 ```ts
 
@@ -42,9 +42,9 @@ backend: {
   parse: (data: string) => {
     const messages = JSON.parse(data);
 
-    const result: Record<string, string> = {};
-    messages.forEach((v) => (result[v.key] = v.value));
-    return result;
+    return Object.fromEntries(
+      messages.map(({ key, value }) => [key, value])
+    );
   },
 },
 ```

js/apps/account-ui/package.json

@@ -31,7 +31,7 @@
     "@patternfly/react-icons": "^5.4.2",
     "@patternfly/react-table": "^5.4.16",
     "i18next": "^24.2.2",
-    "i18next-http-backend": "^3.0.2",
+    "i18next-fetch-backend": "^6.0.0",
     "keycloak-js": "^26.2.0",
     "lodash-es": "^4.17.21",
     "react": "^18.3.1",

js/apps/account-ui/src/i18n.ts

@@ -1,5 +1,5 @@
 import { LanguageDetectorModule, createInstance } from "i18next";
-import HttpBackend from "i18next-http-backend";
+import FetchBackend from "i18next-fetch-backend";
 import { initReactI18next } from "react-i18next";
 
 import { environment } from "./environment";
@@ -32,16 +32,14 @@ export const i18n = createInstance({
       environment.serverBaseUrl,
       `resources/${environment.realm}/account/{{lng}}`,
     ),
-    parse: (data: string) => {
-      const messages = JSON.parse(data);
+    parse(data: string) {
+      const messages: KeyValue[] = JSON.parse(data);
 
-      const result: Record<string, string> = {};
-      messages.forEach((v: KeyValue) => (result[v.key] = v.value));
-      return result;
+      return Object.fromEntries(messages.map(({ key, value }) => [key, value]));
     },
   },
 });
 
-i18n.use(HttpBackend);
+i18n.use(FetchBackend);
 i18n.use(keycloakLanguageDetector);
 i18n.use(initReactI18next);

js/apps/admin-ui/README.md

@@ -33,7 +33,7 @@ import { KeycloakProvider } from "@keycloak/keycloak-ui-shared";
 ### Translation
 
 For the translation we use `react-i18next` you can [set it up](https://react.i18next.com/) as described on their website.
-If you want to use the translations that are provided then you need to add `i18next-http-backend` to your project and add:
+If you want to use the translations that are provided then you need to add `i18next-fetch-backend` to your project and add:
 
 ```ts
 
@@ -42,9 +42,9 @@ backend: {
   parse: (data: string) => {
     const messages = JSON.parse(data);
 
-    const result: Record<string, string> = {};
-    messages.forEach((v) => (result[v.key] = v.value));
-    return result;
+    return Object.fromEntries(
+      messages.map(({ key, value }) => [key, value])
+    );
   },
 },
 ```

js/apps/admin-ui/package.json

@@ -101,7 +101,7 @@
     "file-saver": "^2.0.5",
     "flat": "^6.0.1",
     "i18next": "^24.2.2",
-    "i18next-http-backend": "^3.0.2",
+    "i18next-fetch-backend": "^6.0.0",
     "jszip": "^3.10.1",
     "keycloak-js": "^26.2.0",
     "lodash-es": "^4.17.21",

js/apps/admin-ui/src/i18n/i18n.ts

@@ -1,5 +1,5 @@
 import { createInstance } from "i18next";
-import HttpBackend from "i18next-http-backend";
+import FetchBackend from "i18next-fetch-backend";
 import { initReactI18next } from "react-i18next";
 
 import { environment } from "../environment";
@@ -24,14 +24,12 @@ export const i18n = createInstance({
       `resources/{{ns}}/admin/{{lng}}`,
     ),
     parse: (data: string) => {
-      const messages = JSON.parse(data);
+      const messages: KeyValue[] = JSON.parse(data);
 
-      const result: Record<string, string> = {};
-      messages.forEach((v: KeyValue) => (result[v.key] = v.value));
-      return result;
+      return Object.fromEntries(messages.map(({ key, value }) => [key, value]));
     },
   },
 });
 
-i18n.use(HttpBackend);
+i18n.use(FetchBackend);
 i18n.use(initReactI18next);