feat: Server side translation setup (#4657)

* Server side translation setup

* docs

app/utils/i18n.test.ts

@@ -0,0 +1,92 @@
+import i18n from "i18next";
+import de_DE from "../../shared/i18n/locales/de_DE/translation.json";
+import en_US from "../../shared/i18n/locales/en_US/translation.json";
+import pt_PT from "../../shared/i18n/locales/pt_PT/translation.json";
+import { initI18n } from "./i18n";
+
+describe("i18n env is unset", () => {
+  beforeEach(() => {
+    initI18n()
+      .addResources("en-US", "translation", en_US)
+      .addResources("de-DE", "translation", de_DE)
+      .addResources("pt-PT", "translation", pt_PT);
+  });
+
+  it("translation of key should match", () =>
+    expect(i18n.t("Saving")).toBe("Saving"));
+
+  it("translation if changed to de-DE", () => {
+    i18n.changeLanguage("de-DE");
+    expect(i18n.t("Saving")).toBe("Speichert");
+  });
+
+  it("translation if changed to pt-PT", () => {
+    i18n.changeLanguage("pt-PT");
+    expect(i18n.t("Saving")).toBe("A guardar");
+  });
+});
+describe("i18n env is en-US", () => {
+  beforeEach(() => {
+    initI18n("en-US")
+      .addResources("en-US", "translation", en_US)
+      .addResources("de-DE", "translation", de_DE)
+      .addResources("pt-PT", "translation", pt_PT);
+  });
+
+  it("translation of key should match", () =>
+    expect(i18n.t("Saving")).toBe("Saving"));
+
+  it("translation if changed to de-DE", () => {
+    i18n.changeLanguage("de-DE");
+    expect(i18n.t("Saving")).toBe("Speichert");
+  });
+
+  it("translation if changed to pt-PT", () => {
+    i18n.changeLanguage("pt-PT");
+    expect(i18n.t("Saving")).toBe("A guardar");
+  });
+});
+
+describe("i18n env is de-DE", () => {
+  beforeEach(() => {
+    initI18n("de-DE")
+      .addResources("en-US", "translation", en_US)
+      .addResources("de-DE", "translation", de_DE)
+      .addResources("pt-PT", "translation", pt_PT);
+  });
+
+  it("translation of key should match", () =>
+    expect(i18n.t("Saving")).toBe("Speichert"));
+
+  it("translation if changed to en-US", () => {
+    i18n.changeLanguage("en-US");
+    expect(i18n.t("Saving")).toBe("Saving");
+  });
+
+  it("translation if changed to pt-PT", () => {
+    i18n.changeLanguage("pt-PT");
+    expect(i18n.t("Saving")).toBe("A guardar");
+  });
+});
+
+describe("i18n env is pt-PT", () => {
+  beforeEach(() => {
+    initI18n("pt-PT")
+      .addResources("en-US", "translation", en_US)
+      .addResources("de-DE", "translation", de_DE)
+      .addResources("pt-PT", "translation", pt_PT);
+  });
+
+  it("translation of key should match", () =>
+    expect(i18n.t("Saving")).toBe("A guardar"));
+
+  it("translation if changed to en-US", () => {
+    i18n.changeLanguage("en-US");
+    expect(i18n.t("Saving")).toBe("Saving");
+  });
+
+  it("translation if changed to de-DE", () => {
+    i18n.changeLanguage("de-DE");
+    expect(i18n.t("Saving")).toBe("Speichert");
+  });
+});

app/utils/i18n.ts

@@ -17,6 +17,11 @@ import {
   zhCN,
   zhTW,
 } from "date-fns/locale";
+import i18n from "i18next";
+import backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import { languages } from "@shared/i18n";
+import { unicodeCLDRtoBCP47, unicodeBCP47toCLDR } from "@shared/utils/date";
 
 const locales = {
   de_DE: de,
@@ -38,8 +43,50 @@ const locales = {
   zh_TW: zhTW,
 };
 
-export function dateLocale(userLocale: string | null | undefined) {
-  return userLocale ? locales[userLocale] : undefined;
+/**
+ * Returns the date-fns locale object for the given user language preference.
+ *
+ * @param language The user language
+ * @returns The date-fns locale.
+ */
+export function dateLocale(language: string | null | undefined) {
+  return language ? locales[language] : undefined;
+}
+
+/**
+ * Initializes i18n library, loading all available translations from the
+ * API backend.
+ *
+ * @param defaultLanguage The default language to use if the user's language
+ * is not supported.
+ * @returns i18n instance
+ */
+export function initI18n(defaultLanguage = "en_US") {
+  const lng = unicodeCLDRtoBCP47(defaultLanguage);
+  i18n
+    .use(backend)
+    .use(initReactI18next)
+    .init({
+      compatibilityJSON: "v3",
+      backend: {
+        // this must match the path defined in routes. It's the path that the
+        // frontend UI code will hit to load missing translations.
+        loadPath: (languages: string[]) =>
+          `/locales/${unicodeBCP47toCLDR(languages[0])}.json`,
+      },
+      interpolation: {
+        escapeValue: false,
+      },
+      react: {
+        useSuspense: false,
+      },
+      lng,
+      fallbackLng: lng,
+      supportedLngs: languages.map(unicodeCLDRtoBCP47),
+      keySeparator: false,
+      returnNull: false,
+    });
+  return i18n;
 }
 
 export { locales };