feat: add keep alive

src/App.tsx

@@ -8,9 +8,10 @@ import DSPPage from './pages/DspPage/DspPage';
 import AddDSPForm from './pages/AddDspPage/AddDspPage';
 import { useNotifications } from './hooks/useNotifications';
 import Notifications from './components/Notifications/Notifications';
-import { DSPState } from './types/dsp408State';
 import CreditsPage from './pages/CreditsPage/CreditsPage';
 import HomePage from './pages/HomePage/HomePage';
+import { getDSP408State, connectDSP408, disconnectDSP408 } from './api/dsp408';
+import { useDSPPolling } from './hooks/useDSPPolling';
 
 function App() {
   const [dsps, setDsps] = useState<DSP[]>([]);
@@ -18,7 +19,7 @@ function App() {
   const [page, setPage] = useState<AppPage>('home');
   const { notifications, notify, removeNotification, hoverNotification } = useNotifications();
 
-  async function addDSP(dsp: Omit<DSP, 'id' | 'status'>) {
+  async function addDSP(dsp: Omit<DSP, 'id' | 'status' | 'state' | 'meters'>) {
     try {
       const id = await invoke<number>('create_dsp408', {
         ip: dsp.ip,
@@ -30,6 +31,8 @@ function App() {
         id,
         ...dsp,
         status: 'disconnected',
+        state: null,
+        meters: null,
       };
 
       setDsps((prev) => [...prev, newDsp]);
@@ -69,17 +72,13 @@ function App() {
     setStatus(dsp.id, 'connecting');
 
     try {
-      await invoke('connect_dsp408', {
-        id: dsp.id,
-      });
-
-      console.log('Connected');
+      await connectDSP408(dsp.id);
 
       setStatus(dsp.id, 'connected');
 
-      const state = await getDSPState(dsp);
+      const state = await getDSP408State(dsp.id);
 
-      console.log(state);
+      setDsps((prev) => prev.map((d) => (d.id === dsp.id ? { ...d, state } : d)));
 
       notify('Connected', 'success', dsp.name);
     } catch (err) {
@@ -91,9 +90,7 @@ function App() {
 
   async function disconnectDSP(dsp: DSP) {
     try {
-      await invoke('disconnect_dsp408', {
-        id: dsp.id,
-      });
+      await disconnectDSP408(dsp.id);
 
       setStatus(dsp.id, 'disconnected');
 
@@ -103,26 +100,13 @@ function App() {
     }
   }
 
-  async function getDSPState(dsp: DSP) {
-    try {
-      const state = await invoke<DSPState>('get_dsp_state', {
-        id: dsp.id,
-      });
-
-      return state;
-    } catch (err) {
-      notify(`Failed to get state: ${String(err)}`, 'error', dsp.name);
-
-      return null;
-    }
-  }
-
   function setStatus(id: number, status: DSPStatus) {
     setDsps((prev) => prev.map((d) => (d.id === id ? { ...d, status } : d)));
   }
 
   const activeDsp = dsps.find((d) => d.id === selected) ?? null;
   const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;
+  useDSPPolling(dsps, selected, setDsps);
 
   return (
     <div className="app">