FEATURE: Delete a document.

frontend/src/components/DeleteDocumentAction.jsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Modal, Button } from 'react-bootstrap';
+import DiscreeteDropdown from './DiscreeteDropdown';
+
+function DeleteDocumentAction({metadata, backend, setLastUpdate}) {
+  const focus = useNavigate('#');
+  const [show, setShow] = useState(false);
+
+  const handleClick = () => {
+    backend.deleteDocument(metadata)
+      .then(x => setLastUpdate(x._rev))
+      .then(focus);
+  };
+
+  return (
+    <>
+      <DiscreeteDropdown.Item onClick={() => setShow(true)}>
+        Delete...
+      </DiscreeteDropdown.Item>
+      <Modal show={show} onHide={() => setShow(false)}>
+        <Modal.Body>
+          Are you sure you want to delete this document (with all of its contents and metadata).
+          This action cannot be undone.
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={() => setShow(false)}>
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={handleClick}>
+            Delete
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}
+
+export default DeleteDocumentAction;
+

frontend/src/components/OpenedDocuments.jsx

@@ -8,6 +8,7 @@ import License from './License';
 import DiscreeteDropdown from './DiscreeteDropdown';
 import InviteEditorsAction from './InviteEditorsAction';
 import BreakIntoPassagesAction from './BreakIntoPassagesAction';
+import DeleteDocumentAction from './DeleteDocumentAction';
 import Bookmark from './Bookmark';
 import LicenseCompatibility from './LicenseCompatibility';
 
@@ -68,6 +69,7 @@ function RunningHeadMargin({metadata, lectern, margin, sourceHasRubrics, marginH
       <DiscreeteDropdown>
         <InviteEditorsAction {...{backend, metadata}} />
         <BreakIntoPassagesAction {...{lectern, margin, sourceHasRubrics, marginHasRubrics, backend, setLastUpdate}} />
+        <DeleteDocumentAction {...{metadata, backend, setLastUpdate}} />
       </DiscreeteDropdown>
       <Metadata editable={true} {...{backend, metadata, setLastUpdate}} />
       <Type editable={true} {...{backend, metadata}}/>