feat(web): Delete events from Event page and API (#991)

Co-authored-by: Scott Roach <scott@thinkpivot.io>
Co-authored-by: Paul Armstrong <paul@spaceyak.com>

web/src/routes/Event.jsx

@@ -1,5 +1,10 @@
 import { h, Fragment } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import { route } from 'preact-router';
 import ActivityIndicator from '../components/ActivityIndicator';
+import Button from '../components/Button';
+import Delete from '../icons/Delete'
+import Dialog from '../components/Dialog';
 import Heading from '../components/Heading';
 import Link from '../components/Link';
 import { FetchStatus, useApiHost, useEvent } from '../api';
@@ -8,9 +13,39 @@ import { Table, Thead, Tbody, Th, Tr, Td } from '../components/Table';
 export default function Event({ eventId }) {
   const apiHost = useApiHost();
   const { data, status } = useEvent(eventId);
+  const [showDialog, setShowDialog] = useState(false);
+  const [deleteStatus, setDeleteStatus] = useState(FetchStatus.NONE);
+
+  const handleClickDelete = () => {
+    setShowDialog(true);
+  };
+
+  const handleDismissDeleteDialog = () => {
+    setShowDialog(false);
+  };
+
+
+  const handleClickDeleteDialog = useCallback(async () => {
+
+    let success;
+    try {
+      const response = await fetch(`${apiHost}/api/events/${eventId}`, { method: 'DELETE' });
+      success = await (response.status < 300 ? response.json() : { success: true });
+      setDeleteStatus(success ? FetchStatus.LOADED : FetchStatus.ERROR);
+    } catch (e) {
+      setDeleteStatus(FetchStatus.ERROR);
+    }
+
+    if (success) {
+      setDeleteStatus(FetchStatus.LOADED);
+      setShowDialog(false);
+      route('/events', true);
+
+    }
+  }, [apiHost, eventId, setShowDialog]);
 
   if (status !== FetchStatus.LOADED) {
-    return <ActivityIndicator />;
+    return <ActivityIndicator />
   }
 
   const startime = new Date(data.start_time * 1000);
@@ -18,9 +53,27 @@ export default function Event({ eventId }) {
 
   return (
     <div className="space-y-4">
-      <Heading>
-        {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
-      </Heading>
+      <div className="flex">
+        <Heading className="flex-grow">
+          {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
+        </Heading>
+        <Button className="self-start" color="red" onClick={handleClickDelete}>
+          <Delete className="w-6" /> Delete event
+        </Button>
+        {showDialog ? (
+          <Dialog
+            onDismiss={handleDismissDeleteDialog}
+            title="Delete Event?"
+            text="This event will be permanently deleted along with any related clips and snapshots"
+            actions={[
+              deleteStatus !== FetchStatus.LOADING
+                ? { text: 'Delete', color: 'red', onClick: handleClickDeleteDialog }
+                : { text: 'Deleting…', color: 'red', disabled: true },
+              { text: 'Cancel', onClick: handleDismissDeleteDialog },
+            ]}
+          />
+        ) : null}
+      </div>
 
       <Table class="w-full">
         <Thead>