Allow deleting events and associated clips and snapshots from the event list view

web/src/routes/Events.jsx

@@ -7,6 +7,8 @@ import produce from 'immer';
 import { route } from 'preact-router';
 import { useIntersectionObserver } from '../hooks';
 import { FetchStatus, useApiHost, useConfig, useEvents } from '../api';
+import Button from '../components/Button';
+import Delete from '../icons/Delete'
 import { Table, Thead, Tbody, Tfoot, Th, Tr, Td } from '../components/Table';
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'preact/hooks';
 
@@ -99,6 +101,18 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
     [limit, pathname, setSearchString]
   );
 
+  const handleDelete = useCallback(
+    async (eventId) => {
+      // eslint-disable-next-line no-alert
+      if(confirm('Are you sure you want to delete this event and any related clips and snapshots?')) {
+        await fetch(`${apiHost}/api/events/${eventId}`);
+        const { searchParams } = new URL(window.location);
+        handleFilter(searchParams)
+      }
+    },
+    [apiHost, handleFilter]
+  );
+
   const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]);
 
   return (
@@ -119,6 +133,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
               <Th>Date</Th>
               <Th>Start</Th>
               <Th>End</Th>
+              <Th />
             </Tr>
           </Thead>
           <Tbody>
@@ -179,6 +194,11 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
                     <Td>{start.toLocaleDateString()}</Td>
                     <Td>{start.toLocaleTimeString()}</Td>
                     <Td>{end.toLocaleTimeString()}</Td>
+                    <Td>
+                      <Button color="red" name="Delete" onClick={() => handleDelete(id)}>
+                        <Delete className="w-6" />
+                      </Button>
+                    </Td>
                   </Tr>
                 );
               }