FEATURE: Grant access to edit a document to a user (closes #7).

Co-Authored-By: Louis Duhal Berruer <[email protected]>
Co-Authored-By: petitfa1 <[email protected]>

frontend/src/components/More.js

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { Button, InputGroup, ListGroup, Modal, Dropdown, Form } from 'react-bootstrap';
+import { ThreeDotsVertical } from 'react-bootstrap-icons';
+
+export default function More({metadata, backend}) {
+  const [show, setShow] = useState(false);
+  const [userName, setUserName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [document, setDocument] = useState(metadata);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  let addEditor = () => {
+    if (!loading) {
+      setLoading(true);
+      const payload = {...document, editors: [...(document.editors ?? [])]};
+      const formattedUserName = userName.trim();
+
+      if (payload.editors.includes(formattedUserName) || formattedUserName === '') {
+        setUserName('');
+        setLoading(false);
+        return;
+      }
+
+      payload.editors.push(formattedUserName);
+
+      backend.putDocument(payload).then(({rev}) => {
+        payload._rev = rev;
+        setDocument(payload);
+        setUserName('');
+        setLoading(false);
+      });
+    }
+  };
+
+  return (
+    <>
+      <Dropdown className="float-end more-btn">
+        <Dropdown.Toggle variant="ghost">
+          <ThreeDotsVertical/>
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <Dropdown.Item as="button" onClick={handleShow} className="dropdown-item-share">Share</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Invite user to edit document</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Label htmlFor="inputPassword5">Username</Form.Label>
+          <InputGroup className="mb-3">
+            <Form.Control
+              className="add-user-input"
+              value={userName}
+              onInput={(event) => setUserName(event.target.value)}
+            />
+            <Button variant="primary" onClick={addEditor} className="add-user-input-btn">
+              Invite
+            </Button>
+          </InputGroup>
+        </Modal.Body>
+        <Modal.Body>
+          <h5>Editors</h5>
+          <ListGroup>
+            {(document && document.editors ? document.editors : []).map((user) => (
+              <ListGroup.Item key={user}>{user}</ListGroup.Item>
+            ))}
+          </ListGroup>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}

frontend/src/components/OpenedDocuments.js

@@ -6,6 +6,7 @@ import Metadata from './Metadata';
 import Type, { TypeBadge } from './Type';
 import Passage from './Passage';
 import License from './License';
+import More from './More';
 
 function OpenedDocuments({backend, lectern, metadata, sourceMetadata, margin, hasSources, id, setLastUpdate}) {
   return (
@@ -51,6 +52,7 @@ function RunningHeadMargin({metadata, backend}) {
   return (
     <Col xs={5} className="scholium">
       <BrowseTools id={metadata._id} closable={true} />
+      <More {...{backend, metadata}} />
       <Metadata editable={true} {...{backend, metadata}} />
       <Type editable={true} {...{backend, metadata}}/>
     </Col>