Fixed MQTT commands and frontend event loading

- Fixed MQTT command handling by properly handling async callbacks
- Fixed frontend event loading to preserve loaded events
- Added proper state tracking for initial load
- Fixed useEffect dependencies

backend/mqtt_integration.py

@@ -98,7 +98,8 @@ class HomeAssistantMQTT:
             if topic == self.command_topic and self.command_callback:
                 command = decoded_payload.upper()
                 logger.debug(f"Processing command: {command}")
-                self.command_callback(command)
+                # Create task for async callback
+                asyncio.create_task(self.command_callback(command))
             else:
                 logger.debug(f"Message received on non-command topic: {topic}")
         except Exception as e:

frontend/src/App.tsx

@@ -33,6 +33,7 @@ function App() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
 
   const formatDate = (isoString: string) => {
     const date = new Date(isoString);
@@ -52,6 +53,7 @@ function App() {
         setTotalEvents(eventsData.total);
         setSettings(settingsData);
         setGateStatus(statusData);
+        setIsInitialLoad(false);
       } catch (err) {
         setError('Failed to load data');
         console.error(err);
@@ -67,8 +69,8 @@ function App() {
         ]);
         setGateStatus(statusData);
         
-        // Update only if we're on the first page and don't have more events loaded
-        if (events.length <= 10 && !hasMoreEvents) {
+        // Only update events if this is the initial load or we haven't loaded more
+        if (isInitialLoad || (!hasMoreEvents && events.length <= 10)) {
           setEvents(eventsData.events);
           setHasMoreEvents(eventsData.hasMore);
           setTotalEvents(eventsData.total);
@@ -91,10 +93,13 @@ function App() {
       }
     }, 1000);
 
-    loadData();
+    // Only do initial load if we haven't loaded yet
+    if (isInitialLoad) {
+      loadData();
+    }
 
     return () => clearInterval(interval);
-  }, []);
+  }, [events, hasMoreEvents, isInitialLoad]);
 
   const handleGateControl = async () => {
     setLoading(true);