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>

1 files changed, 14 insertions, 4 deletions

diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 54e157c..0022ec8 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -24,13 +24,16 @@ import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 import CssBaseline from '@mui/material/CssBaseline';
 import { autorun } from 'mobx';
-import React from 'react';
+import { addDisposer } from 'mobx-state-tree';
+import React, { Suspense } from 'react';
 import { render } from 'react-dom';
 
 import App from './components/App';
+import Loading from './components/Loading';
 import StoreProvider from './components/StoreProvider';
 import ThemeProvider from './components/ThemeProvider';
 import { exposeToReduxDevtools, hotReload } from './devTools';
+import loadRendererLocalization from './i18n/loadRendererLoalization';
 import { createAndConnectRendererStore } from './stores/RendererStore';
 import { getLogger } from './utils/log';
 
@@ -42,7 +45,9 @@ if (isDevelopment) {
   hotReload();
 }
 
-const store = createAndConnectRendererStore(window.sophieRenderer);
+const { sophieRenderer: ipc } = window;
+
+const store = createAndConnectRendererStore(ipc);
 
 if (isDevelopment) {
   exposeToReduxDevtools(store).catch((error) => {
@@ -50,13 +55,16 @@ if (isDevelopment) {
   });
 }
 
-autorun(() => {
+loadRendererLocalization(store, ipc, isDevelopment);
+
+const disposeSetTitle = autorun(() => {
   const titlePrefix = isDevelopment ? '[dev] ' : '';
   const serviceTitle = store.settings.selectedService?.title;
   const formattedServiceTitle =
     serviceTitle === undefined ? '' : `${serviceTitle} - `;
   document.title = `${titlePrefix}${formattedServiceTitle}Sophie`;
 });
+addDisposer(store, disposeSetTitle);
 
 function Root(): JSX.Element {
   return (
@@ -64,7 +72,9 @@ function Root(): JSX.Element {
       <StoreProvider store={store}>
         <ThemeProvider>
           <CssBaseline enableColorScheme />
-          <App />
+          <Suspense fallback={<Loading />}>
+            <App />
+          </Suspense>
         </ThemeProvider>
       </StoreProvider>
     </React.StrictMode>