From 147b6bbe4ec2f5b181df4fdec9e7aa87989c5f78 Mon Sep 17 00:00:00 2001
From: Pavlo Buidenkov <pavlobu@gmail.com>
Date: Tue, 11 Aug 2020 22:31:47 +0300
Subject: [PATCH] able to change language on click in menu in react!

---
 app/configs/i18next.config.client.ts |  6 +++++-
 app/containers/Root.tsx              | 27 +++++++++++++++++++--------
 app/index.tsx                        |  5 -----
 app/main.dev.ts                      |  1 +
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/app/configs/i18next.config.client.ts b/app/configs/i18next.config.client.ts
index 32d5c0e..53e5785 100644
--- a/app/configs/i18next.config.client.ts
+++ b/app/configs/i18next.config.client.ts
@@ -1,4 +1,4 @@
-import { remote } from 'electron';
+import { remote, ipcRenderer } from 'electron';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import SyncBackend from 'i18next-node-fs-backend';
@@ -39,4 +39,8 @@ if (!i18n.isInitialized) {
   i18n.init(i18nextOptions);
 }
 
+ipcRenderer.on('sending-language-from-main', (_, message) => {
+  i18n.changeLanguage(`${message}`);
+});
+
 export default i18n;
diff --git a/app/containers/Root.tsx b/app/containers/Root.tsx
index fef53fa..674b222 100644
--- a/app/containers/Root.tsx
+++ b/app/containers/Root.tsx
@@ -1,22 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import { hot } from 'react-hot-loader/root';
 import { History } from 'history';
 import { Store } from '../store';
 import Routes from '../Routes';
+import i18n from '../configs/i18next.config.client';
 
 type Props = {
   store: Store;
   history: History;
 };
 
-const Root = ({ store, history }: Props) => (
-  <Provider store={store}>
-    <ConnectedRouter history={history}>
-      <Routes />
-    </ConnectedRouter>
-  </Provider>
-);
+const Root = ({ store, history }: Props) => {
+  const [, setAppLanguage] = useState('');
+
+  useEffect(() => {
+    i18n.on('languageChanged', (lng) => {
+      setAppLanguage(lng);
+    });
+  }, []);
+
+  return (
+    <Provider store={store}>
+      <ConnectedRouter history={history}>
+        <Routes />
+      </ConnectedRouter>
+    </Provider>
+  );
+};
 
 export default hot(Root);
diff --git a/app/index.tsx b/app/index.tsx
index 2b2af69..e46d2fc 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,9 +1,6 @@
 import React, { Fragment, Suspense } from 'react';
 import { render } from 'react-dom';
 import { AppContainer as ReactHotAppContainer } from 'react-hot-loader';
-// import { ipcRenderer } from 'electron';
-// import { I18nextProvider } from 'react-i18next';
-// import i18n from './configs/i18next.config.client';
 import './configs/i18next.config.client';
 import { history, configuredStore } from './store';
 import './app.global.css';
@@ -12,8 +9,6 @@ const store = configuredStore();
 
 const AppContainer = process.env.PLAIN_HMR ? Fragment : ReactHotAppContainer;
 
-// let initialI18nStore = ipcRenderer.sendSync('get-initial-translations');
-
 document.addEventListener('DOMContentLoaded', () => {
   // eslint-disable-next-line global-require
   const Root = require('./containers/Root').default;
diff --git a/app/main.dev.ts b/app/main.dev.ts
index a462670..49f26d5 100644
--- a/app/main.dev.ts
+++ b/app/main.dev.ts
@@ -114,6 +114,7 @@ const createWindow = async () => {
     if (mainWindow === null) return;
     menuBuilder = new MenuBuilder(mainWindow, i18n);
     menuBuilder.buildMenu();
+    mainWindow.webContents.send('sending-language-from-main', lng);
     console.log(`Language changed! ${lng}`);
   });