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>

web/src/routes/StyleGuide.jsx

@@ -2,6 +2,7 @@ import { h } from 'preact';
 import ArrowDropdown from '../icons/ArrowDropdown';
 import ArrowDropup from '../icons/ArrowDropup';
 import Button from '../components/Button';
+import Dialog from '../components/Dialog';
 import Heading from '../components/Heading';
 import Select from '../components/Select';
 import Switch from '../components/Switch';
@@ -10,6 +11,7 @@ import { useCallback, useState } from 'preact/hooks';
 
 export default function StyleGuide() {
   const [switches, setSwitches] = useState({ 0: false, 1: true, 2: false, 3: false });
+  const [showDialog, setShowDialog] = useState(false);
 
   const handleSwitch = useCallback(
     (id, checked) => {
@@ -18,6 +20,10 @@ export default function StyleGuide() {
     [switches]
   );
 
+  const handleDismissDialog = () => {
+    setShowDialog(false);
+  };
+
   return (
     <div>
       <Heading size="md">Button</Heading>
@@ -59,6 +65,26 @@ export default function StyleGuide() {
         </Button>
       </div>
 
+      <Heading size="md">Dialog</Heading>
+      <Button
+        onClick={() => {
+          setShowDialog(true);
+        }}
+      >
+        Show Dialog
+      </Button>
+      {showDialog ? (
+        <Dialog
+          onDismiss={handleDismissDialog}
+          title="This is a dialog"
+          text="Would you like to see more?"
+          actions={[
+            { text: 'Yes', color: 'red', onClick: handleDismissDialog },
+            { text: 'No', onClick: handleDismissDialog },
+          ]}
+        />
+      ) : null}
+
       <Heading size="md">Switch</Heading>
       <div className="flex-col space-y-4 max-w-4xl">
         <Switch label="Disabled, off" labelPosition="after" />