Make user preferences persist between app start. (#56)

Fixed ACPU/BCPU tables
Align to center table's content

Author: volodymyrkochyn

main.js

@@ -105,7 +105,7 @@ const startFlaskServer = () => {
   });
 
   apiServer.on('close', (code) => {
-    console.log(`child process exited with code ${code}`);
+    console.log(`serverProcess exited with code ${code}`);
   });
 
   apiServer.on('message', (message) => {
@@ -115,7 +115,7 @@ const startFlaskServer = () => {
   return apiServer;
 };
 
-let child = null;
+let serverProcess = null;
 const createWindow = () => {
   mainWindow = new BrowserWindow({
     width: 1200,
@@ -132,18 +132,26 @@ const createWindow = () => {
   const menu = Menu.buildFromTemplate(template);
   Menu.setApplicationMenu(menu);
 
+  mainWindow.webContents.on('did-finish-load', () => {
+    mainWindow.webContents.send('loadConfig', store.store);
+  });
+
   ipcMain.on('config', (event, arg) => {
     store.set('port', arg.port);
     store.set('device_xml', arg.device_xml);
 
-    child.kill();
-    child = startFlaskServer();
-    mainWindow.reload();
+    serverProcess.kill();
+
+    app.relaunch();
+    app.quit();
+  });
+  ipcMain.on('getConfig', (event, arg) => {
+    mainWindow.webContents.send('loadConfig', store.store);
   });
 };
 
 app.whenReady().then(() => {
-  child = startFlaskServer();
+  serverProcess = startFlaskServer();
   createWindow();
 
   app.on('activate', () => {
@@ -152,6 +160,6 @@ app.whenReady().then(() => {
 });
 
 app.on('window-all-closed', () => {
-  child.kill('SIGINT');
+  serverProcess.kill('SIGINT');
   if (process.platform !== 'darwin') app.quit();
 });

src/App.js

@@ -46,14 +46,17 @@ function App() {
   const [topLevel, setTopLevel] = React.useState('');
   const [config, setConfig] = React.useState({});
   const { toggleItemSelection } = useSelection();
+  const [preferencesChanged, setPreferencesChanged] = React.useState(false);
 
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const showModal = () => {
+    setPreferencesChanged(false);
     setIsModalOpen(true);
   };
   const handleOk = () => {
-    setIsModalOpen(false);
-    window.ipcAPI.send('config', config);
+    // this will restart app
+    if (preferencesChanged) window.ipcAPI.send('config', config);
+    else setIsModalOpen(false);
   };
   const handleCancel = () => {
     setIsModalOpen(false);
@@ -69,14 +72,17 @@ function App() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [openedTable]);
 
-  React.useEffect(() => server.GET(server.devices, setDevices), []);
-
   React.useEffect(() => {
+    window.ipcAPI.send('getConfig');
     if ((typeof window !== 'undefined')) {
       window.ipcAPI.loadPreferences('preferences', (event, data) => {
         setConfig(data);
         showModal();
       });
+      window.ipcAPI.loadPreferences('loadConfig', (event, data) => {
+        setConfig(data);
+        server.setPort(data.port, setDevices);
+      });
     }
   }, []);
 
@@ -119,6 +125,7 @@ function App() {
   };
 
   const handleConfigChange = (name, val) => {
+    setPreferencesChanged(true);
     setConfig({ ...config, [name]: val });
   };
 

src/components/style/ACPUTable.css

@@ -3,6 +3,7 @@
     padding-top: 0;
     display: inline-flex;
     gap: 10px;
+    width: 100%;
 }
 
 .acpu-group {
@@ -21,13 +22,15 @@
 }
 
 .cpu-container {
-    display: inline-flex;
+    display: flex;
+    flex-direction: row;
     gap: 10px;
+    width: 100%;
 }
 
 .acpu-group-container {
     border-right: 1px solid var(--border-color);
     border-left: 1px solid var(--border-color);
     padding-right: 10px;
     padding-left: 10px;
-}
+}

src/components/style/ComponentTable.css

@@ -22,6 +22,7 @@
 
 .table-style td {
     white-space: nowrap;
+    text-align: center;
 }
 
 .table-style tbody tr:hover {

src/components/style/DesignParametesTable.css

@@ -3,6 +3,7 @@
     flex-direction: row;
     column-gap: 10px;
     padding: 10px;
+    width: 100%;
 }
 
 .param-element-container input,

src/utils/serverAPI.js

@@ -3,16 +3,24 @@ import { formatString } from './common';
 const config = require('../../rpe.config.json');
 
 const { server } = config;
-const { port } = config;
+let { port } = config;
 
-export const devices = formatString('{0}:{1}/devices', server, port);
+export function devices() { return formatString('{0}:{1}/devices', server, port); }
+
+export function setPort(p, fetchDevices) {
+  if (p !== undefined) {
+    port = p;
+    // eslint-disable-next-line no-use-before-define
+    GET(devices(), fetchDevices);
+  }
+}
 
 export function peripheralPath(deviceId, url) {
-  return formatString('{0}/{1}/peripherals/{2}', devices, deviceId, url);
+  return formatString('{0}/{1}/peripherals/{2}', devices(), deviceId, url);
 }
 
 export function deviceInfo(deviceId) {
-  return formatString('{0}/{1}', devices, deviceId);
+  return formatString('{0}/{1}', devices(), deviceId);
 }
 
 export const Elem = {
@@ -26,15 +34,15 @@ export const Elem = {
 
 export const api = {
   fetch(func, deviceId) {
-    return formatString('{0}/{1}/{2}', devices, deviceId, func);
+    return formatString('{0}/{1}/{2}', devices(), deviceId, func);
   },
 
   consumption(func, deviceId) {
-    return formatString('{0}/{1}/{2}/consumption', devices, deviceId, func);
+    return formatString('{0}/{1}/{2}/consumption', devices(), deviceId, func);
   },
 
   index(func, deviceId, index) {
-    return formatString('{0}/{1}/{2}/{3}', devices, deviceId, func, index);
+    return formatString('{0}/{1}/{2}/{3}', devices(), deviceId, func, index);
   },
 };