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/components/Dialog.jsx

@@ -0,0 +1,47 @@
+import { h, Fragment } from 'preact';
+import Button from './Button';
+import Heading from './Heading';
+import { createPortal } from 'preact/compat';
+import { useState, useEffect } from 'preact/hooks';
+
+export default function Dialog({ actions = [], portalRootID = 'dialogs', title, text }) {
+  const portalRoot = portalRootID && document.getElementById(portalRootID);
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    window.requestAnimationFrame(() => {
+      setShow(true);
+    });
+  }, []);
+
+  const dialog = (
+    <Fragment>
+      <div
+        data-testid="scrim"
+        key="scrim"
+        className="absolute inset-0 z-10 flex justify-center items-center bg-black bg-opacity-40"
+      >
+        <div
+          role="modal"
+          className={`absolute rounded shadow-2xl bg-white dark:bg-gray-700 max-w-sm text-gray-900 dark:text-white transition-transform transition-opacity duration-75 transform scale-90 opacity-0 ${
+            show ? 'scale-100 opacity-100' : ''
+          }`}
+        >
+          <div className="p-4">
+            <Heading size="lg">{title}</Heading>
+            <p>{text}</p>
+          </div>
+          <div className="p-2 flex justify-start flex-row-reverse space-x-2">
+            {actions.map(({ color, text, onClick, ...props }, i) => (
+              <Button className="ml-2" color={color} key={i} onClick={onClick} type="text" {...props}>
+                {text}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+
+  return portalRoot ? createPortal(dialog, portalRoot) : dialog;
+}

web/src/components/__tests__/Dialog.test.jsx

@@ -0,0 +1,38 @@
+import { h } from 'preact';
+import Dialog from '../Dialog';
+import { fireEvent, render, screen } from '@testing-library/preact';
+
+describe('Dialog', () => {
+  let portal;
+
+  beforeAll(() => {
+    portal = document.createElement('div');
+    portal.id = 'dialogs';
+    document.body.appendChild(portal);
+  });
+
+  afterAll(() => {
+    document.body.removeChild(portal);
+  });
+
+  test('renders to a portal', async () => {
+    render(<Dialog title="Tacos" text="This is the dialog" />);
+    expect(screen.getByText('Tacos')).toBeInTheDocument();
+    expect(screen.getByRole('modal').closest('#dialogs')).not.toBeNull();
+  });
+
+  test('renders action buttons', async () => {
+    const handleClick = jest.fn();
+    render(
+      <Dialog
+        actions={[
+          { color: 'red', text: 'Delete' },
+          { text: 'Okay', onClick: handleClick },
+        ]}
+        title="Tacos"
+      />
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Okay' }));
+    expect(handleClick).toHaveBeenCalled();
+  });
+});