Lint everything

src/main/main.ts

@@ -9,7 +9,7 @@
  * `./src/main.js` using webpack. This gives us some performance wins.
  */
 import path from 'path';
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
+import { app, BrowserWindow, shell } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
@@ -82,7 +82,7 @@ const createWindow = async () => {
     if (!mainWindow) {
       throw new Error('"mainWindow" is not defined');
     }
-    mainWindow.webContents.send('renderer-init', { dawnVersion: dawnVersion });
+    mainWindow.webContents.send('renderer-init', { dawnVersion });
     if (process.env.START_MINIMIZED) {
       mainWindow.minimize();
     } else {

src/renderer/App.tsx

@@ -1,4 +1,10 @@
-import { StrictMode, useState, useEffect, useLayoutEffect } from 'react';
+import {
+  StrictMode,
+  useState,
+  useReducer,
+  useEffect,
+  useLayoutEffect,
+} from 'react';
 import Topbar from './Topbar';
 import Editor from './editor/Editor';
 import DeviceInfo from './DeviceInfo';
@@ -19,8 +25,6 @@ const MIN_COLS_HEIGHT_PERCENT = 0.25;
  * Top-level component handling layout.
  */
 export default function App() {
-  // Most recent window.innerWidth/Height needed to clamp editor and col size
-  const [windowSize, setWindowSize] = useState([-1, -1]);
   // Current width of editor in pixels
   const [editorSize, setEditorSize] = useState(-1);
   // Width of editor before ongoing resize in pixels, -1 if no resize
@@ -40,27 +44,34 @@ export default function App() {
   // Robot latency, -1 if disconnected from robot
   const [robotLatencyMs, setRobotLatencyMs] = useState(-1);
   // Text content of editor
-  const [editorContent, setEditorContent] = useState('');
-
-  useLayoutEffect(() => {
-    const onResize = () => {
-      const newSize = [window.innerWidth, window.innerHeight];
-      if (editorSize === -1) {
-        setEditorSize(INITIAL_EDITOR_WIDTH_PERCENT * newSize[0]);
-      } else {
+  const [, setEditorContent] = useState('');
+  // Most recent window.innerWidth/Height needed to clamp editor and col size
+  const [windowSize, setWindowSize] = useReducer(
+    (oldSize: [number, number], newSize: [number, number]) => {
+      setEditorSize((old) => {
+        if (old === -1) {
+          return INITIAL_EDITOR_WIDTH_PERCENT * newSize[0];
+        }
         // Resize proportionally
-        setEditorSize(editorSize * newSize[0] / windowSize[0]);
-      }
-      if (colsSize === -1) {
-        setColsSize(INITIAL_COLS_HEIGHT_PERCENT * newSize[1]);
-      } else {
-        setColsSize(colsSize * newSize[1] / windowSize[1]);
-      }
-      setWindowSize(newSize);
+        return (old * newSize[0]) / oldSize[0];
+      });
+      setColsSize((old) => {
+        if (colsSize === -1) {
+          return INITIAL_COLS_HEIGHT_PERCENT * newSize[1];
+        }
+        return (old * newSize[1]) / oldSize[1];
+      });
       // Cancel any current resize
       setEditorInitialSize(-1);
       setColsInitialSize(-1);
-    };
+      return newSize;
+    },
+    [-1, -1],
+  );
+
+  useLayoutEffect(() => {
+    const onResize = () =>
+      setWindowSize([window.innerWidth, window.innerHeight]);
     window.addEventListener('resize', onResize);
     onResize();
     return () => window.removeEventListener('resize', onResize);
@@ -73,23 +84,31 @@ export default function App() {
         setDawnVersion((data as { dawnVersion: string }).dawnVersion);
       });
       // ipcRenderer.on returns a cleanup function
-      return window.electron.ipcRenderer.on('robot-connection-update', (data) => {
-        const { runtimeVersion, robotBatteryVoltage, robotLatencyMs } = data as {
-          runtimeVersion?: string;
-          robotBatteryVoltage?: number;
-          robotLatencyMs?: number
-        };
-        if (runtimeVersion !== undefined) {
-          setRuntimeVersion(runtimeVersion);
-        }
-        if (robotBatteryVoltage !== undefined) {
-          setRobotBatteryVoltage(robotBatteryVoltage);
-        }
-        if (robotLatencyMs !== undefined) {
-          setRobotLatencyMs(robotLatencyMs);
-        }
-      });
+      return window.electron.ipcRenderer.on(
+        'robot-connection-update',
+        (data) => {
+          const {
+            newRuntimeVersion,
+            newRobotBatteryVoltage,
+            newRobotLatencyMs,
+          } = data as {
+            newRuntimeVersion?: string;
+            newRobotBatteryVoltage?: number;
+            newRobotLatencyMs?: number;
+          };
+          if (newRuntimeVersion !== undefined) {
+            setRuntimeVersion(newRuntimeVersion);
+          }
+          if (newRobotBatteryVoltage !== undefined) {
+            setRobotBatteryVoltage(newRobotBatteryVoltage);
+          }
+          if (newRobotLatencyMs !== undefined) {
+            setRobotLatencyMs(newRobotLatencyMs);
+          }
+        },
+      );
     }
+    return () => {};
   }, []);
 
   // Editor ResizeBar handlers:
@@ -99,13 +118,15 @@ export default function App() {
       // Drop update, the window was just resized
       return false;
     }
-    setEditorSize(Math.max(
-      Math.min(
-        editorInitialSize + d,
-        MAX_EDITOR_WIDTH_PERCENT * windowSize[0]
+    setEditorSize(
+      Math.max(
+        Math.min(
+          editorInitialSize + d,
+          MAX_EDITOR_WIDTH_PERCENT * windowSize[0],
+        ),
+        MIN_EDITOR_WIDTH_PERCENT * windowSize[0],
       ),
-      MIN_EDITOR_WIDTH_PERCENT * windowSize[0]
-    ));
+    );
     return true;
   };
   const endEditorResize = () => setEditorInitialSize(-1);
@@ -116,17 +137,16 @@ export default function App() {
     if (colsInitialSize === -1) {
       return false;
     }
-    setColsSize(Math.max(
-      Math.min(
-        colsInitialSize + d,
-        MAX_COLS_HEIGHT_PERCENT * windowSize[1]
+    setColsSize(
+      Math.max(
+        Math.min(colsInitialSize + d, MAX_COLS_HEIGHT_PERCENT * windowSize[1]),
+        MIN_COLS_HEIGHT_PERCENT * windowSize[1],
       ),
-      MIN_COLS_HEIGHT_PERCENT * windowSize[1]
-    ));
+    );
     return true;
   };
   const endColsResize = () => setColsInitialSize(-1);
-  
+
   const closeModal = () => setActiveModal('');
 
   return (
@@ -137,29 +157,34 @@ export default function App() {
           dawnVersion={dawnVersion}
           runtimeVersion={runtimeVersion}
           robotLatencyMs={robotLatencyMs}
-          robotBatteryVoltage={robotBatteryVoltage} />
+          robotBatteryVoltage={robotBatteryVoltage}
+        />
         <div className="App-cols" style={{ height: colsSize }}>
           <Editor width={editorSize} onChange={setEditorContent} />
           <ResizeBar
             onStartResize={startEditorResize}
             onUpdateResize={updateEditorResize}
             onEndResize={endEditorResize}
-            axis="x" />
+            axis="x"
+          />
           <DeviceInfo />
         </div>
         <ResizeBar
           onStartResize={startColsResize}
           onUpdateResize={updateColsResize}
           onEndResize={endColsResize}
-          axis="y" />
+          axis="y"
+        />
         <AppConsole />
         <div className="App-modal-container">
           <ConnectionConfigModal
             isActive={activeModal === 'ConnectionConfig'}
-            onClose={closeModal} />
+            onClose={closeModal}
+          />
           <GamepadInfoModal
             isActive={activeModal === 'GamepadInfo'}
-            onClose={closeModal} />
+            onClose={closeModal}
+          />
         </div>
       </div>
     </StrictMode>

src/renderer/AppConsole.tsx

@@ -6,9 +6,7 @@ import './AppConsole.css';
 export default function AppConsole() {
   return (
     <div className="AppConsole">
-      <div className="AppConsole-inner">
-        Test
-      </div>
+      <div className="AppConsole-inner">Test</div>
     </div>
   );
 }

src/renderer/ConnectionConfig.tsx

@@ -1,10 +1,18 @@
 /**
  * Button component that opens the ConnectionConfigModal.
  */
-export default function ConnectionConfig({ onModalOpen }: { onModalOpen: () => void }) {
+export default function ConnectionConfig({
+  onModalOpen,
+}: {
+  onModalOpen: () => void;
+}) {
   return (
     <div className="ConnectionConfig">
-      <button className="ConnectionConfig-button" onClick={onModalOpen}>
+      <button
+        className="ConnectionConfig-button"
+        type="button"
+        onClick={onModalOpen}
+      >
         Connection settings...
       </button>
     </div>

src/renderer/DeviceInfo.tsx

@@ -4,7 +4,5 @@ import './DeviceInfo.css';
  * Component displaying information about input devices and peripherals connected to the robot.
  */
 export default function DeviceInfo() {
-  return (
-    <div className="DeviceInfo">Device info</div>
-  );
+  return <div className="DeviceInfo">Device info</div>;
 }

src/renderer/ResizeBar.tsx

@@ -1,26 +1,31 @@
 import React, { useState } from 'react';
-import './ResizeBar.css'
+import './ResizeBar.css';
 
 /**
  * Component allowing Editor to be resized.
  */
-export default function ResizeBar({ onStartResize, onUpdateResize, onEndResize, axis }: {
-  onStartResize?: () => void;
+export default function ResizeBar({
+  onStartResize = () => {},
+  onUpdateResize,
+  onEndResize = () => {},
+  axis,
+}: {
+  onStartResize: () => void;
   onUpdateResize: (pos: number) => boolean;
-  onEndResize?: () => void;
-  axis: 'x' | 'y'
+  onEndResize: () => void;
+  axis: 'x' | 'y';
 }) {
   const [isResizing, setIsResizing] = useState(false);
   const [initialSize, setInitialSize] = useState(0);
-  const selectCoordinate = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+  const selectCoordinate = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+  ) => {
     return axis === 'x' ? e.clientX : e.clientY;
   };
   const startResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     setIsResizing(true);
     setInitialSize(selectCoordinate(e));
-    if (onStartResize) {
-      onStartResize();
-    }
+    onStartResize();
   };
   const updateResize = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (!onUpdateResize(selectCoordinate(e) - initialSize)) {
@@ -29,15 +34,22 @@ export default function ResizeBar({ onStartResize, onUpdateResize, onEndResize,
   };
   const endResize = () => {
     setIsResizing(false);
-    if (onEndResize) {
-      onEndResize();
-    }
+    onEndResize();
   };
   return (
-    <div className={'ResizeBar ResizeBar-axis-' + axis} onMouseDown={startResize}>
-      <div className="ResizeBar-active-area" onMouseUp={endResize} onMouseLeave={endResize}
-        onMouseMove={updateResize} style={{ display: isResizing ? "block" : "none" }}>
-      </div>
+    <div
+      className={`ResizeBar ResizeBar-axis-${axis}`}
+      onMouseDown={startResize}
+      role="presentation" // Not sure how else to write this so jsx-a11y is happy
+    >
+      <div
+        className="ResizeBar-active-area"
+        onMouseUp={endResize}
+        onMouseLeave={endResize}
+        onMouseMove={updateResize}
+        role="presentation"
+        style={{ display: isResizing ? 'block' : 'none' }}
+      />
     </div>
   );
 }

src/renderer/Topbar.tsx

@@ -4,43 +4,43 @@ import './Topbar.css';
 /**
  * Component displaying Dawn version and connection info.
  */
-export default function Topbar({ onConnectionConfigModalOpen, runtimeVersion, robotBatteryVoltage,
-    robotLatencyMs, dawnVersion }: {
+export default function Topbar({
+  onConnectionConfigModalOpen,
+  runtimeVersion,
+  robotBatteryVoltage,
+  robotLatencyMs,
+  dawnVersion,
+}: {
   onConnectionConfigModalOpen: () => void;
   runtimeVersion: string;
   robotBatteryVoltage: number;
   robotLatencyMs: number;
   dawnVersion: string;
 }) {
-  const robotInfo = robotLatencyMs == -1 ?
-    (
-      <div className="Topbar-robot-disconnected Topbar-info-card">DISCONNECTED</div>
-    ) :
-    (
+  const robotInfo =
+    robotLatencyMs === -1 ? (
+      <div className="Topbar-robot-disconnected Topbar-info-card">
+        DISCONNECTED
+      </div>
+    ) : (
       <>
         <div className="Topbar-runtime-version Topbar-info-card">
           Runtime v{runtimeVersion}
         </div>
-        <div className="Topbar-info-card">
-          Battery: {robotBatteryVoltage} V
-        </div>
-        <div className="Topbar-info-card">
-          Latency: {robotLatencyMs} ms
-        </div>
+        <div className="Topbar-info-card">Battery: {robotBatteryVoltage} V</div>
+        <div className="Topbar-info-card">Latency: {robotLatencyMs} ms</div>
       </>
     );
   return (
     <div className="Topbar">
       <div className="Topbar-left-group">
-        <div className="Topbar-dawn-version">
-          Dawn v{dawnVersion}
-        </div>
+        <div className="Topbar-dawn-version">Dawn v{dawnVersion}</div>
         {robotInfo}
       </div>
       <div className="Topbar-right-group">
         <ConnectionConfig onModalOpen={onConnectionConfigModalOpen} />
       </div>
-      <div className="Topbar-tail"></div>
+      <div className="Topbar-tail" />
     </div>
   );
 }