Convert navbar to redux (#627)

* Moved over some initial things and com ports

* Finished conversions

* kept things persistent

* Changed to useSelector for connected everywhere now :D

* formatted

* AI suggestions

* fixed wireless

* null vs undefined :DDD

* Replaced session storage

* All use session storages converted over

* Revert "Replaced session storage"

This reverts commit ade054e.

* Revert "All use session storages converted over"

This reverts commit 7798b80.

* Actually fixed that mantine issue

* Added todo

Author: NexInfinite

gcs/src/components/navbar.jsx

@@ -9,11 +9,6 @@ import { useEffect, useState } from "react"
 
 // 3rd Party Imports
 import { Tabs } from "@mantine/core"
-import { useSessionStorage } from "@mantine/hooks"
-
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../tailwind.config"
 
 // Custom component and helpers
 import FlightModes from "./components/config/flightModes"
@@ -28,13 +23,18 @@ import {
 } from "./helpers/notification"
 import { socket } from "./helpers/socket"
 
+// Redux
+import { useSelector } from "react-redux"
+import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice"
+
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../tailwind.config"
+
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function Config() {
-  const [connected] = useSessionStorage({
-    key: "connectedToDrone",
-    defaultValue: false,
-  })
+  const connected = useSelector(selectConnectedToDrone)
 
   // States in the frontend
   const [activeTab, setActiveTab] = useState(null)

gcs/src/config.jsx

@@ -8,11 +8,7 @@
 import { useEffect, useRef } from "react"
 
 // 3rd Party Imports
-import { useLocalStorage, usePrevious, useSessionStorage } from "@mantine/hooks"
-
-// Styling imports
-import resolveConfig from "tailwindcss/resolveConfig"
-import tailwindConfig from "../tailwind.config.js"
+import { useLocalStorage, usePrevious } from "@mantine/hooks"
 
 // Custom components and helpers
 import GraphPanel from "./components/graphs/graphPanel.jsx"
@@ -23,6 +19,13 @@ import { dataFormatters } from "./helpers/dataFormatters.js"
 import { graphOptions } from "./helpers/realTimeGraphOptions.js"
 import { socket } from "./helpers/socket"
 
+// Redux
+import { useSelector } from "react-redux"
+import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice.js"
+
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 const graphLabelColors = {
@@ -40,10 +43,7 @@ const graphColors = {
 }
 
 export default function Graphs() {
-  const [connected] = useSessionStorage({
-    key: "connectedToDrone",
-    defaultValue: false,
-  })
+  const connected = useSelector(selectConnectedToDrone)
 
   const [selectValues, setSelectValues] = useLocalStorage({
     key: "graphSelectedValues",

gcs/src/graphs.jsx

@@ -6,11 +6,7 @@
 import { useCallback, useEffect, useRef, useState } from "react"
 
 // 3rd Party Imports
-import {
-  useDisclosure,
-  useLocalStorage,
-  useSessionStorage,
-} from "@mantine/hooks"
+import { useDisclosure, useSessionStorage } from "@mantine/hooks"
 import { ResizableBox } from "react-resizable"
 import { v4 as uuidv4 } from "uuid"
 
@@ -46,6 +42,11 @@ import {
 } from "./helpers/notification"
 import { socket } from "./helpers/socket"
 
+// Redux
+import { useSelector } from "react-redux"
+import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice"
+import { selectAircraftType } from "./redux/slices/droneInfoSlice"
+
 // Tailwind styling
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../tailwind.config"
@@ -70,14 +71,9 @@ function UnwrittenChangesWarning({ unwrittenChanges }) {
 }
 
 export default function Missions() {
-  // Local Storage
-  const [connected] = useSessionStorage({
-    key: "connectedToDrone",
-    defaultValue: false,
-  })
-  const [aircraftType] = useLocalStorage({
-    key: "aircraftType",
-  })
+  // Redux
+  const connected = useSelector(selectConnectedToDrone)
+  const aircraftType = useSelector(selectAircraftType)
 
   const [activeTab, setActiveTab] = useState("mission")
 

gcs/src/missions.jsx

@@ -13,7 +13,6 @@ import {
   useDebouncedValue,
   useDisclosure,
   useListState,
-  useSessionStorage,
   useToggle,
 } from "@mantine/hooks"
 import AutoSizer from "react-virtualized-auto-sizer"
@@ -31,11 +30,12 @@ import {
 } from "./helpers/notification.js"
 import { socket } from "./helpers/socket.js"
 
+// Redux
+import { useSelector } from "react-redux"
+import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice.js"
+
 export default function Params() {
-  const [connected] = useSessionStorage({
-    key: "connectedToDrone",
-    defaultValue: true,
-  })
+  const connected = useSelector(selectConnectedToDrone)
 
   // Parameter states
   const [params, paramsHandler] = useListState([])

gcs/src/params.jsx

@@ -9,6 +9,7 @@ import {
 
 // drone actions
 import {
+  emitGetComPorts,
   emitGetHomePosition,
   emitIsConnectedToDrone,
   emitSetState,
@@ -131,6 +132,7 @@ const socketMiddleware = (store) => {
           // SINCE IT'S MIDDLEWARE, OTHER FUNCTIONS CAN ALSO BE CALLED
           console.log(`Connected to socket from redux, ${socket.socket.id}`)
           store.dispatch(socketConnected())
+          store.dispatch(emitIsConnectedToDrone())
         })
 
         socket.socket.on(SocketEvents.Disconnect, () => {
@@ -144,18 +146,6 @@ const socketMiddleware = (store) => {
           ====================
         */
 
-        socket.socket.on("is_connected_to_drone", (msg) => {
-          if (msg) {
-            store.dispatch(setConnected(true))
-          } else {
-            store.dispatch(setConnected(false))
-            store.dispatch(setConnecting(false))
-            // Get com ports?
-            // check if we're connected
-            // emit get_com_ports
-          }
-        })
-
         socket.socket.on("connected", () => {
           store.dispatch(setConnected(true))
         })
@@ -165,6 +155,16 @@ const socketMiddleware = (store) => {
           store.dispatch(setConnecting(false))
         })
 
+        socket.socket.on("is_connected_to_drone", (msg) => {
+          if (msg) {
+            store.dispatch(setConnected(true))
+          } else {
+            store.dispatch(setConnected(false))
+            store.dispatch(setConnecting(false))
+            store.dispatch(emitGetComPorts())
+          }
+        })
+
         // Fetch com ports and list them
         socket.socket.on("list_com_ports", (msg) => {
           store.dispatch(setFetchingComPorts(false))
@@ -194,6 +194,11 @@ const socketMiddleware = (store) => {
           store.dispatch(setConnected(false))
         })
 
+        // Setting connection status
+        socket.socket.on("drone_connect_status", (msg) => {
+          store.dispatch(setConnectionStatus(msg.message))
+        })
+
         // Flags that the drone is connected
         socket.socket.on("connected_to_drone", (msg) => {
           store.dispatch(setDroneAircraftType(msg.aircraft_type)) // There are two aircraftTypes, make sure to not use FLA one haha :D
@@ -208,14 +213,9 @@ const socketMiddleware = (store) => {
           store.dispatch(setConnecting(false))
           store.dispatch(setConnectionModal(false))
 
-          store.dispatch(emitSetState({ state: "dashboard" })) // Potential issue with state?
+          store.dispatch(emitSetState({ state: "dashboard" }))
           store.dispatch(emitGetHomePosition())
         })
-
-        // Setting connection status
-        socket.socket.on("drone_connect_status", (msg) => {
-          store.dispatch(setConnectionStatus(msg.message))
-        })
       }
     }
 

gcs/src/redux/middleware/socketMiddleware.js

@@ -97,13 +97,19 @@ const droneConnectionSlice = createSlice({
         state.connection_status = action.payload
       }
     },
+    setWireless: (state, action) => {
+      if (action.payload !== state.wireless) {
+        state.wireless = action.payload
+      }
+    },
 
     // Emits
     emitIsConnectedToDrone: () => {
       socket.emit("is_connected_to_drone")
     },
-    emitGetComPorts: () => {
+    emitGetComPorts: (state) => {
       socket.emit("get_com_ports")
+      state.fetching_com_ports = true
     },
     emitDisconnectFromDrone: () => {
       console.log("Disconnecting from drone")
@@ -138,6 +144,7 @@ const droneConnectionSlice = createSlice({
     selectPort: (state) => state.port,
     selectConnectionModal: (state) => state.connection_modal,
     selectConnectionStatus: (state) => state.connection_status,
+    selectWireless: (state) => state.wireless,
   },
 })
 
@@ -155,6 +162,7 @@ export const {
   setPort,
   setConnectionModal,
   setConnectionStatus,
+  setWireless,
 
   // Emitters
   emitIsConnectedToDrone,
@@ -178,6 +186,7 @@ export const {
   selectPort,
   selectConnectionModal,
   selectConnectionStatus,
+  selectWireless,
 } = droneConnectionSlice.selectors
 
 export default droneConnectionSlice

gcs/src/redux/slices/droneConnectionSlice.js

@@ -4,7 +4,14 @@ import socketSlice from "./slices/socketSlice"
 import droneInfoSlice from "./slices/droneInfoSlice"
 
 import socketMiddleware from "./middleware/socketMiddleware"
-import droneConnectionSlice from "./slices/droneConnectionSlice"
+import droneConnectionSlice, {
+  setBaudrate,
+  setConnectionType,
+  setIp,
+  setNetworkType,
+  setPort,
+  setWireless,
+} from "./slices/droneConnectionSlice"
 import missionInfoSlice from "./slices/missionSlice"
 import statusTextSlice from "./slices/statusTextSlice"
 import notificationSlice from "./slices/notificationSlice"
@@ -19,6 +26,11 @@ const rootReducer = combineSlices(
   notificationSlice,
 )
 
+// Get the persisted state, we only want to take a couple of things from here.
+const persistedState = localStorage.getItem("reduxState")
+  ? JSON.parse(localStorage.getItem("reduxState"))
+  : {}
+
 export const store = configureStore({
   reducer: rootReducer,
   middleware: (getDefaultMiddleware) => {
@@ -28,3 +40,49 @@ export const store = configureStore({
     }).concat([socketMiddleware])
   },
 })
+
+let droneConnection = persistedState.droneConnection
+if (droneConnection !== undefined) {
+  if (droneConnection.wireless !== undefined) {
+    store.dispatch(setWireless(droneConnection.wireless))
+  }
+  if (droneConnection.baudrate !== undefined) {
+    store.dispatch(setBaudrate(droneConnection.baudrate))
+  }
+  if (droneConnection.connection_type !== undefined) {
+    store.dispatch(setConnectionType(droneConnection.connection_type))
+  }
+  if (droneConnection.network_type !== undefined) {
+    store.dispatch(setNetworkType(droneConnection.network_type))
+  }
+  if (droneConnection.ip !== undefined) {
+    store.dispatch(setIp(droneConnection.ip))
+  }
+  if (droneConnection.port !== undefined) {
+    store.dispatch(setPort(droneConnection.port))
+  }
+}
+
+// Update states when a new message comes in, probably inefficient
+// TODO: In the future we should check to see if the variables have changed before updating
+store.subscribe(() => {
+  let store_mut = store.getState()
+  let local_storage = window.localStorage
+  let session_storage = window.sessionStorage
+  local_storage.setItem("reduxState", JSON.stringify(store.getState()))
+
+  // Drone connection
+  local_storage.setItem(
+    "wirelessConnection",
+    store_mut.droneConnection.wireless,
+  )
+  local_storage.setItem("baudrate", store_mut.droneConnection.baudrate)
+  local_storage.setItem(
+    "connectionType",
+    store_mut.droneConnection.connection_type,
+  )
+  local_storage.setItem("networkType", store_mut.droneConnection.network_type)
+  local_storage.setItem("ip", store_mut.droneConnection.ip)
+  local_storage.setItem("port", store_mut.droneConnection.port)
+  session_storage.setItem("connectedToDrone", store_mut.droneConnection.connected)
+})