Dashboard.jsx change for redux (#617)

* Fixed store, setup sockets, and started on dashboard

* Dashboard basically done

* Fixed map and refactored

* Cleaned up code and fixed mission items

* Fixes

* fixed linting

* AI Fixes

* Moved gps out and fixed messages - more to move still

* Updated messages

* More moving of variables/cleaning up

* Moved more things around :D

* formatted D:

* Fixed drone connection issues and states

* formatted

* FIXED IT WOOO

* formatted

* Kush fixes

Author: NexInfinite

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "ardupilot",
         "ARSP",
         "centered",
         "Crosshair",

gcs/src/components/dashboard/floatingToolbar.jsx

@@ -15,19 +15,25 @@ import {
   IconSunOff,
 } from "@tabler/icons-react"
 
+// Redux
+import { useSelector } from "react-redux"
+import { selectGPS } from "../../redux/slices/droneInfoSlice"
+import { selectCurrentMissionItems } from "../../redux/slices/missionSlice"
+
 // Helper Functions
 import { filterMissionItems } from "../../helpers/filterMissions"
 import GetOutsideVisibilityColor from "../../helpers/outsideVisibility"
 
 export default function FloatingToolbar({
-  missionItems,
   centerMapOnDrone,
-  gpsData,
   followDrone,
   setFollowDrone,
   mapRef,
 }) {
-  const filteredMissionItems = filterMissionItems(missionItems.mission_items)
+  const gpsData = useSelector(selectGPS)
+  const missionItems = useSelector(selectCurrentMissionItems)
+
+  const filteredMissionItems = filterMissionItems(missionItems.missionItems)
   const [outsideVisibility, setOutsideVisibility] = useLocalStorage({
     key: "outsideVisibility",
     defaultValue: false,

gcs/src/components/dashboard/map.jsx

@@ -20,6 +20,18 @@ import {
 import "maplibre-gl/dist/maplibre-gl.css"
 import Map from "react-map-gl/maplibre"
 
+// Redux
+import { useSelector } from "react-redux"
+import {
+  selectFlightModeString,
+  selectGPS,
+  selectNavController,
+} from "../../redux/slices/droneInfoSlice"
+import {
+  selectCurrentMissionItems,
+  selectHomePosition,
+} from "../../redux/slices/missionSlice"
+
 // Helper scripts
 import { intToCoord } from "../../helpers/dataFormatters"
 import { filterMissionItems } from "../../helpers/filterMissions"
@@ -47,17 +59,17 @@ const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 const coordsFractionDigits = 7
 
-function MapSectionNonMemo({
-  passedRef,
-  data,
-  heading,
-  desiredBearing,
-  missionItems,
-  homePosition,
-  onDragstart,
-  getFlightMode,
-  mapId = "dashboard",
-}) {
+function MapSectionNonMemo({ passedRef, onDragstart, mapId = "dashboard" }) {
+  // Redux
+  const gpsData = useSelector(selectGPS)
+  const navControllerOutputData = useSelector(selectNavController)
+  const missionItems = useSelector(selectCurrentMissionItems)
+  const homePosition = useSelector(selectHomePosition)
+  const flightMode = useSelector(selectFlightModeString)
+  const data = gpsData
+  const heading = gpsData.hdg ? gpsData.hdg / 100 : 0
+  const desiredBearing = navControllerOutputData.navBearing
+
   const [connected] = useSessionStorage({
     key: "connectedToDrone",
     defaultValue: false,
@@ -129,7 +141,7 @@ function MapSectionNonMemo({
     let lon = intToCoord(data.lon)
     setPosition({ latitude: lat, longitude: lon })
 
-    if (!firstCenteredToDrone) {
+    if (!firstCenteredToDrone && passedRef.current !== null) {
       passedRef.current.getMap().flyTo({
         center: [lon, lat],
         zoom: initialViewState.zoom,
@@ -269,7 +281,7 @@ function MapSectionNonMemo({
           )
         })}
 
-        {getFlightMode() === "Guided" && guidedModePinData !== null && (
+        {flightMode === "Guided" && guidedModePinData !== null && (
           <MarkerPin
             lat={guidedModePinData.lat}
             lon={guidedModePinData.lon}

gcs/src/components/dashboard/tabsSection.jsx

@@ -6,23 +6,25 @@
 // 3rd Party Imports
 import { Tabs } from "@mantine/core"
 
-// Tab Componenents
+// Tab Components
 import CameraTabsSection from "./tabsSectionTabs/cameraTabsSection"
 import ActionTabsSection from "./tabsSectionTabs/actionTabsSection"
 import MissionTabsSection from "./tabsSectionTabs/missionTabsSection"
 import DataTabsSection from "./tabsSectionTabs/dataTabsSection"
 import PreFlightChecklistTab from "./tabsSectionTabs/preFlightChecklistSection"
 
-export default function TabsSection({
-  connected,
-  aircraftType,
-  getIsArmed,
-  currentFlightModeNumber,
-  currentMissionData,
-  navControllerOutputData,
-  displayedData,
-  setDisplayedData,
-}) {
+// Redux
+import { useSelector } from "react-redux"
+import {
+  selectAircraftType,
+  selectNavController,
+} from "../../redux/slices/droneInfoSlice"
+import { selectConnectedToDrone } from "../../redux/slices/droneConnectionSlice"
+
+export default function TabsSection({ currentFlightModeNumber }) {
+  const connected = useSelector(selectConnectedToDrone)
+  const aircraftType = useSelector(selectAircraftType)
+  const navControllerOutputData = useSelector(selectNavController)
   const tabPadding = "pt-6 pb-4"
 
   return (
@@ -36,26 +38,20 @@ export default function TabsSection({
       </Tabs.List>
 
       {/* Data */}
-      <DataTabsSection
-        tabPadding={tabPadding}
-        displayedData={displayedData}
-        setDisplayedData={setDisplayedData}
-      />
+      <DataTabsSection tabPadding={tabPadding} />
 
       {/* Actions */}
       <ActionTabsSection
         connected={connected}
         tabPadding={tabPadding}
         currentFlightModeNumber={currentFlightModeNumber}
         aircraftType={aircraftType}
-        getIsArmed={getIsArmed}
       ></ActionTabsSection>
 
       {/* Mission */}
       <MissionTabsSection
         connected={connected}
         tabPadding={tabPadding}
-        currentMissionData={currentMissionData}
         navControllerOutputData={navControllerOutputData}
         currentFlightModeNumber={currentFlightModeNumber}
         aircraftType={aircraftType}

gcs/src/components/dashboard/tabsSectionTabs/actionTabsSection.jsx

@@ -19,13 +19,14 @@ import {
 // Helper
 import { socket } from "../../../helpers/socket"
 import { NoConnectionMsg } from "../tabsSection"
+import { useSelector } from "react-redux"
+import { selectArmed } from "../../../redux/slices/droneInfoSlice"
 
 export default function ActionTabsSection({
   connected,
   tabPadding,
   currentFlightModeNumber,
   aircraftType,
-  getIsArmed,
 }) {
   return (
     <Tabs.Panel value="actions">
@@ -40,7 +41,7 @@ export default function ActionTabsSection({
               currentFlightModeNumber={currentFlightModeNumber}
             />
             {/** Arm / Takeoff / Landing */}
-            <ArmTakeoffLandAction getIsArmed={getIsArmed} />
+            <ArmTakeoffLandAction />
           </div>
         )}
       </div>
@@ -99,11 +100,12 @@ const FlightModeAction = ({ aircraftType, currentFlightModeNumber }) => {
   )
 }
 
-const ArmTakeoffLandAction = ({ getIsArmed }) => {
+const ArmTakeoffLandAction = () => {
   const [takeoffAltitude, setTakeoffAltitude] = useLocalStorage({
     key: "takeoffAltitude",
     defaultValue: 10,
   })
+  const isArmed = useSelector(selectArmed)
 
   function armDisarm(arm, force = false) {
     // TODO: Add force arm ability
@@ -123,11 +125,11 @@ const ArmTakeoffLandAction = ({ getIsArmed }) => {
       <div className="flex flex-wrap flex-cols gap-2">
         <Button
           onClick={() => {
-            armDisarm(!getIsArmed())
+            armDisarm(!isArmed)
           }}
           className="grow"
         >
-          {getIsArmed() ? "Disarm" : "Arm"}
+          {isArmed ? "Disarm" : "Arm"}
         </Button>
 
         {/** Takeoff button with popover */}

gcs/src/components/dashboard/tabsSectionTabs/dataTabsSection.jsx

@@ -18,15 +18,19 @@ import { IconInfoCircle } from "@tabler/icons-react"
 
 // Helper
 import { DataMessage } from "../../../helpers/dataDisplay"
+import { useDispatch, useSelector } from "react-redux"
+import {
+  changeExtraData,
+  selectExtraDroneData,
+} from "../../../redux/slices/droneInfoSlice"
 
-export default function DataTabsSection({
-  tabPadding,
-  displayedData,
-  setDisplayedData,
-}) {
+export default function DataTabsSection({ tabPadding }) {
   const [selectedBox, setSelectedBox] = useState(null)
   const [opened, { open, close }] = useDisclosure(false)
 
+  const dispatch = useDispatch()
+  const selectedData = useSelector(selectExtraDroneData)
+
   const handleDoubleClick = (box) => {
     setSelectedBox(box)
     open()
@@ -35,17 +39,16 @@ export default function DataTabsSection({
   const handleCheckboxChange = (key, subkey, subvalue, boxId, isChecked) => {
     // Update wantedData on checkbox change
     if (isChecked) {
-      const newDisplay = displayedData.map((item, index) => {
-        if (index === boxId) {
-          return {
-            ...item,
+      dispatch(
+        changeExtraData({
+          index: boxId,
+          data: {
             currently_selected: `${key}.${subkey}`,
             display_name: subvalue,
-          }
-        }
-        return item
-      })
-      setDisplayedData(newDisplay)
+            value: 0,
+          },
+        }),
+      )
       close()
     }
   }
@@ -54,8 +57,8 @@ export default function DataTabsSection({
     <Tabs.Panel value="data">
       <div className={tabPadding}>
         <Grid className="cursor-pointer select-none">
-          {displayedData.length > 0 ? (
-            displayedData.map((data) => (
+          {selectedData.length > 0 ? (
+            selectedData.map((data) => (
               <Grid.Col
                 span={6}
                 key={data.boxId}

gcs/src/components/dashboard/tabsSectionTabs/missionTabsSection.jsx

@@ -17,11 +17,12 @@ import {
 // Helper
 import { socket } from "../../../helpers/socket"
 import { NoConnectionMsg } from "../tabsSection"
+import { useSelector } from "react-redux"
+import { selectCurrentMission } from "../../../redux/slices/missionSlice"
 
 export default function MissionTabsSection({
   connected,
   tabPadding,
-  currentMissionData,
   navControllerOutputData,
   currentFlightModeNumber,
   aircraftType,
@@ -34,10 +35,7 @@ export default function MissionTabsSection({
         ) : (
           <div className="flex flex-col gap-4">
             {/** Mission Information */}
-            <MissionInfo
-              currentMissionData={currentMissionData}
-              navControllerOutputData={navControllerOutputData}
-            />
+            <MissionInfo navControllerOutputData={navControllerOutputData} />
 
             {/** Auto, Start and Restart Mission */}
             <AutoStartRestartMission
@@ -51,18 +49,19 @@ export default function MissionTabsSection({
   )
 }
 
-const MissionInfo = ({ currentMissionData, navControllerOutputData }) => {
+const MissionInfo = ({ navControllerOutputData }) => {
+  const currentMission = useSelector(selectCurrentMission)
   return (
     <>
       {/** Mission Information */}
       <div className="text-lg">
         <p>
           <span className="font-bold"> Mission State:</span>{" "}
-          {MISSION_STATES[currentMissionData.mission_state]}
+          {MISSION_STATES[currentMission.mission_state]}
         </p>
         <p>
-          <span className="font-bold"> Waypoint: </span>{" "}
-          {currentMissionData.seq}/{currentMissionData.total}
+          <span className="font-bold"> Waypoint: </span> {currentMission.seq}/
+          {currentMission.total}
         </p>
         <p>
           <span className="font-bold">Distance to WP: </span>{" "}