Fix guided mode bug and convert to redux

gcs/src/components/dashboard/map.jsx

@@ -11,32 +11,23 @@ import React, { useEffect, useRef, useState } from "react"
 
 // Maplibre and mantine imports
 import { Button, Divider, Modal, NumberInput } from "@mantine/core"
-import {
-  useClipboard,
-  useDisclosure,
-  useLocalStorage,
-  useSessionStorage,
-} from "@mantine/hooks"
+import { useClipboard, useDisclosure, useLocalStorage } from "@mantine/hooks"
 import "maplibre-gl/dist/maplibre-gl.css"
 import Map from "react-map-gl/maplibre"
 
 // Redux
-import { useSelector } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import {
   selectFlightModeString,
   selectGPS,
+  selectGuidedModePinData,
   selectHomePosition,
 } from "../../redux/slices/droneInfoSlice"
 import { selectCurrentMissionItems } from "../../redux/slices/missionSlice"
 
 // Helper scripts
 import { intToCoord } from "../../helpers/dataFormatters"
 import { filterMissionItems } from "../../helpers/filterMissions"
-import {
-  showErrorNotification,
-  showNotification,
-  showSuccessNotification,
-} from "../../helpers/notification"
 import { useSettings } from "../../helpers/settings"
 import { socket } from "../../helpers/socket"
 
@@ -51,7 +42,7 @@ import useContextMenu from "../mapComponents/useContextMenu"
 import { envelope, featureCollection, point } from "@turf/turf"
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../tailwind.config"
-import { selectConnectedToDrone } from "../../redux/slices/droneConnectionSlice"
+import { queueInfoNotification } from "../../redux/slices/notificationSlice"
 import FenceItems from "../mapComponents/fenceItems"
 import HomeMarker from "../mapComponents/homeMarker"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
