ipc react-electron

client/src/features/menu/MenuBar.jsx

@@ -7,6 +7,7 @@ import MinIconBtn from './buttons/MinIconBtn';
 import QuitIconBtn from './buttons/QuitIconBtn';
 import style from './MenuBar.module.css';
 import HelpIconBtn from './buttons/HelpIconBtn';
+const { ipcRenderer } = window.require('electron');
 
 export default function MenuBar(props) {
   const { onOpen, onClose } = props;
@@ -15,13 +16,32 @@ export default function MenuBar(props) {
     downloadEvents();
   };
 
+  const handleIPC = (action) => {
+    switch (action) {
+      case 'min':
+        ipcRenderer.send('set-window', 'to-tray');
+        break;
+      case 'max':
+        ipcRenderer.send('set-window', 'to-max');
+        break;
+      case 'shutdown':
+        ipcRenderer.send('shutdown', 'now');
+        break;
+      case 'help':
+        ipcRenderer.send('send-to-link', 'help');
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <>
-      <QuitIconBtn size='md' />
+      <QuitIconBtn size='md' clickhandler={() => handleIPC('shutdown')} />
-      <MaxIconBtn size='md' />
+      <MaxIconBtn size='md' clickhandler={() => handleIPC('max')} />
-      <MinIconBtn size='md' />
+      <MinIconBtn size='md' clickhandler={() => handleIPC('min')} />
       <div className={style.gap} />
-      <HelpIconBtn size='md' disabled />
+      <HelpIconBtn size='md' clickhandler={() => handleIPC('help')} />
       <SettingsIconBtn size='md' disabled />
       <InfoIconBtn size='md' clickhandler={onOpen} />
       <DownloadIconBtn size='md' clickhandler={handleDownload} />

server/electron/preload.js

@@ -1,10 +1 @@
-window.addEventListener('DOMContentLoaded', () => {
+window.require = require;
-  const replaceText = (selector, text) => {
-    const element = document.getElementById(selector);
-    if (element) element.innerText = text;
-  };
-
-  for (const type of ['chrome', 'node', 'electron']) {
-    replaceText(`${type}-version`, process.versions[type]);
-  }
-});

server/main.js

@@ -5,11 +5,14 @@ const {
   globalShortcut,
   Tray,
   dialog,
+  ipcMain,
+  shell,
 } = require('electron');
 const path = require('path');
 const { electron } = require('process');
+const { Notification } = require('electron');
 
-var env = process.env.NODE_ENV || 'prod';
+const env = process.env.NODE_ENV || 'prod';
 
 (async () => {
   const { nodeapp } = import(
@@ -33,8 +36,6 @@ if (!lock) {
   return;
 }
 
-const { Notification } = require('electron');
-
 function showNotification(text) {
   new Notification({
     title: 'ontime',
@@ -75,14 +76,19 @@ function createWindow() {
       preload: path.join(__dirname, './electron/preload.js'),
       // TODO: what are recommended alternatives to node integration?
       nodeIntegration: true,
-      // enableRemoteModule: true,
+      contextIsolation: false,
     },
   });
 
   win.setMenu(null);
 
   // Load page served by node
-  win.loadURL('http://localhost:4001/editor').then(() => {
+  const reactApp =
+    env == 'prod'
+      ? 'http://localhost:4001/editor'
+      : 'http://localhost:3000/editor';
+
+  win.loadURL(reactApp).then(() => {
     win.webContents.setBackgroundThrottling(false);
   });
 
@@ -173,3 +179,40 @@ app
 app.once('will-quit', () => {
   globalShortcut.unregisterAll();
 });
+
+// Get messages from react
+// Test message
+ipcMain.on('test-message', (event, arg) => {
+  showNotification('testing 1-2', arg);
+});
+
+// Terminate
+ipcMain.on('shutdown', (event, arg) => {
+  console.log('Got IPC shutdown');
+  win.destroy();
+  app.quit();
+});
+
+// Window manipulation
+ipcMain.on('set-window', (event, arg) => {
+  console.log('Got IPC set-window', arg);
+
+  if (arg === 'to-max') {
+    // window full
+    win.setContentSize(1920, 1080);
+    win.setPosition(0, 0);
+  } else if (arg === 'to-tray') {
+    // window to tray
+    win.close();
+  }
+});
+
+// Open links external
+ipcMain.on('send-to-link', (event, arg) => {
+  console.log('Got IPC send-to-link', arg);
+
+  // send to help URL
+  if (arg === 'help') {
+    shell.openExternal('http://blank');
+  }
+});