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>

6 files changed, 129 insertions, 28 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);
 }
diff --git a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
index cff7957..6144d89 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
@@ -22,6 +22,7 @@ import {
   Action,
   MainToRendererIpcMessage,
   RendererToMainIpcMessage,
+  Translation,
 } from '@sophie/shared';
 import { BrowserWindow, ipcMain, IpcMainEvent } from 'electron';
 import type { IJsonPatch } from 'mobx-state-tree';
@@ -96,6 +97,24 @@ export default class ElectronMainWindow implements MainWindow {
       return this.bridge.snapshot;
     });
 
+    ipcMain.handle(
+      RendererToMainIpcMessage.GetTranslation,
+      (event, translation) => {
+        const { id } = event.sender;
+        if (id !== webContents.id) {
+          log.warn(
+            'Unexpected',
+            RendererToMainIpcMessage.GetTranslation,
+            'from webContents',
+            id,
+          );
+          throw new Error('Invalid IPC call');
+        }
+        const { language, namespace } = Translation.parse(translation);
+        return store.getTranslation(language, namespace);
+      },
+    );
+
     this.bridge = new RendererBridge(store, (patch) => {
       webContents.send(MainToRendererIpcMessage.SharedStorePatch, patch);
     });
@@ -142,6 +161,12 @@ export default class ElectronMainWindow implements MainWindow {
     );
   }
 
+  reloadTranslations(): void {
+    this.browserWindow.webContents.send(
+      MainToRendererIpcMessage.ReloadTranslations,
+    );
+  }
+
   dispose() {
     this.bridge.dispose();
     this.browserWindow.destroy();
diff --git a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
index 49bfbfd..8e10383 100644
--- a/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
+++ b/packages/main/src/infrastructure/electron/impl/setApplicationMenu.ts
@@ -91,10 +91,7 @@ export default function setApplicationMenu(
                 },
                 {
                   role: 'toggleDevTools',
-                  label: t<string>(
-                    'menu.view.toggleSophieDeveloperTools',
-                    'Toggle Sophie Developer Tools',
-                  ),
+                  label: t<string>('menu.view.toggleSophieDeveloperTools'),
                   accelerator: 'CommandOrControl+Shift+Alt+I',
                 },
                 { type: 'separator' },
diff --git a/packages/main/src/infrastructure/electron/types.ts b/packages/main/src/infrastructure/electron/types.ts
index 4716f0b..e5b0fd6 100644
--- a/packages/main/src/infrastructure/electron/types.ts
+++ b/packages/main/src/infrastructure/electron/types.ts
@@ -41,6 +41,8 @@ export interface MainWindow {
 
   setServiceView(serviceView: ServiceView | undefined): void;
 
+  reloadTranslations(): void;
+
   dispose(): void;
 }
 
diff --git a/packages/main/src/stores/MainStore.ts b/packages/main/src/stores/MainStore.ts
index 93cabb9..d717bed 100644
--- a/packages/main/src/stores/MainStore.ts
+++ b/packages/main/src/stores/MainStore.ts
@@ -19,7 +19,8 @@
  */
 
 import type { Action, BrowserViewBounds } from '@sophie/shared';
-import { applySnapshot, Instance, types } from 'mobx-state-tree';
+import type { ResourceKey } from 'i18next';
+import { applySnapshot, flow, Instance, types } from 'mobx-state-tree';
 
 import type I18nStore from '../i18n/I18nStore';
 import type { UseTranslationResult } from '../i18n/I18nStore';
@@ -67,6 +68,12 @@ const MainStore = types
     useTranslation(ns?: string): UseTranslationResult {
       return self.i18n?.useTranslation(ns) ?? { ready: false };
     },
+    getTranslation(language: string, namespace: string): Promise<ResourceKey> {
+      if (self.i18n === undefined) {
+        throw new Error('i18next has not been set');
+      }
+      return self.i18n.getTranslation(language, namespace);
+    },
   }))
   .volatile(
     (): {
@@ -79,10 +86,43 @@ const MainStore = types
     setBrowserViewBounds(bounds: BrowserViewBounds): void {
       applySnapshot(self.browserViewBounds, bounds);
     },
+    setMainWindow(mainWindow: MainWindow | undefined): void {
+      self.mainWindow = mainWindow;
+    },
+    openWebpageInBrowser() {
+      getEnv(self).openURLInExternalBrowser(
+        'https://gitlab.com/say-hi-to-sophie/shophie',
+      );
+    },
+    openAboutDialog() {
+      getEnv(self).openAboutDialog();
+    },
+    beforeDestroy(): void {
+      self.mainWindow?.dispose();
+    },
+    setI18n(i18n: I18nStore): void {
+      self.i18n = i18n;
+    },
+    addMissingTranslation(
+      languages: string[],
+      namespace: string,
+      key: string,
+      value: string,
+    ): void {
+      self.i18n?.addMissingTranslation(languages, namespace, key, value);
+    },
+    reloadTranslations: flow(function* reloadTranslations() {
+      if (self.i18n !== undefined) {
+        yield self.i18n.reloadTranslations();
+        self.mainWindow?.reloadTranslations();
+      }
+    }),
+  }))
+  .actions((self) => ({
     dispatch(action: Action): void {
       switch (action.action) {
         case 'set-browser-view-bounds':
-          this.setBrowserViewBounds(action.browserViewBounds);
+          self.setBrowserViewBounds(action.browserViewBounds);
           break;
         case 'set-selected-service-id':
           self.settings.setSelectedServiceId(action.serviceId);
@@ -98,11 +138,19 @@ const MainStore = types
           break;
         case 'reload-all-translations':
           if (self.i18n !== undefined) {
-            self.i18n.reloadTranslations().catch((error) => {
+            self.reloadTranslations().catch((error) => {
               log.error('Failed to reload translations', error);
             });
           }
           break;
+        case 'add-missing-translation':
+          self.addMissingTranslation(
+            action.languages,
+            action.namespace,
+            action.key,
+            action.value,
+          );
+          break;
         case 'dispatch-service-action': {
           const { serviceId, serviceAction } = action;
           const service = self.shared.servicesById.get(serviceId);
@@ -123,23 +171,6 @@ const MainStore = types
           break;
       }
     },
-    setMainWindow(mainWindow: MainWindow | undefined): void {
-      self.mainWindow = mainWindow;
-    },
-    openWebpageInBrowser() {
-      getEnv(self).openURLInExternalBrowser(
-        'https://gitlab.com/say-hi-to-sophie/shophie',
-      );
-    },
-    openAboutDialog() {
-      getEnv(self).openAboutDialog();
-    },
-    beforeDestroy(): void {
-      self.mainWindow?.dispose();
-    },
-    setI18n(i18n: I18nStore): void {
-      self.i18n = i18n;
-    },
   }));
 
 /*