@@ -60,11 +51,12 @@ const coordsFractionDigits = 7
 
 function MapSectionNonMemo({ passedRef, onDragstart, mapId = "dashboard" }) {
   // Redux
-  const connected = useSelector(selectConnectedToDrone)
+  const dispatch = useDispatch()
   const gpsData = useSelector(selectGPS)
   const missionItems = useSelector(selectCurrentMissionItems)
   const homePosition = useSelector(selectHomePosition) // use actual home position
   const flightModeString = useSelector(selectFlightModeString)
+  const guidedModePinData = useSelector(selectGuidedModePinData)
 
   const [position, setPosition] = useState(null)
   const [firstCenteredToDrone, setFirstCenteredToDrone] = useState(false)
@@ -102,26 +94,6 @@ function MapSectionNonMemo({ passedRef, onDragstart, mapId = "dashboard" }) {
   const [opened, { open, close }] = useDisclosure(false)
   const clipboard = useClipboard({ timeout: 500 })
 
-  const [guidedModePinData, setGuidedModePinData] = useSessionStorage({
-    key: "guidedModePinData",
-    defaultValue: null,
-  })
-
-  useEffect(() => {
-    socket.on("nav_reposition_result", (msg) => {
-      if (!msg.success) {
-        showErrorNotification(msg.message)
-      } else {
-        showSuccessNotification(msg.message)
-        setGuidedModePinData(msg.data)
-      }
-    })
-
-    return () => {
-      socket.off("nav_reposition_result")
-    }
-  }, [connected])
-
   useEffect(() => {
     // Check latest gpsData point is valid
     if (
@@ -364,7 +336,7 @@ function MapSectionNonMemo({ passedRef, onDragstart, mapId = "dashboard" }) {
                 clipboard.copy(
                   `${clickedGpsCoords.lat}, ${clickedGpsCoords.lng}`,
                 )
-                showNotification("Copied to clipboard")
+                dispatch(queueInfoNotification("Copied to clipboard"))
               }}
             >
               <div className="w-full flex justify-between gap-2">

gcs/src/components/layout.jsx

@@ -12,6 +12,7 @@ import { Notifications } from "@mantine/notifications"
 // Helpers and custom component imports
 import {
   showErrorNotification,
+  showInfoNotification,
   showSuccessNotification,
 } from "../helpers/notification"
 import { socket } from "../helpers/socket"
@@ -58,9 +59,14 @@ export default function Layout({ children, currentPage }) {
   // Show queued notifications
   useEffect(() => {
     if (notificationQueue.length !== 0) {
-      ;(notificationQueue[0].type === "error"
-        ? showErrorNotification
-        : showSuccessNotification)(notificationQueue[0].message)
+      const message = notificationQueue[0].message
+      if (notificationQueue[0].type === "error") {
+        showErrorNotification(message)
+      } else if (notificationQueue[0].type === "success") {
+        showSuccessNotification(message)
+      } else {
+        showInfoNotification(message)
+      }
       dispatch(notificationShown())
     }
   }, [notificationQueue, dispatch])

gcs/src/components/missions/missionsMap.jsx

@@ -10,12 +10,7 @@
 import React, { useEffect, useRef, useState } from "react"
 
 // Maplibre and mantine imports
-import {
-  useClipboard,
-  useLocalStorage,
-  usePrevious,
-  useSessionStorage,
-} from "@mantine/hooks"
+import { useClipboard, useLocalStorage, usePrevious } from "@mantine/hooks"
 import "maplibre-gl/dist/maplibre-gl.css"
 import Map from "react-map-gl/maplibre"
 
@@ -47,6 +42,7 @@ import { useDispatch, useSelector } from "react-redux"
 import {
   selectFlightModeString,
   selectGPS,
+  selectGuidedModePinData,
 } from "../../redux/slices/droneInfoSlice"
 import {
   clearDrawingItems,
@@ -81,11 +77,7 @@ function MapSectionNonMemo({
   const flightModeString = useSelector(selectFlightModeString)
   const currentTab = useSelector(selectActiveTab)
   const contextMenuState = useSelector(selectContextMenu)
-
-  const [guidedModePinData] = useSessionStorage({
-    key: "guidedModePinData",
-    defaultValue: null,
-  })
+  const guidedModePinData = useSelector(selectGuidedModePinData)
 
   const [position, setPosition] = useState(null)
   const { getSetting } = useSettings()
@@ -322,7 +314,10 @@ function MapSectionNonMemo({
             addNewPolygonVertex(lat, lon)
           } else {
             dispatch(
-              createNewDefaultDrawingItem({ x: coordToInt(lat), y: coordToInt(lon) }),
+              createNewDefaultDrawingItem({
+                x: coordToInt(lat),
+                y: coordToInt(lon),
+              }),
             )
           }
         }}

gcs/src/helpers/notification.js

@@ -1,5 +1,5 @@
 /*
-  Notification system. This contains all the styles for each type of notification in an 
+  Notification system. This contains all the styles for each type of notification in an
   easy to use wrapper.
 */
 
@@ -36,6 +36,15 @@ export function showSuccessNotification(message) {
   })
 }
 
+export function showInfoNotification(message) {
+  notifications.show({
+    title: "Info",
+    message: message,
+    color: tailwindColors.blue[600],
+    ...notificationTheme,
+  })
+}
+
 export function showNotification(title, message) {
   notifications.show({
     title: title,

gcs/src/main.jsx

@@ -2,25 +2,25 @@ import "./css/index.css" // Needs to be at the top of the file
 import "./css/resizable.css"
 
 // Style imports
+import "@mantine/code-highlight/styles.css"
 import "@mantine/core/styles.css"
 import "@mantine/notifications/styles.css"
 import "@mantine/spotlight/styles.css"
-import "@mantine/code-highlight/styles.css"
 import "@mantine/tiptap/styles.css"
 
 // React imports
-import { HashRouter } from "react-router-dom"
 import ReactDOM from "react-dom/client"
+import { HashRouter } from "react-router-dom"
 // Mantine imports
 import { MantineProvider } from "@mantine/core"
 
 // Component imports
-import AppContent from "./components/mainContent.jsx"
 import { CustomMantineTheme } from "./components/customMantineTheme.jsx"
+import AppContent from "./components/mainContent.jsx"
 
 // Redux
-import { store } from "./redux/store.js"
 import { Provider } from "react-redux"
+import { store } from "./redux/store.js"
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   // <MantineProvider defaultColorScheme='dark'>

gcs/src/redux/middleware/socketMiddleware.js

@@ -34,6 +34,7 @@ import {
   setExtraData,
   setGpsData,
   setGpsRawIntData,
+  setGuidedModePinData,
   setHeartbeatData,
   setHomePosition,
   setLastGraphMessage,
@@ -94,6 +95,7 @@ const DroneSpecificSocketEvents = Object.freeze({
   onNavResult: "nav_result",
   onHomePositionResult: "home_position_result",
   onIncomingMsg: "incoming_msg",
+  onNavRepositionResult: "nav_reposition_result",
   onGetLoiterRadiusResult: "nav_get_loiter_radius_result",
   onSetLoiterRadiusResult: "nav_set_loiter_radius_result",
 })
@@ -271,6 +273,7 @@ const socketMiddleware = (store) => {
             }
           }
 
+          store.dispatch(setGuidedModePinData({ lat: 0, lon: 0, alt: 0 }))
           store.dispatch(setRebootData({}))
           store.dispatch(setAutoPilotRebootModalOpen(false))
         })
@@ -366,9 +369,18 @@ const socketMiddleware = (store) => {
           store.dispatch(setFetchingVars(false))
         })
 
-        /*
-          Missions
-        */
+        socket.socket.on(
+          DroneSpecificSocketEvents.onNavRepositionResult,
+          (msg) => {
+            if (msg.success) {
+              store.dispatch(queueSuccessNotification(msg.message))
+              store.dispatch(setGuidedModePinData(msg.data))
+            } else {
+              store.dispatch(queueErrorNotification(msg.message))
+            }
+          },
+        )
+
         socket.socket.on(
           DroneSpecificSocketEvents.onGetLoiterRadiusResult,
           (msg) => {
@@ -389,16 +401,17 @@ const socketMiddleware = (store) => {
                 : queueNotification({ type: "error", message: msg.message }),
             )
           },
-        ),
-          /*
+        )
+
+        /*
           Missions
         */
-          socket.socket.on(
-            MissionSpecificSocketEvents.onCurrentMissionAll,
-            (msg) => {
-              store.dispatch(setCurrentMissionItems(msg))
-            },
-          )
+        socket.socket.on(
+          MissionSpecificSocketEvents.onCurrentMissionAll,
+          (msg) => {
+            store.dispatch(setCurrentMissionItems(msg))
+          },
+        )
 
         socket.socket.on(
           MissionSpecificSocketEvents.onCurrentMission,
@@ -639,7 +652,7 @@ const socketMiddleware = (store) => {
         )
 
         /*
-          Generic Drone Date
+          Generic Drone Data
         */
         socket.socket.on(DroneSpecificSocketEvents.onIncomingMsg, (msg) => {
           incomingMessageHandler(msg)

gcs/src/redux/slices/droneInfoSlice.js

@@ -52,6 +52,11 @@ const droneInfoSlice = createSlice({
     extraDroneData: [
       ...defaultDataMessages, // TODO: Should also be stored in local storage, values set to 0 on launch but actual messages stored
     ],
+    guidedModePinData: {
+      lat: 0, // Stored in coords not int
+      lon: 0, // Stored in coords not int
+      alt: 0,
+    },
     graphs: {
       selectedGraphs: {
         graph_a: null,
@@ -166,6 +171,9 @@ const droneInfoSlice = createSlice({
         state.navControllerData.loiterRadius = action.payload
       }
     },
+    setGuidedModePinData: (state, action) => {
+      state.guidedModePinData = action.payload
+    },
   },
   selectors: {
     selectAttitude: (state) => state.attitudeData,
@@ -194,6 +202,7 @@ const droneInfoSlice = createSlice({
     selectBatteryData: (state) =>
       state.batteryData.sort((b1, b2) => b1.id - b2.id),
 
+    selectGuidedModePinData: (state) => state.guidedModePinData,
     selectExtraDroneData: (state) => state.extraDroneData,
     selectStatusText: (state) => state.statusText,
     selectGraphValues: (state) => state.graphs.selectedGraphs,
@@ -219,6 +228,7 @@ export const {
   setGraphValues,
   setLastGraphMessage,
   setLoiterRadius,
+  setGuidedModePinData,
 } = droneInfoSlice.actions
 
 // Memoized selectors because redux is a bitch
@@ -295,6 +305,7 @@ export const {
   selectFlightMode,
   selectAircraftType,
   selectBatteryData,
+  selectGuidedModePinData,
   selectExtraDroneData,
   selectGraphValues,
   selectLastGraphMessage,

gcs/src/redux/slices/notificationSlice.js

@@ -12,6 +12,9 @@ const notificationSlice = createSlice({
     queueNotification: (state, action) => {
       state.notifications.push(action.payload)
     },
+    queueInfoNotification: (state, action) => {
+      state.notifications.push({ type: "info", message: action.payload })
+    },
     queueErrorNotification: (state, action) => {
       state.notifications.push({ type: "error", message: action.payload })
     },
@@ -27,6 +30,7 @@ const notificationSlice = createSlice({
 export const {
   notificationShown,
   queueNotification,
+  queueInfoNotification,
   queueErrorNotification,
   queueSuccessNotification,
 } = notificationSlice.actions