feat: add demo mode

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import './App.css';
 import { DSP, AppPage } from './types/types';
 import TopBar from './components/Topbar/Topbar';
@@ -8,17 +8,33 @@ import { useNotifications } from './hooks/useNotifications';
 import Notifications from './components/Notifications/Notifications';
 import CreditsPage from './pages/CreditsPage/CreditsPage';
 import HomePage from './pages/HomePage/HomePage';
-import { useDSP408 } from './hooks/useDSP408';
+import { addDSP, createDSPInstance } from './dsp/dspApi';
+import { removeDSP } from './dsp/dspShared';
+import { stopAllPolling } from './dsp/pollRegistry';
 
 function App() {
   const [dsps, setDsps] = useState<DSP[]>([]);
   const [selected, setSelected] = useState<number | null>(null);
   const [page, setPage] = useState<AppPage>('home');
   const { notifications, notify, removeNotification, hoverNotification } = useNotifications();
-  const activeDsp = dsps.find((d) => d.id === selected) ?? null;
   const connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;
 
-  const dsp408 = useDSP408(dsps, setDsps, selected, setSelected, setPage, notify);
+  const activeDsp = dsps.find((d) => d.id === selected) ?? null;
+  const activeInstance = activeDsp ? createDSPInstance(activeDsp, setDsps, notify) : null;
+
+  const dspsRef = useRef(dsps);
+  dspsRef.current = dsps;
+  useEffect(() => {
+    return () => stopAllPolling(dspsRef.current);
+  }, []);
+
+  useEffect(() => {
+    if (activeDsp == null) return;
+    const instance = createDSPInstance(activeDsp, setDsps, notify);
+    instance.api.setActive(true);
+    return () => instance.api.setActive(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeDsp?.id]);
 
   return (
     <div className="app">
@@ -34,29 +50,26 @@ function App() {
         page={page}
         setPage={setPage}
         setSelect={setSelected}
-
         onSelect={(id) => {
           setSelected(id);
           setPage('view-dsp');
         }}
-
-        onRemove={dsp408.removeDSP}
-
-        onAddClick={() => {
-          setPage('add-dsp');
-        }}
-
-        onConnect={dsp408.connectDSP}
-        onDisconnect={dsp408.disconnectDSP}
+        onRemove={(dsp) => removeDSP(setDsps, selected, setSelected, dsp.id, dsp.type)}
+        onAddClick={() => setPage('add-dsp')}
+        onConnect={(dsp) => createDSPInstance(dsp, setDsps, notify).api.connect()}
+        onDisconnect={(dsp) => createDSPInstance(dsp, setDsps, notify).api.disconnect()}
       />
 
       <main className="stage">
         {page === 'credits' ? (
           <CreditsPage />
         ) : page === 'add-dsp' ? (
-          <AddDSPForm onCancel={() => setPage('home')} onAdd={dsp408.addDSP} />
-        ) : activeDsp ? (
-          <DSPPage dsp={activeDsp} dsp408={dsp408.forDSP(activeDsp)} />
+          <AddDSPForm
+            onCancel={() => setPage('home')}
+            onAdd={(params) => addDSP(setDsps, setSelected, setPage, notify, params)}
+          />
+        ) : activeInstance ? (
+          <DSPPage instance={activeInstance} />
         ) : (
           <HomePage
             onAddDSP={() => setPage('add-dsp')}