86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
import { useState, useEffect, useRef } from 'react';
|
|
import './App.css';
|
|
import { DSP, AppPage } from './types';
|
|
import TopBar from './components/Topbar/Topbar';
|
|
import DSPPage from './pages/DspPage/DspPage';
|
|
import AddDSPForm from './pages/AddDspPage/AddDspPage';
|
|
import { useNotifications } from './hooks/useNotifications';
|
|
import Notifications from './components/Notifications/Notifications';
|
|
import CreditsPage from './pages/CreditsPage/CreditsPage';
|
|
import HomePage from './pages/HomePage/HomePage';
|
|
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 connectedDspCount = dsps.filter((dsp) => dsp.status === 'connected').length;
|
|
|
|
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">
|
|
<Notifications
|
|
notifications={notifications}
|
|
onRemove={removeNotification}
|
|
onHover={hoverNotification}
|
|
/>
|
|
|
|
<TopBar
|
|
dsps={dsps}
|
|
selected={selected}
|
|
page={page}
|
|
setPage={setPage}
|
|
setSelect={setSelected}
|
|
onSelect={(id) => {
|
|
setSelected(id);
|
|
setPage('view-dsp');
|
|
}}
|
|
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={(params) => addDSP(setDsps, setSelected, setPage, notify, params)}
|
|
/>
|
|
) : activeInstance ? (
|
|
<DSPPage instance={activeInstance} />
|
|
) : (
|
|
<HomePage
|
|
onAddDSP={() => setPage('add-dsp')}
|
|
dspCount={dsps.length}
|
|
connectedCount={connectedDspCount}
|
|
/>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|