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, 26 insertions, 4 deletions

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' },