Added application slice and relevant state for controlling modal

Author: ProgramPhantom

gcs/src/components/toolbar/toolbar.jsx

@@ -16,62 +16,53 @@ import AdvancedMenu from "./menus/advanced.jsx"
 import FileMenu from "./menus/file.jsx"
 import ViewMenu from "./menus/view.jsx"
 
-
 // Redux
 import { useSelector } from "react-redux"
 import { selectConnectedToDrone } from "../../redux/slices/droneConnectionSlice.js"
 import { Button, Group, Modal } from "@mantine/core"
 
-
 // Tailwind
 import tailwindConfig from "../../../tailwind.config.js"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
-
 function ConfirmExitModal() {
-
-	return (
-		<Modal
-			opened={false}
-			onClose={() => {
-			}}
-			title="Confirm Quit"
-			centered
-			overlayProps={{
-				backgroundOpacity: 0.55,
-				blur: 3,
-			}}
-			styles={{
-				content: {
-				borderRadius: "0.5rem",
-				},
-			}}
-			withCloseButton={true}
-			>
-
-			<Group justify="space-between" className="pt-4">
-			<Button
-				variant="filled"
-				color={tailwindColors.red[600]}
-				onClick={() => {
-				}}
-			>
-				Close
-			</Button>
-			<Button
-				variant="filled"
-				type="submit"
-				color={tailwindColors.green[600]}
-			>
-				Connect
-			</Button>
-			</Group>
-
-		</Modal>
-	)
+  return (
+    <Modal
+      opened={false}
+      onClose={() => {}}
+      title="Confirm Quit"
+      centered
+      overlayProps={{
+        backgroundOpacity: 0.55,
+        blur: 3,
+      }}
+      styles={{
+        content: {
+          borderRadius: "0.5rem",
+        },
+      }}
+      withCloseButton={true}
+    >
+      <Group justify="space-between" className="pt-4">
+        <Button
+          variant="filled"
+          color={tailwindColors.red[600]}
+          onClick={() => {}}
+        >
+          Close
+        </Button>
+        <Button
+          variant="filled"
+          type="submit"
+          color={tailwindColors.green[600]}
+        >
+          Connect
+        </Button>
+      </Group>
+    </Modal>
+  )
 }
 
-
 export default function Toolbar() {
   const [areMenusActive, setMenusActive] = useState(false)
   const [isMac, setIsMac] = useState(false)
@@ -86,11 +77,9 @@ export default function Toolbar() {
   }, [])
 
   const onClose = () => {
-	if (connectedToDrone) {
-		setConfirmModelOpen(true);
-	}
-
-
+    if (connectedToDrone) {
+      setConfirmModelOpen(true)
+    }
   }
 
   return (
@@ -177,8 +166,7 @@ export default function Toolbar() {
         )}
       </div>
 
-		<ConfirmExitModal></ConfirmExitModal>
-
+      <ConfirmExitModal></ConfirmExitModal>
     </>
   )
 }

gcs/src/redux/slices/applicationSlice.js

@@ -0,0 +1,31 @@
+import { createSlice } from "@reduxjs/toolkit"
+import droneConnectionSlice from "./droneConnectionSlice"
+
+const initialState = {
+  confirmExitModalOpen: false,
+}
+
+const applicationSlice = createSlice({
+  name: "application",
+  initialState,
+  reducers: {
+    // Setters
+    setConfirmExitModalOpen: (state, action) => {
+      if (action.payload !== state.confirmExitModalOpen) {
+        state.confirmExitModalOpen = action.payload
+      }
+    },
+  },
+  selectors: {
+    selectConfirmExitModalOpen: (state) => state.confirmExitModalOpen,
+  },
+})
+
+export const {
+	setConfirmExitModalOpen
+} = applicationSlice.actions
+export const {
+	selectConfirmExitModalOpen
+} = applicationSlice.selectors
+
+export default droneConnectionSlice

gcs/src/redux/store.js

@@ -2,7 +2,7 @@ import { combineSlices, configureStore } from "@reduxjs/toolkit"
 import droneInfoSlice, { setGraphValues } from "./slices/droneInfoSlice"
 import logAnalyserSlice from "./slices/logAnalyserSlice"
 import socketSlice from "./slices/socketSlice"
-
+import applicationSlice from "./slices/applicationSlice"
 import socketMiddleware from "./middleware/socketMiddleware"
 import configSlice from "./slices/configSlice"
 import droneConnectionSlice, {
@@ -30,6 +30,7 @@ const rootReducer = combineSlices(
   statusTextSlice,
   paramsSlice,
   configSlice,
+  applicationSlice
 )
 
 export const store = configureStore({