feat(renderer): Renderer translations

Add react-i18n to make us able to use i18next translations in the
renderer process just like we do in the main process.

Translations are hot-reloaded automatically.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

2 files changed, 50 insertions, 4 deletions

diff --git a/packages/main/src/i18n/I18nStore.ts b/packages/main/src/i18n/I18nStore.ts
index c364f0e..54c3d20 100644
--- a/packages/main/src/i18n/I18nStore.ts
+++ b/packages/main/src/i18n/I18nStore.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { i18n, TFunction } from 'i18next';
+import type { i18n, ResourceKey, TFunction } from 'i18next';
 import { IAtom, createAtom } from 'mobx';
 
 import { getLogger } from '../utils/log';
@@ -113,4 +113,33 @@ export default class I18nStore {
     });
     log.debug('Reloaded translations');
   }
+
+  async getTranslation(
+    language: string,
+    namespace: string,
+  ): Promise<ResourceKey> {
+    if (!this.i18next.hasResourceBundle(language, namespace)) {
+      await this.i18next.loadLanguages([language]);
+      await this.i18next.loadNamespaces([namespace]);
+    }
+    const bundle = this.i18next.getResourceBundle(
+      language,
+      namespace,
+    ) as unknown;
+    if (typeof bundle !== 'object' || bundle === null) {
+      throw new Error(
+        `Failed to load ${namespace} resource bundle for language ${language}`,
+      );
+    }
+    return bundle as ResourceKey;
+  }
+
+  addMissingTranslation(
+    languages: string[],
+    namespace: string,
+    key: string,
+    value: string,
+  ): void {
+    this.i18next.modules.backend?.create?.(languages, namespace, key, value);
+  }
 }
diff --git a/packages/main/src/i18n/loadLocalization.ts b/packages/main/src/i18n/loadLocalization.ts
index 1408a30..ec3cf84 100644
--- a/packages/main/src/i18n/loadLocalization.ts
+++ b/packages/main/src/i18n/loadLocalization.ts
@@ -18,16 +18,22 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { fallbackLng } from '@sophie/shared';
 import i18next from 'i18next';
+import { autorun } from 'mobx';
+import { addDisposer } from 'mobx-state-tree';
 
 import type Resources from '../infrastructure/resources/Resources';
 import type MainStore from '../stores/MainStore';
+import { getLogger } from '../utils/log';
 
 import I18nStore from './I18nStore';
 import RepositoryBasedI18nBackend from './RepositoryBasedI18nBackend';
 import i18nLog from './i18nLog';
 import LocalizationFiles from './impl/LocaltizationFiles';
 
+const log = getLogger('loadLocationzation');
+
 export default async function loadLocalization(
   store: MainStore,
   resources: Resources,
@@ -37,14 +43,25 @@ export default async function loadLocalization(
   const backend = new RepositoryBasedI18nBackend(repository, devMode);
   const i18n = i18next
     .createInstance({
-      lng: 'en',
-      fallbackLng: ['en'],
+      lng: store.shared.language,
+      fallbackLng,
       debug: devMode,
       saveMissing: devMode,
     })
     .use(backend)
     .use(i18nLog);
-  await i18n.init();
   const i18nStore = new I18nStore(i18n);
   store.setI18n(i18nStore);
+  await i18n.init();
+  const disposeChangeLanguage = autorun(() => {
+    const {
+      shared: { language },
+    } = store;
+    if (i18n.language !== language) {
+      i18n.changeLanguage(language).catch((error) => {
+        log.error('Failed to change language', error);
+      });
+    }
+  });
+  addDisposer(store, disposeChangeLanguage);
 }