Test out Electron IPC

Use IPC to send version from package.json to renderer process.
Add reducers for robotInfoSlice.

src/main/main.ts

@@ -14,6 +14,8 @@ import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
 import { resolveHtmlPath } from './util';
+import { version as dawnVersion } from '../../package.json';
+import { robotInfoActions } from '../renderer/store/robotInfoSlice';
 
 class AppUpdater {
   constructor() {
@@ -25,12 +27,6 @@ class AppUpdater {
 
 let mainWindow: BrowserWindow | null = null;
 
-ipcMain.on('ipc-example', async (event, arg) => {
-  const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
-  console.log(msgTemplate(arg));
-  event.reply('ipc-example', msgTemplate('pong'));
-});
-
 if (process.env.NODE_ENV === 'production') {
   const sourceMapSupport = require('source-map-support');
   sourceMapSupport.install();
@@ -87,6 +83,8 @@ const createWindow = async () => {
     if (!mainWindow) {
       throw new Error('"mainWindow" is not defined');
     }
+    mainWindow.webContents.send('renderer-store-dispatch',
+      robotInfoActions.setDawnVersion(dawnVersion));
     if (process.env.START_MINIMIZED) {
       mainWindow.minimize();
     } else {

src/main/preload.ts

@@ -2,7 +2,7 @@
 /* eslint no-unused-vars: off */
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 
-export type Channels = 'ipc-example';
+export type Channels = 'renderer-store-dispatch';
 
 const electronHandler = {
   ipcRenderer: {

src/renderer/App.css

@@ -6,16 +6,13 @@ body {
   display: flex;
   flex-direction: row;
 }
-.App-cols > * {
-  flex-grow: 1;
-}
 .App-modal-container {
   width: 100%;
   height: 100%;
   position: fixed;
   background-color: rgb(0 0 0 / 80%);
   display: none;
 }
-.App-modal-container:has(modal-active) {
+.App-modal-container:has(.modal-active) {
   display: block;
 }

src/renderer/DeviceInfo.css

@@ -0,0 +1,3 @@
+.DeviceInfo {
+  flex-grow: 1;
+}

src/renderer/DeviceInfo.tsx

@@ -1,3 +1,5 @@
+import './DeviceInfo.css';
+
 /**
  * Component displaying information about input devices and peripherals connected to the robot.
  */

src/renderer/ResizeBar.css

@@ -1,6 +1,6 @@
 .ResizeBar {
   background-color: black;
-  max-width: 5px;
+  width: 5px;
   cursor: col-resize;
 }
 .ResizeBar-active-area {

src/renderer/ResizeBar.tsx

@@ -8,17 +8,18 @@ import './ResizeBar.css'
  * Component allowing Editor to be resized.
  */
 export default function ResizeBar() {
-  const isResizing = useSelector((state: State) => state.editor.layoutInfo.resizeInitialXPos) !== -1;
+  const isResizing = useSelector((state: State) =>
+    (state.editor.layoutInfo.resizeInitialXPos !== -1));
   const dispatch = useDispatch();
-  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+  const startResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
     dispatch(editorActions.beginResizeAtPos(e.clientX));
-  const handleMouseUp = () => dispatch(editorActions.endResize());
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+  const updateResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
     dispatch(editorActions.resizeToPos(e.clientX));
+  const endResize = () => dispatch(editorActions.endResize());
   return (
-    <div className="ResizeBar" onMouseDown={handleMouseDown}>
-      <div className="ResizeBar-active-area" onMouseUp={handleMouseUp}
-        onMouseMove={handleMouseMove} style={{ display: isResizing ? "block" : "none" }}>
+    <div className="ResizeBar" onMouseDown={startResize}>
+      <div className="ResizeBar-active-area" onMouseUp={endResize} onMouseLeave={endResize}
+        onMouseMove={updateResize} style={{ display: isResizing ? "block" : "none" }}>
       </div>
     </div>
   );

src/renderer/Topbar.css

@@ -1,5 +1,5 @@
 .Topbar {
-  width: 100%;
+  width: calc(100% - 20px);
   font-family: Tahoma, sans-serif;
   padding: 10px;
   user-select: none;

src/renderer/Topbar.tsx

@@ -10,6 +10,7 @@ export default function Topbar() {
   const robotRuntimeVersion = useSelector((state: State) => state.robotInfo.runtimeVersion);
   const robotBatteryVoltage = useSelector((state: State) => state.robotInfo.batteryVoltage);
   const robotLatencyMs = useSelector((state: State) => state.robotInfo.latencyMs);
+  const dawnVersion = useSelector((state: State) => state.robotInfo.dawnVersion);
   const robotInfo = robotLatencyMs == -1 ?
     (
       <div className="Topbar-robot-disconnected Topbar-info-card">DISCONNECTED</div>
@@ -31,7 +32,7 @@ export default function Topbar() {
     <div className="Topbar">
       <div className="Topbar-left-group">
         <div className="Topbar-dawn-version">
-          Dawn vX.X.X
+          Dawn v{dawnVersion}
         </div>
         {robotInfo}
       </div>

src/renderer/index.tsx

@@ -1,13 +1,12 @@
 import { createRoot } from 'react-dom/client';
 import App from './App';
+import store from './store/store';
 
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
 root.render(<App />);
 
-// calling IPC exposed from preload script
-window.electron.ipcRenderer.once('ipc-example', (arg) => {
-  // eslint-disable-next-line no-console
-  console.log(arg);
+window.electron.ipcRenderer.on('renderer-store-dispatch', (action) => {
+  console.log('renderer store dispatch');
+  store.dispatch(action);
 });
-window.electron.ipcRenderer.sendMessage('ipc-example', ['ping']);

src/renderer/store/robotInfoSlice.tsx

@@ -1,14 +1,32 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
-  runtimeVersion: "X.X.X",
+  dawnVersion: '', // not technically robot info, but we get it through the main process
+  runtimeVersion: '',
   latencyMs: -1,
   batteryVoltage: 0
 };
 export const robotInfoSlice = createSlice({
   name: 'robotInfo',
   initialState: initialState,
-  reducers: {}
+  reducers: {
+    setDawnVersion: (state, { payload }) => {
+      state.dawnVersion = payload;
+    },
+    setRuntimeVersion: (state, { payload }) => {
+      state.runtimeVersion = payload;
+    },
+    setLatency: (state, { payload }) => {
+      state.latencyMs = payload;
+      if (payload === -1) {
+        state.runtimeVersion = '';
+        state.batteryVoltage = 0;
+      }
+    },
+    setBatteryVoltage: (state, { payload }) => {
+      state.batteryVoltage = payload;
+    }
+  }
 });
 export const robotInfoActions = robotInfoSlice.actions;
 export type RobotInfoState = typeof initialState;