First Redux implementation

Dashboard/.eslintrc.js

@@ -22,6 +22,11 @@ module.exports = {
     quotes: ["error", "double"],
     "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
     "no-console": "off",
+    "max-len": ["error", { code: 300 }],
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error",
     "import/extensions": [
       "error",
       "ignorePackages",

Dashboard/package.json

@@ -46,7 +46,8 @@
     "package": "yarn build && electron-builder --publish never",
     "postinstall": "electron-builder install-app-deps",
     "lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
-    "lint:fix": "cross-env NODE_ENV=development eslint . --cache --fix --ext .js,.jsx,.ts,.tsx"
+    "lint:fix": "cross-env NODE_ENV=development eslint . --cache --fix --ext .js,.jsx,.ts,.tsx",
+    "remotedev": "remotedev --hostname=localhost --port=8000"
   },
   "license": "ISC",
   "dependencies": {
@@ -54,6 +55,7 @@
     "@types/node": "^15.12.5",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
+    "@types/remote-redux-devtools": "^0.5.5",
     "@types/styled-components": "^5.1.11",
     "electron-acrylic-window": "^0.5.5",
     "electron-devtools-installer": "^3.2.0",
@@ -63,9 +65,15 @@
     "fs-extra": "^9.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.4",
+    "redux": "^4.1.1",
+    "redux-thunk": "^2.3.0",
+    "remote-redux-devtools": "^0.5.16",
     "screenz": "^1.0.0",
     "serialport": "^9.2.0",
+    "sqlite3": "^5.0.2",
     "styled-components": "^5.3.0",
+    "typesafe-actions": "^5.1.0",
     "typescript": "^4.3.4"
   },
   "devDependencies": {
@@ -76,6 +84,7 @@
     "@typescript-eslint/eslint-plugin": "^4.28.1",
     "@typescript-eslint/parser": "^4.28.1",
     "babel-loader": "^8.1.0",
+    "chalk": "^4.1.2",
     "concurrently": "^6.2.0",
     "cross-env": "^7.0.3",
     "css-loader": "^4.2.0",
@@ -90,6 +99,7 @@
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.2.12",
     "html-webpack-plugin": "^4.3.0",
+    "remotedev-server": "^0.3.1",
     "style-loader": "^1.2.1",
     "ts-loader": "^9.2.3",
     "wait-on": "^6.0.0",

Dashboard/src/electron.js

@@ -7,6 +7,7 @@ const isDev = require("electron-is-dev");
 const screenz = require("screenz");
 const els = require("electron-localshortcut");
 const devTools = require("electron-devtools-installer");
+const chalk = require("chalk");
 
 let tray = null;
 let mainWindow = null;
@@ -60,9 +61,13 @@ function createWindow() {
       : `file://${path.join(__dirname, "../build/index.html")}`,
   );
 
-  // Open the DevTools.
   if (isDev) {
     win.webContents.openDevTools({ mode: "detach" });
+
+    const remotedev = require("remotedev-server");
+    remotedev({ hostname: "localhost", port: 8000 }).then(() => {
+      console.log(chalk.blue("RemoteDev server running at http://localhost:8000/"));
+    });
   }
 
   // Register shortcut to open devtools

Dashboard/src/index.tsx

@@ -1,6 +1,13 @@
 import React from "react";
 import { render } from "react-dom";
+import { Provider } from "react-redux";
+import store from "./redux/store";
 
 import App from "./App";
 
-render(<App />, document.getElementById("root"));
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("root"),
+);

Dashboard/src/interfaces/ISerialConnectionState.ts

@@ -0,0 +1,9 @@
+export default interface ISerialConnectionState {
+  port: null | string;
+  status: {
+    connecting: boolean;
+    connected: boolean;
+    error: string | null;
+  };
+// eslint-disable-next-line semi
+}

Dashboard/src/redux/actions/serialConnectionActions.ts

@@ -0,0 +1,19 @@
+import { action } from "typesafe-actions";
+
+export enum SerialConnectionActionTypes {
+    SET_SERIAL_PORT = "SET_SERIAL_PORT",
+    CONNECTION_START = "CONNECTION_START",
+    CONNECTION_SUCCESS = "CONNECTION_SUCCESS",
+    CONNECTION_FAILURE = "CONNECTION_FAILURE",
+    DISCONNECT = "DISCONNECT",
+  }
+
+export const setSerialPort = (port: string) => action(SerialConnectionActionTypes.SET_SERIAL_PORT, port);
+
+export const connectionStart = () => action(SerialConnectionActionTypes.CONNECTION_START);
+
+export const connectionSuccess = () => action(SerialConnectionActionTypes.CONNECTION_SUCCESS);
+
+export const connectionFailure = (error: Error) => action(SerialConnectionActionTypes.CONNECTION_FAILURE, error);
+
+export const disconnect = () => action(SerialConnectionActionTypes.DISCONNECT);

Dashboard/src/redux/reducers/serialConnectionReducer.ts

@@ -0,0 +1,52 @@
+import { createReducer } from "typesafe-actions";
+import ISerialConnectionState from "../../interfaces/ISerialConnectionState";
+import { SerialConnectionActionTypes } from "../actions/serialConnectionActions";
+
+const initialState: ISerialConnectionState = {
+  port: null,
+  status: {
+    connecting: false,
+    connected: false,
+    error: null,
+  },
+};
+
+const SerialConnectionReducer = createReducer(initialState)
+  .handleType(SerialConnectionActionTypes.SET_SERIAL_PORT, (state, action) => ({
+    ...state,
+    port: action.payload,
+  }))
+  .handleType(SerialConnectionActionTypes.CONNECTION_START, (state) => ({
+    ...state,
+    status: {
+      connecting: true,
+      connected: false,
+      error: null,
+    },
+  }))
+  .handleType(SerialConnectionActionTypes.CONNECTION_FAILURE, (state, action) => ({
+    ...state,
+    status: {
+      connecting: false,
+      connected: false,
+      error: action.payload.message,
+    },
+  }))
+  .handleType(SerialConnectionActionTypes.CONNECTION_SUCCESS, (state) => ({
+    ...state,
+    status: {
+      connecting: false,
+      connected: true,
+      error: null,
+    },
+  }))
+  .handleType(SerialConnectionActionTypes.DISCONNECT, (state) => ({
+    ...state,
+    status: {
+      connecting: false,
+      connected: false,
+      error: null,
+    },
+  }));
+
+export default SerialConnectionReducer;

Dashboard/src/redux/store/index.ts

@@ -0,0 +1,19 @@
+import thunk from "redux-thunk";
+import { createStore, applyMiddleware } from "redux";
+import { RootAction, RootState } from "typesafe-actions";
+import composeEnhancers from "./utils";
+import rootReducer from "./root-reducer";
+
+const middlewares = [thunk];
+
+const enhancer = composeEnhancers(applyMiddleware(...middlewares));
+
+const initialState = {};
+
+const store = createStore<RootState, RootAction, any, any>(
+  rootReducer,
+  initialState,
+  enhancer,
+);
+
+export default store;

Dashboard/src/redux/store/root-action.ts

@@ -0,0 +1,7 @@
+import * as serialConnectionActions from "../actions/serialConnectionActions";
+
+const rootAction = {
+  serialConnection: serialConnectionActions,
+};
+
+export default rootAction;

Dashboard/src/redux/store/root-reducer.ts

@@ -0,0 +1,8 @@
+import { combineReducers } from "redux";
+import SerialConnectionReducer from "../reducers/serialConnectionReducer";
+
+const rootReducer = combineReducers({
+  serialConnection: SerialConnectionReducer,
+});
+
+export default rootReducer;

Dashboard/src/redux/store/types.d.ts

@@ -0,0 +1,19 @@
+import { StateType, ActionType } from "typesafe-actions";
+import { ThunkAction } from "redux-thunk";
+import rootReducer from "./root-reducer";
+import rootAction from "./root-action";
+import store from "./index";
+
+declare module "typesafe-actions" {
+  export type Store = StateType<typeof store>;
+
+  export type RootState = StateType<typeof rootReducer>;
+
+  export type RootAction = ActionType<typeof rootAction>;
+
+  export type ThunkResult<R> = ThunkAction<R, RootState, unknown, RootAction>;
+
+  interface Types {
+    RootAction: RootAction;
+  }
+}

Dashboard/src/redux/store/utils.ts

@@ -0,0 +1,12 @@
+import { composeWithDevTools } from "remote-redux-devtools";
+
+// Access Redux devtools via http://localhost:8000
+const composeEnhancers = composeWithDevTools({
+  name: "Light-Control",
+  realtime: true,
+  secure: false,
+  hostname: "localhost",
+  port: 8000,
+});
+
+export default composeEnhancers;