complete migrate to electron-store and finish electron 18.2.3 upgrade!

app/configs/i18next.config.ts

@@ -10,7 +10,9 @@ import { ElectronStoreKeys } from '../enums/ElectronStoreKeys.enum';
 
 const i18nextOptions = {
   fallbackLng: config.fallbackLng,
-  lng: store.get(ElectronStoreKeys.AppLanguage),
+  lng: store.has(ElectronStoreKeys.AppLanguage)
+    ? String(store.get(ElectronStoreKeys.AppLanguage))
+    : 'en',
   ns: 'translation',
   defaultNS: 'translation',
   backend: {

app/containers/SettingsProvider.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect } from 'react';
 import { Classes } from '@blueprintjs/core';
+import { ipcRenderer } from 'electron';
+import { IpcEvents } from '../main/IpcEvents.enum';
 
 // TODO: move to 'constants' tsx file ?
 export const LIGHT_UI_BACKGROUND = 'rgba(240, 248, 250, 1)';
@@ -28,27 +30,26 @@ export const SettingsProvider: React.FC = ({ children }) => {
   const [isDarkTheme, setIsDarkTheme] = useState(false);
   const [currentLanguage, setCurrentLanguage] = useState('en');
 
-  const loadDarkThemeFromSettings = () => {
-    // const gotIsDarkThemeFromSettings = settings.hasSync('appIsDarkTheme')
-    //   ? settings.getSync('appIsDarkTheme') === 'true'
-    //   : false;
-    const gotIsDarkThemeFromSettings = true;
+  const loadDarkThemeFromSettings = async () => {
+    const isDarkAppTheme = await ipcRenderer.invoke(
+      IpcEvents.GetIsAppDarkTheme
+    );
 
-    if (gotIsDarkThemeFromSettings) {
+    if (isDarkAppTheme) {
       document.body.classList.toggle(Classes.DARK);
       document.body.style.backgroundColor = LIGHT_UI_BACKGROUND;
     }
 
-    setIsDarkTheme(gotIsDarkThemeFromSettings);
+    setIsDarkTheme(isDarkAppTheme);
   };
 
   useEffect(() => {
     loadDarkThemeFromSettings();
   }, []);
 
-  const setIsDarkThemeHook = (val: boolean) => {
-    // settings.setSync('appIsDarkTheme', `${val}`);
-    setIsDarkTheme(val);
+  const setIsDarkThemeHook = (isAppDarkTheme: boolean) => {
+    ipcRenderer.invoke(IpcEvents.SetIsAppDarkTheme, isAppDarkTheme);
+    setIsDarkTheme(isAppDarkTheme);
   };
 
   const setCurrentLanguageHook = (newLang: string) => {

app/enums/ElectronStoreKeys.enum.ts

@@ -2,4 +2,5 @@
 export enum ElectronStoreKeys {
   AppLanguage = 'appLanguage',
   IsNotFirstTimeAppStart = 'isNotFirstTimeAppStart',
+  IsAppDarkTheme = 'isAppDarkTheme',
 }

app/features/PeerConnection/handleRecieveEncryptedMessage.ts

@@ -1,5 +1,7 @@
+import { ipcRenderer } from 'electron';
 import uuid from 'uuid';
 import { process as processMessage } from '../../utils/message';
+import { IpcEvents } from '../../main/IpcEvents.enum';
 
 export function handleDeviceIPMessage(
   deviceIP: string,
@@ -40,24 +42,22 @@ export default async function handleRecieveEncryptedMessage(
     );
   }
   if (message.type === 'GET_APP_THEME') {
+    const isDarkAppTheme = await ipcRenderer.invoke(
+      IpcEvents.GetIsAppDarkTheme
+    );
     peerConnection.sendEncryptedMessage({
       type: 'APP_THEME',
       payload: {
-        // value: settings.hasSync('appIsDarkTheme')
-        //   ? settings.getSync('appIsDarkTheme') === 'true'
-        //   : false,
-        value: true,
+        value: isDarkAppTheme,
       },
     });
   }
   if (message.type === 'GET_APP_LANGUAGE') {
+    const appLanguage = await ipcRenderer.invoke(IpcEvents.GetAppLanguage);
     peerConnection.sendEncryptedMessage({
       type: 'APP_LANGUAGE',
       payload: {
-        // value: settings.hasSync('appLanguage')
-        //   ? settings.getSync('appLanguage')
-        //   : 'en',
-        value: 'en',
+        value: appLanguage,
       },
     });
   }

app/features/PeerConnection/index.ts

@@ -61,21 +61,21 @@ export default class PeerConnection {
   }
 
   notifyClientWithNewLanguage() {
-    setTimeout(() => {
+    setTimeout(async () => {
       this.sendEncryptedMessage({
         type: 'APP_LANGUAGE',
         payload: {
-          value: getAppLanguage(),
+          value: await getAppLanguage(),
         },
       });
     }, 1000);
   }
 
   notifyClientWithNewColorTheme() {
-    setTimeout(() => {
+    setTimeout(async () => {
       this.sendEncryptedMessage({
         type: 'APP_THEME',
-        payload: { value: getAppTheme() },
+        payload: { value: await getAppTheme() },
       });
     }, 1000);
   }

app/main.dev.ts

@@ -119,11 +119,9 @@ export default class DeskreenApp {
           ? {
               contextIsolation: false,
               nodeIntegration: true,
-              enableRemoteModule: true,
             }
           : {
               preload: path.join(__dirname, 'dist/mainWindow.renderer.prod.js'),
-              enableRemoteModule: true,
             },
     });
 

app/main/IpcEvents.enum.ts

@@ -24,4 +24,6 @@ export enum IpcEvents {
   GetAppLanguage = 'get-app-language',
   GetIsFirstTimeAppStart = 'get-is-not-first-time-app-start',
   SetAppStartedOnce = 'set-app-started-once',
+  GetIsAppDarkTheme = 'get-is-app-dark-theme',
+  SetIsAppDarkTheme = 'set-is-app-dark-theme',
 }

app/main/ipcMainHandlers.ts

@@ -22,7 +22,13 @@ export default function initIpcMainHandlers(
 ) {
   ipcMain.on('client-changed-language', async (_, newLangCode) => {
     i18n.changeLanguage(newLangCode);
-    // await settings.set('appLanguage', newLangCode);
+    if (store.has(ElectronStoreKeys.AppLanguage)) {
+      if (store.get(ElectronStoreKeys.AppLanguage) === newLangCode) {
+        return;
+      }
+      store.delete(ElectronStoreKeys.AppLanguage);
+    }
+    store.set(ElectronStoreKeys.AppLanguage, newLangCode);
   });
 
   ipcMain.handle('get-signaling-server-port', () => {
@@ -293,4 +299,25 @@ export default function initIpcMainHandlers(
     }
     store.set(ElectronStoreKeys.IsNotFirstTimeAppStart, true);
   });
+
+  ipcMain.handle(IpcEvents.GetIsAppDarkTheme, () => {
+    if (store.has(ElectronStoreKeys.IsAppDarkTheme)) {
+      return store.get(ElectronStoreKeys.IsAppDarkTheme);
+    }
+    return false;
+  });
+
+  ipcMain.handle(IpcEvents.SetIsAppDarkTheme, (_, isDarkTheme) => {
+    if (store.has(ElectronStoreKeys.IsAppDarkTheme)) {
+      store.delete(ElectronStoreKeys.IsAppDarkTheme);
+    }
+    store.set(ElectronStoreKeys.IsAppDarkTheme, isDarkTheme);
+  });
+
+  ipcMain.handle(IpcEvents.GetAppLanguage, () => {
+    if (store.has(ElectronStoreKeys.AppLanguage)) {
+      return store.get(ElectronStoreKeys.AppLanguage);
+    }
+    return 'en';
+  });
 }

app/utils/getAppLanguage.ts

@@ -1,6 +1,7 @@
-export default function getAppLanguage(): string {
-  // return settings.hasSync('appLanguage')
-  //   ? (settings.getSync('appLanguage') as string)
-  //   : 'en';
-  return 'en';
+import { ipcRenderer } from 'electron';
+import { IpcEvents } from '../main/IpcEvents.enum';
+
+export default async function getAppLanguage(): Promise<string> {
+  const appLanguage = await ipcRenderer.invoke(IpcEvents.GetAppLanguage);
+  return appLanguage;
 }

app/utils/getAppTheme.ts

@@ -1,6 +1,7 @@
-export default function getAppTheme(): boolean {
-  // return settings.hasSync('appIsDarkTheme')
-  //   ? settings.getSync('appIsDarkTheme') === 'true'
-  //   : false;
-  return true;
+import { ipcRenderer } from 'electron';
+import { IpcEvents } from '../main/IpcEvents.enum';
+
+export default async function getAppTheme(): Promise<boolean> {
+  const isAppDarkTheme = await ipcRenderer.invoke(IpcEvents.GetIsAppDarkTheme);
+  return isAppDarkTheme;
 }