fix: frontend event handling

- Removed unnecessary reverse() since backend returns events in descending order
- Fixed event polling to preserve pagination
- Only update events on first page during polling
- Combined useEffects for better state management

frontend/src/App.tsx

@@ -53,26 +53,32 @@ function App() {
         setSettings(settingsData);
         setGateStatus(statusData);
       } catch (err) {
-        setError('Failed to load initial data');
+        setError('Failed to load data');
         console.error(err);
       }
     };
-    loadData();
-  }, []);
 
-  useEffect(() => {
     const interval = setInterval(async () => {
       try {
-        const status = await api.getGateStatus();
-        setGateStatus(status);
-        const newEvents = await api.getEvents();
-        setEvents(newEvents.events);
-        setHasMoreEvents(newEvents.hasMore);
-        setTotalEvents(newEvents.total);
+        // Only update status and most recent events
+        const [statusData, eventsData] = await Promise.all([
+          api.getGateStatus(),
+          api.getEvents(10, 0)
+        ]);
+        setGateStatus(statusData);
+        // Only update events if we're on the first page
+        if (events.length <= 10) {
+          setEvents(eventsData.events);
+          setHasMoreEvents(eventsData.hasMore);
+          setTotalEvents(eventsData.total);
+        }
       } catch (err) {
-        console.error('Failed to update gate status:', err);
+        console.error('Failed to update status:', err);
       }
     }, 1000);
+
+    loadData();
+
     return () => clearInterval(interval);
   }, []);
 
@@ -173,7 +179,7 @@ function App() {
                 <div className="mt-6">
                   <h2 className="text-lg font-semibold mb-2">Recent Events</h2>
                   <div className="border rounded-lg divide-y divide-gray-200 max-h-96 overflow-y-auto">
-                    {[...events].reverse().map((event, index) => (
+                    {events.map((event, index) => (
                       <div key={index} className="px-3 py-2 hover:bg-gray-50 flex items-center justify-between text-sm">
                         <div className="flex-1">
                           <div className="flex items-center gap-2">