Migrate Redux to Mobx

main/MenuTemplate/HelpMenu.ts

@@ -4,14 +4,15 @@
 import RendererBridge from '../RendererBridge';
 import showAPI from '../main-process';
 import { MenuItemConstructorOptions } from 'electron';
+import { ipcChannels } from '../../shared';
 
 const HelpMenu: MenuItemConstructorOptions = {
   label: 'Help',
   submenu: [
     {
       label: 'Interactive Tutorial',
       click() {
-        RendererBridge.dispatch('main', 'start-interactive-tour');
+        RendererBridge.dispatch('main', ipcChannels.START_INTERACTIVE_TOUR);
       },
       accelerator: 'CommandOrControl+T',
     },

main/RendererBridge.ts

@@ -5,6 +5,7 @@
 
 import _ from 'lodash';
 import { BrowserWindow } from "electron";
+import { ipcChannels } from '../shared';
 
 type SingleOrArray<T> = T | T[];
 
@@ -58,7 +59,7 @@ class RendererBridge {
         const registeredWindow = this.registeredWindows[key];
 
         // Special case for dispatching Redux since we can only dispatch one action at a time
-        if (channel === 'reduxDispatch') {
+        if (channel === ipcChannels.REDUX_DISPATCH) {
           data = data[0];
         }
 
@@ -75,7 +76,7 @@ class RendererBridge {
    * Redux actions to the main window to avoid large refactors from the current usage of this method.
    */
   reduxDispatch = (action: any, windowKeys: SingleOrArray<string> | 'all' | 'main' = 'main') => {
-    this.dispatch(windowKeys, 'reduxDispatch', action);
+    this.dispatch(windowKeys, ipcChannels.REDUX_DISPATCH, action);
   };
 };
 

main/networking/Runtime.ts

@@ -1,6 +1,7 @@
 import { Socket as TCPSocket } from 'net';
 import { ipcMain, IpcMainEvent } from 'electron';
 import * as protos from '../../protos-main';
+import { ipcChannels } from '../../shared';
 
 import RendererBridge from '../RendererBridge';
 import { updateConsole } from '../../renderer/actions/ConsoleActions';
@@ -227,7 +228,7 @@ class RuntimeConnection {
             break;
 
           default:
-            this.logger.log(`Unsupported received message type: ${packet.type}`)
+            this.logger.log(`Unsupported received message type: ${packet.type}`);
         }
       }
 
@@ -237,13 +238,17 @@ class RuntimeConnection {
     /**
      * TCP Socket IPC Connections
      */
-    ipcMain.on('runModeUpdate', (event: IpcMainEvent, ...args: any[]) => this.whenConnectionEstablished(this.sendRunMode, event, ...args));
-    ipcMain.on('initiateLatencyCheck', (event: IpcMainEvent, ...args: any[]) =>
+    ipcMain.on(ipcChannels.RUN_MODE_UPDATE, (event: IpcMainEvent, ...args: any[]) =>
+      this.whenConnectionEstablished(this.sendRunMode, event, ...args)
+    );
+    ipcMain.on(ipcChannels.INITIATE_LATENCY_CHECK, (event: IpcMainEvent, ...args: any[]) =>
       this.whenConnectionEstablished(this.initiateLatencyCheck, event, ...args)
     );
-    ipcMain.on('stateUpdate', (event: IpcMainEvent, ...args: any[]) => this.whenConnectionEstablished(this.sendInputs, event, ...args));
+    ipcMain.on(ipcChannels.STATE_UPDATE, (event: IpcMainEvent, ...args: any[]) =>
+      this.whenConnectionEstablished(this.sendInputs, event, ...args)
+    );
 
-    ipcMain.on('ipAddress', this.ipAddressListener);
+    ipcMain.on(ipcChannels.IP_ADDRESS, this.ipAddressListener);
   }
 
   whenConnectionEstablished = (cb: (event: IpcMainEvent, ...args: any[]) => void, event: IpcMainEvent, ...args: any[]) => {
@@ -326,10 +331,10 @@ class RuntimeConnection {
 
   close = () => {
     this.socket.end();
-    ipcMain.removeListener('runModeUpdate', this.sendRunMode);
-    ipcMain.removeListener('ipAddress', this.ipAddressListener);
-    ipcMain.removeListener('initiateLatencyCheck', this.initiateLatencyCheck);
-    ipcMain.removeListener('stateUpdate', this.sendInputs);
+    ipcMain.removeListener(ipcChannels.RUN_MODE_UPDATE, this.sendRunMode);
+    ipcMain.removeListener(ipcChannels.IP_ADDRESS, this.ipAddressListener);
+    ipcMain.removeListener(ipcChannels.INITIATE_LATENCY_CHECK, this.initiateLatencyCheck);
+    ipcMain.removeListener(ipcChannels.STATE_UPDATE, this.sendInputs);
   };
 }
 

package.json

@@ -122,6 +122,8 @@
     "json-loader": "0.5.7",
     "keymirror": "0.1.1",
     "lodash": ">=4.17.21",
+    "mobx": "^6.3.2",
+    "mobx-react": "^7.2.0",
     "mousetrap": "1.6.1",
     "numeral": "2.0.6",
     "object-assign": "4.1.1",

renderer/components/App.tsx

@@ -13,6 +13,9 @@ import { logging, startLog } from '../utils/utils';
 import { FieldControlConfig } from '../types';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
+import { Observer } from 'mobx-react';
+import { useStores } from '../hooks';
+import { ipcChannels } from '../../shared';
 
 type ElectronJSONStorage = typeof electronJSONStorage;
 
@@ -30,7 +33,6 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  onAlertDone: (id: number) => void;
   onFCUpdate: (param: FieldControlConfig) => void;
 }
 
@@ -41,9 +43,11 @@ export const AppComponent = (props: Props) => {
   const [tourRunning, changeTourRunning] = useState(false);
   startLog();
 
+  const { info, settings, fieldStore } = useStores();
+
   useEffect(() => {
     addSteps(joyrideSteps);
-    ipcRenderer.on('start-interactive-tour', () => {
+    ipcRenderer.on(ipcChannels.START_INTERACTIVE_TOUR, () => {
       startTour();
     });
     storage.has('firstTime', (hasErr: any, hasKey: any) => {
@@ -67,7 +71,7 @@ export const AppComponent = (props: Props) => {
         return;
       }
       const fieldControlConfig = data as FieldControlConfig;
-      props.onFCUpdate(fieldControlConfig);
+      fieldStore.updateFCConfig(fieldControlConfig);
       ipcRenderer.send('FC_CONFIG_CHANGE', fieldControlConfig);
     });
   }, []);
@@ -93,19 +97,11 @@ export const AppComponent = (props: Props) => {
     }
   };
 
-  const { runtimeStatus, masterStatus, connectionStatus, isRunningCode } = props;
-
   const bsPrefix = props.globalTheme === 'dark' ? 'text-light bg-dark' : '';
 
   return (
     <div className={`${bsPrefix} mt-4`.trim()}>
-      <DNav
-        startTour={startTour}
-        runtimeStatus={runtimeStatus}
-        masterStatus={masterStatus}
-        connectionStatus={connectionStatus}
-        isRunningCode={isRunningCode}
-      />
+      <DNav startTour={startTour} />
       <Joyride
         steps={steps}
         continuous={true}
@@ -121,13 +117,7 @@ export const AppComponent = (props: Props) => {
         }}
       />
       <div style={{ height: '35px', marginBottom: '21px' }} />
-      <Dashboard
-        {...props}
-        addSteps={addSteps}
-        connectionStatus={connectionStatus}
-        runtimeStatus={runtimeStatus}
-        isRunningCode={isRunningCode}
-      />
+      <Observer>{() => <Dashboard {...props} addSteps={addSteps} isRunningCode={info.isRunningCode} />}</Observer>
     </div>
   );
 };
@@ -143,9 +133,6 @@ const mapStateToProps = (state: ApplicationState) => ({
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onAlertDone: (id: number) => {
-    dispatch(removeAsyncAlert(id));
-  },
   onFCUpdate: (param: FieldControlConfig) => {
     dispatch(updateFieldControl(param));
   }

renderer/components/ConfigBox.tsx

@@ -9,6 +9,8 @@ import { updateFieldControl } from '../actions/FieldActions';
 import { ipChange, sshIpChange } from '../actions/InfoActions';
 import storage from 'electron-json-storage';
 import { Formik } from 'formik';
+import { useStores } from '../hooks';
+import { Observer } from 'mobx-react';
 
 interface Config {
   stationNumber: number;
@@ -33,30 +35,32 @@ interface OwnProps {
   hide: () => void;
 }
 
-type Props = StateProps & DispatchProps & OwnProps;
+type Props = DispatchProps & OwnProps;
 type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
-
+// TODO: lots of changes to be done here
 export const ConfigBoxComponent = (props: Props) => {
-  const [ipAddress, setIPAddress] = useState(props.ipAddress);
-  const [sshAddress, setSSHAddress] = useState(props.sshAddress);
-  const [fcAddress, setFCAddress] = useState(props.fcAddress);
-  const [stationNumber, setStationNumber] = useState(props.stationNumber);
-  const [originalIPAddress, setOriginalIPAddress] = useState(props.ipAddress);
-  const [originalSSHAddress, setOriginalSSHAddress] = useState(props.sshAddress);
-  const [originalStationNumber, setOriginalStationNumber] = useState(props.stationNumber);
-  const [originalFCAddress, setOriginalFCAddress] = useState(props.fcAddress);
+
+  const {info, fieldStore} = useStores();
+
+  const [ipAddress, setIPAddress] = useState(info.ipAddress);
+  const [sshAddress, setSSHAddress] = useState(info.sshAddress);
+  const [fcAddress, setFCAddress] = useState(props.fcAddress); //TODO
+  const [stationNumber, setStationNumber] = useState(fieldStore.stationNumber);
+  const [originalIPAddress, setOriginalIPAddress] = useState(info.ipAddress);
+  const [originalSSHAddress, setOriginalSSHAddress] = useState(info.sshAddress);
+  const [originalStationNumber, setOriginalStationNumber] = useState(fieldStore.stationNumber);
+  const [originalFCAddress, setOriginalFCAddress] = useState(props.fcAddress); //TODO
 
   const saveChanges = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    props.onIPChange(ipAddress);
-    setOriginalIPAddress(ipAddress);
+    info.ipChange(ipAddress);
     storage.set('ipAddress', { ipAddress }, (err: any) => {
       if (err) logging.log(err);
     });
 
-    props.onSSHAddressChange(sshAddress);
+    info.sshIpChange(sshAddress);
     setOriginalSSHAddress(sshAddress);
     storage.set('sshAddress', { sshAddress }, (err: any) => {
       if (err) {
@@ -68,7 +72,7 @@ export const ConfigBoxComponent = (props: Props) => {
       stationNumber: stationNumber,
       bridgeAddress: fcAddress,
     };
-    props.onFCUpdate(newConfig);
+    fieldStore.updateFCConfig(newConfig);
     setOriginalStationNumber(stationNumber);
     setOriginalFCAddress(fcAddress);
 
@@ -118,7 +122,7 @@ export const ConfigBoxComponent = (props: Props) => {
       } else if (!_.isEmpty(data)) {
         const ipAddress = (data as { ipAddress: string | undefined }).ipAddress ?? defaults.IPADDRESS;
 
-        props.onIPChange(ipAddress);
+        info.ipChange(ipAddress);
         setIPAddress(ipAddress);
         setOriginalIPAddress(ipAddress);
       }
@@ -130,7 +134,7 @@ export const ConfigBoxComponent = (props: Props) => {
       } else if (!_.isEmpty(data)) {
         const sshAddress = (data as { sshAddress: string | undefined }).sshAddress ?? defaults.IPADDRESS;
 
-        props.onSSHAddressChange(sshAddress);
+        info.sshIpChange(sshAddress);
         setSSHAddress(sshAddress);
         setOriginalSSHAddress(sshAddress);
       }

renderer/components/ConsoleOutput.tsx

@@ -1,23 +1,22 @@
 import React, { useEffect, useRef } from 'react';
 import { Card } from 'react-bootstrap';
-
-interface StateProps {
-  toggleConsole: () => void;
-  disableScroll: boolean;
-}
+import { useStores } from '../hooks';
 
 interface OwnProps {
+  toggleConsole: () => void;
   height: number;
   output: string[];
   show: boolean;
 }
 
-type Props = StateProps & OwnProps;
+type Props = OwnProps;
 
 export function ConsoleOutput(props: Props) {
   let outerDiv: HTMLDivElement | HTMLPreElement | null;
   const { show, output } = props;
 
+  const { console } = useStores();
+
   const prevOutputRef = useRef([] as string[]);
   const prevOutput = prevOutputRef.current;
   useEffect(() => {
@@ -29,7 +28,7 @@ export function ConsoleOutput(props: Props) {
   });
 
   const scrollToBottom = () => {
-    if (!props.disableScroll) {
+    if (!console.disableScroll.get()) {
       if (outerDiv !== null) {
         outerDiv.scrollTop = outerDiv.scrollHeight;
       }