Pass tests again (oops)

Add type annotations to everything Typescript was complaining about.
Remove extensions from import statements because Typescript doesn't like
those either.
Struggle to get ace-builds to behave in the webpack. Importing
webpack-resolver doesn't seem to be doing anything.

package.json

@@ -79,7 +79,8 @@
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
-      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
+      "\\.(css|less|sass|scss)$": "identity-obj-proxy",
+      "ace-builds": "<rootDir>/node_modules/ace-builds"
     },
     "setupFiles": [
       "./.erb/scripts/check-build-exists.ts"

src/renderer/App.tsx

@@ -1,29 +1,36 @@
-import Topbar from './Topbar.tsx';
-import Editor from './editor/Editor.tsx';
-import DeviceInfo from './DeviceInfo.tsx';
-import AppConsole from './AppConsole.tsx';
-import ConnectionInfoModal from './modals/ConnectionInfoModal.tsx';
-import GamepadInfoModal from './modals/GamepadInfoModal.tsx';
-import ResizeBar from './ResizeBar.tsx';
+import { StrictMode } from 'react';
+import { Provider as ReduxProvider } from 'react-redux';
+import store from './store/store';
+import Topbar from './Topbar';
+import Editor from './editor/Editor';
+import DeviceInfo from './DeviceInfo';
+import AppConsole from './AppConsole';
+import ConnectionInfoModal from './modals/ConnectionInfoModal';
+import GamepadInfoModal from './modals/GamepadInfoModal';
+import ResizeBar from './ResizeBar';
 import './App.css';
 
 /**
  * Top-level component handling layout.
  */
 export default function App() {
   return (
-    <div className="App">
-      <Topbar />
-      <div className="App-cols">
-        <Editor />
-        <ResizeBar />
-        <DeviceInfo />
-      </div>
-      <AppConsole />
-      <div className="App-modal-container">
-        <ConnectionInfoModal />
-        <GamepadInfoModal />
-      </div>
-    </div>
+    <StrictMode>
+      <ReduxProvider store={store}>
+        <div className="App">
+          <Topbar />
+          <div className="App-cols">
+            <Editor />
+            <ResizeBar />
+            <DeviceInfo />
+          </div>
+          <AppConsole />
+          <div className="App-modal-container">
+            <ConnectionInfoModal />
+            <GamepadInfoModal />
+          </div>
+        </div>
+      </ReduxProvider>
+    </StrictMode>
   );
 }

src/renderer/ResizeBar.tsx

@@ -1,16 +1,20 @@
+import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { editorActions } from './store/editorSlice.tsx';
+import { editorActions } from './store/editorSlice';
+import { State } from './store/store';
 import './ResizeBar.css'
 
 /**
  * Component allowing Editor to be resized.
  */
 export default function ResizeBar() {
-  const isResizing = useSelector(state => state.editor.layoutInfo.resizeInitialXPos) !== -1;
+  const isResizing = useSelector((state: State) => state.editor.layoutInfo.resizeInitialXPos) !== -1;
   const dispatch = useDispatch();
-  const handleMouseDown = e => dispatch(editorActions.beginResizeAtPos(e.clientX));
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+    dispatch(editorActions.beginResizeAtPos(e.clientX));
   const handleMouseUp = () => dispatch(editorActions.endResize());
-  const handleMouseMove = e => dispatch(editorActions.resizeToPos(e.clientX));
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+    dispatch(editorActions.resizeToPos(e.clientX));
   return (
     <div className="ResizeBar" onMouseDown={handleMouseDown}>
       <div className="ResizeBar-active-area" onMouseUp={handleMouseUp}

src/renderer/Topbar.tsx

@@ -1,15 +1,15 @@
-import { useSelector } from 'react-redux'
-import pjson from 'package.json' assert { type: 'json' }
-import ConnectionConfig from './ConnectionConfig.tsx'
-import './Topbar.css'
+import { useSelector } from 'react-redux';
+import ConnectionConfig from './ConnectionConfig';
+import type { State } from './store/store';
+import './Topbar.css';
 
 /**
  * Component displaying Dawn version and connection info.
  */
 export default function Topbar() {
-  const robotRuntimeVersion = useSelector((state) => state.robotInfo.runtimeVersion);
-  const robotBatteryVoltage = useSelector((state) => state.robotInfo.batteryVoltage);
-  const robotLatencyMs = 100; //useSelector((state) => state.robotInfo.latencyMs);
+  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 robotInfo = robotLatencyMs == -1 ?
     (
       <div className="Topbar-robot-disconnected Topbar-info-card">DISCONNECTED</div>
@@ -31,7 +31,7 @@ export default function Topbar() {
     <div className="Topbar">
       <div className="Topbar-left-group">
         <div className="Topbar-dawn-version">
-          Dawn v{pjson.version}
+          Dawn vX.X.X
         </div>
         {robotInfo}
       </div>

src/renderer/editor/Editor.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import AceEditor from 'react-ace';
-import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/webpack-resolver';
 import { useSelector, useDispatch } from 'react-redux';
-import { editorActions } from 'renderer/store/editorSlice.tsx';
+import { editorActions } from '../store/editorSlice';
+import type { State } from '../store/store';
 
 /**
  * Component holding the Ace editor and editor toolbar.
@@ -24,13 +25,13 @@ export default function Editor() {
       () => dispatch(editorActions.resizeContainer(window.innerWidth)));
   }, [dispatch]);
 
-  const width = useSelector(state => state.editor.layoutInfo.width);
+  const width = useSelector((state: State) => state.editor.layoutInfo.width);
   return (
     <div className='Editor' style={{ width: width, flexGrow: 0 }}>
       <AceEditor
         style={{ width: '100%' }}
         mode="python"
-        onChange={(e)=>dispatch(editorActions.setContent(e))}
+        onChange={(e) => dispatch(editorActions.setContent(e))}
       />
     </div>
   );

src/renderer/index.tsx

@@ -1,18 +1,9 @@
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Provider as ReduxProvider } from 'react-redux';
-import store from './store/store.tsx';
-import App from './App.tsx';
+import App from './App';
 
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
-root.render(
-  <StrictMode>
-    <ReduxProvider store={store}>
-      <App />
-    </ReduxProvider>
-  </StrictMode>
-);
+root.render(<App />);
 
 // calling IPC exposed from preload script
 window.electron.ipcRenderer.once('ipc-example', (arg) => {

src/renderer/store/editorSlice.tsx

@@ -1,16 +1,19 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+const initialState = {
+  content: "",
+  layoutInfo: {
+    resizeInitialXPos: -1,
+    width: -1,
+    widthBeforeResize: -1,
+    containerWidth: -1,
+    maxWidthPercent: -1,
+    minWidthPercent: -1
+  }
+};
 export const editorSlice = createSlice({
   name: 'editor',
-  initialState: {
-    content: "",
-    layoutInfo: {
-      resizeInitialXPos: -1,
-      width: -1,
-      widthBeforeResize: -1,
-      containerWidth: -1
-    },
-  },
+  initialState: initialState,
   reducers: {
     /**
      * Sets the stored content of the editor.
@@ -73,4 +76,5 @@ export const editorSlice = createSlice({
 });
 
 export const editorActions = editorSlice.actions;
+export type EditorState = typeof initialState;
 export default editorSlice.reducer;

src/renderer/store/robotInfoSlice.tsx

@@ -1,13 +1,15 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+const initialState = {
+  runtimeVersion: "X.X.X",
+  latencyMs: -1,
+  batteryVoltage: 0
+};
 export const robotInfoSlice = createSlice({
   name: 'robotInfo',
-  initialState: {
-    runtimeVersion: "X.X.X",
-    latencyMs: -1,
-    batteryVoltage: 0
-  },
+  initialState: initialState,
   reducers: {}
 });
 export const robotInfoActions = robotInfoSlice.actions;
+export type RobotInfoState = typeof initialState;
 export default robotInfoSlice.reducer;

src/renderer/store/store.tsx

@@ -1,7 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
-import robotInfoReducer from './robotInfoSlice.tsx';
-import editorReducer from './editorSlice.tsx';
+import robotInfoReducer, { RobotInfoState } from './robotInfoSlice';
+import editorReducer, { EditorState } from './editorSlice';
 
+export interface State {
+  robotInfo: RobotInfoState,
+  editor: EditorState
+}
 export default configureStore({
   reducer: {
     robotInfo: robotInfoReducer,