feat(web): auto-paginate events page

web/src/App.jsx

@@ -7,36 +7,25 @@ import Event from './Event';
 import Events from './Events';
 import { Router } from 'preact-router';
 import Sidebar from './Sidebar';
-import { ApiHost, Config } from './context';
-import { useContext, useEffect, useState } from 'preact/hooks';
+import Api, { useConfig } from './api';
 
 export default function App() {
-  const apiHost = useContext(ApiHost);
-  const [config, setConfig] = useState(null);
-
-  useEffect(async () => {
-    const response = await fetch(`${apiHost}/api/config`);
-    const data = response.ok ? await response.json() : {};
-    setConfig(data);
-  }, []);
-
-  return !config ? (
+  const { data, status } = useConfig();
+  return !data ? (
     <div />
   ) : (
-    <Config.Provider value={config}>
-      <div className="md:flex flex-col md:flex-row md:min-h-screen w-full bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white">
-        <Sidebar />
-        <div className="flex-auto p-4 lg:pl-8 lg:pr-8 min-w-0">
-          <Router>
-            <CameraMap path="/cameras/:camera/editor" />
-            <Camera path="/cameras/:camera" />
-            <Event path="/events/:eventId" />
-            <Events path="/events" />
-            <Debug path="/debug" />
-            <Cameras default path="/" />
-          </Router>
-        </div>
+    <div className="md:flex flex-col md:flex-row md:min-h-screen w-full bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white">
+      <Sidebar />
+      <div className="flex-auto p-2 md:p-4 lg:pl-8 lg:pr-8 min-w-0">
+        <Router>
+          <CameraMap path="/cameras/:camera/editor" />
+          <Camera path="/cameras/:camera" />
+          <Event path="/events/:eventId" />
+          <Events path="/events" />
+          <Debug path="/debug" />
+          <Cameras default path="/" />
+        </Router>
       </div>
-    </Config.Provider>
+    </div>
   );
 }