From 6df01f98334392180d8bc0c0a5ff605245746331 Mon Sep 17 00:00:00 2001
From: Joe <joantpat@gmail.com>
Date: Sat, 23 Aug 2025 09:28:06 +0100
Subject: [PATCH] Move AddCommand to empty useEffect

---
 .../tabsSectionTabs/preFlightChecklistSection.jsx         | 7 ++++---
 gcs/src/components/navbar.jsx                             | 8 ++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
index 288790f53..162de2254 100644
--- a/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
+++ b/gcs/src/components/dashboard/tabsSectionTabs/preFlightChecklistSection.jsx
@@ -4,7 +4,7 @@
  */
 
 // Native imports
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 // 3rd Party Imports
 import { Tabs, Accordion, Button, Modal, TextInput } from "@mantine/core"
@@ -64,9 +64,10 @@ export default function PreFlightChecklistTab({ tabPadding }) {
     // Show error message
     showErrorNotification("Name cannot be empty")
   }
-
+  useEffect(() => {
+    AddCommand("new_preflight_checklist", () => setNewChecklistModal(true))
+  }, [])
   // Add create new checklist as a spotlight command
-  AddCommand("new_preflight_checklist", () => setNewChecklistModal(true))
 
   const items = preFlightChecklistItems.map((item) => (
     <Accordion.Item
diff --git a/gcs/src/components/navbar.jsx b/gcs/src/components/navbar.jsx
index ea0d5fa91..7b42a355e 100644
--- a/gcs/src/components/navbar.jsx
+++ b/gcs/src/components/navbar.jsx
@@ -68,6 +68,7 @@ import { selectIsConnectedToSocket } from "../redux/slices/socketSlice.js"
 import { twMerge } from "tailwind-merge"
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../tailwind.config.js"
+import { useEffect } from "react"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function Navbar() {
@@ -138,8 +139,11 @@ export default function Navbar() {
     dispatch(setConnectionModal(true))
   }
 
-  AddCommand("connect_to_drone", connectToDroneFromButton)
-  AddCommand("disconnect_from_drone", disconnect)
+  useEffect(() => {
+    AddCommand("connect_to_drone", connectToDroneFromButton)
+    AddCommand("disconnect_from_drone", disconnect)
+  }, [])
+
 
   const linkClassName =
     "text-md px-2 rounded-sm outline-none focus:text-falconred-400 hover:text-falconred-400 transition-colors delay-50"