fix: Frontend translation library expects dash separated, not underscore separated languages – this fix is required to enable working pluralization

app/components/Authenticated.js

@@ -21,7 +21,9 @@ const Authenticated = ({ children }: Props) => {
   // the user available and means we can start loading translations faster
   React.useEffect(() => {
     if (i18n.language !== language) {
-      i18n.changeLanguage(language);
+      // Languages are stored in en_US format in the database, however the
+      // frontend translation framework (i18next) expects en-US
+      i18n.changeLanguage(language.replace("_", "-"));
     }
   }, [i18n, language]);
 

shared/i18n/index.js

@@ -3,37 +3,8 @@ import i18n from "i18next";
 import backend from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
 
-export const initI18n = () => {
-  const lng =
-    "DEFAULT_LANGUAGE" in process.env ? process.env.DEFAULT_LANGUAGE : "en_US";
-
-  i18n
-    .use(backend)
-    .use(initReactI18next)
-    .init({
-      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: "/locales/{{lng}}.json",
-      },
-      interpolation: {
-        escapeValue: false,
-      },
-      react: {
-        useSuspense: false,
-      },
-      lng,
-      fallbackLng: lng,
-      debug: process.env.NODE_ENV === "development",
-      keySeparator: false,
-    });
-
-  return i18n;
-};
-
 // Note: Updating the available languages? Make sure to also update the
 // locales array in app/components/LocaleTime.js to enable translation for timestamps.
-
 export const languageOptions = [
   { label: "English (US)", value: "en_US" },
   { label: "简体中文 (Chinese, Simplified)", value: "zh_CN" },
@@ -46,3 +17,40 @@ export const languageOptions = [
 ];
 
 export const languages: string[] = languageOptions.map((i) => i.value);
+
+// Languages are stored in en_US format in the database, however the
+// frontend translation framework (i18next) expects en-US
+const underscoreToDash = (text: string) => text.replace("_", "-");
+const dashToUnderscore = (text: string) => text.replace("-", "_");
+
+export const initI18n = () => {
+  const lng = underscoreToDash(
+    "DEFAULT_LANGUAGE" in process.env ? process.env.DEFAULT_LANGUAGE : "en_US"
+  );
+
+  i18n
+    .use(backend)
+    .use(initReactI18next)
+    .init({
+      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[], namespaces: string[]) =>
+          `/locales/${dashToUnderscore(languages[0])}.json`,
+      },
+      interpolation: {
+        escapeValue: false,
+      },
+      react: {
+        useSuspense: false,
+      },
+      lng,
+      fallbackLng: lng,
+      supportedLngs: languages.map(underscoreToDash),
+      // Uncomment when debugging translation framework, otherwise it's noisy
+      // debug: process.env.NODE_ENV === "development",
+      keySeparator: false,
+    });
+
+  return i18n;
+};