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

Co-Authored-By: Louis Duhal Berruer <19203540+louisduhalberruer@users.noreply.github.com>
Co-Authored-By: petitfa1 <115662302+petitfa1@users.noreply.github.com>

frontend/src/components/More.js

@@ -0,0 +1,78 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import {ThreeDotsVertical} from 'react-bootstrap-icons';
+import {useEffect, useState} from 'react';
+import {Button, InputGroup, ListGroup, Modal} from 'react-bootstrap';
+import Form from 'react-bootstrap/Form';
+
+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/routes/Lectern.js

@@ -12,6 +12,7 @@ import BrowseTools from '../components/BrowseTools';
 import EditableText from '../components/EditableText';
 import DocumentSources from '../components/DocumentSources';
 import Type, { TypeBadge } from '../components/Type';
+import More from '../components/More';
 
 function Lectern({backend}) {
 
@@ -99,7 +100,7 @@ function Lectern({backend}) {
         </Col>
         <Col className="lectern">
           <Row className ="runningHead">
-            <RunningHeadSource metadata={ sourceMetadata } />
+            <RunningHeadSource metadata={ sourceMetadata } backend={backend} />
             <RunningHeadMargin {...{backend}}
               metadata={ metadata.find(x => (x._id === margin)) }
             />
@@ -158,12 +159,12 @@ function PassageMargin({active, scholium, rubric, backend, setLastUpdate}) {
   );
 }
 
-function RunningHeadSource({metadata}) {
+function RunningHeadSource({metadata, backend}) {
   return (
     <Col className="main">
-      <BookmarkFill className="icon" />
-      <Metadata metadata={metadata} />
-      <TypeBadge type={metadata?.type} />
+      <BookmarkFill className="icon"/>
+      <Metadata metadata={metadata}/>
+      <TypeBadge type={metadata?.type}/>
     </Col>
   );
 }
@@ -173,6 +174,7 @@ function RunningHeadMargin({metadata, backend}) {
   return (
     <Col xs={5} className="scholium">
       <BrowseTools id={metadata._id} closable={true} />
+      <More metadata={metadata} backend={backend} />
       <Metadata metadata={metadata} editable={true} {...{backend}} />
       <Type metadata={metadata} editable={true} {...{backend}}/>
     </Col>