FEATURE : Comment or adapt a document with an existing document

frontend/src/components/BrowseTools.js

@@ -10,7 +10,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
         </Link>
       }
       {closable &&
-        <Link to="#" className="icon">
+        <Link to="#" className="icon close">
           <ChevronBarDown title="Close this document" />
         </Link>
       }

frontend/src/components/DocumentList.js

@@ -0,0 +1,44 @@
+import { Card } from 'react-bootstrap';
+import { useState } from 'react';
+import ExistingDocument from './ExistingDocument';
+
+function DocumentList({ userDocuments, relatedTo, setSelectedDocument, setShowDocumentList, setLastUpdate, backend }) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+  };
+
+  const filteredDocuments = userDocuments.filter(document =>
+    document.dc_title && document.dc_title.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div>
+      <Card className="h-100">
+        <Card.Body>
+          <input
+            type="text"
+            placeholder="Search documents"
+            value={searchQuery}
+            onChange={handleSearchChange}
+            className="form-control"
+          />
+        </Card.Body>
+      </Card>
+      {filteredDocuments.map(document => (
+        <ExistingDocument
+          key={document._id}
+          document={document}
+          relatedTo={relatedTo}
+          setSelectedDocument={setSelectedDocument}
+          setShowDocumentList={setShowDocumentList}
+          setLastUpdate={setLastUpdate}
+          backend={backend}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default DocumentList;

frontend/src/components/ExistingDocument.js

@@ -0,0 +1,44 @@
+import Card from 'react-bootstrap/Card';
+import { useNavigate } from 'react-router-dom';
+
+function ExistingDocument({ document, relatedTo, setLastUpdate, backend, setShowDocumentList }) {
+  const navigate = useNavigate();
+  const title = extractSubstring(document.dc_title || 'Untitled Document');
+
+  const handleClick = async () => {
+    let newLink = { verb: 'refersTo', object: relatedTo[0] };
+    let updatedLinks = [...document.links, newLink];
+
+    backend.putDocument({
+      ...document,
+      links: updatedLinks
+    }).then(() => {
+      setLastUpdate(document._id);
+      navigate((relatedTo.length ? '#' : '/') + document._id);
+    });
+
+    setShowDocumentList(false);
+  };
+
+  return (
+    <Card onClick={handleClick} className="existingDocument documentList">
+      <Card.Body>
+        <span>{title}</span>
+      </Card.Body>
+    </Card>
+  );
+}
+
+function extractSubstring(str) {
+  if (str.includes('–')) {
+    str = str.split('–')[0];
+  }
+
+  if (str.length > 25) {
+    str = str.substring(0, 25) + '...';
+  }
+
+  return str;
+}
+
+export default ExistingDocument;

frontend/src/components/FutureDocument.js

@@ -1,15 +1,29 @@
 import '../styles/FutureDocument.css';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Card, Form} from 'react-bootstrap';
-import { PlusLg, FolderPlus } from 'react-bootstrap-icons';
+import { Card, Form } from 'react-bootstrap';
+import { PlusLg, Link, FolderPlus } from 'react-bootstrap-icons';
 import { v4 as uuid } from 'uuid';
+import DocumentList from './DocumentList';
 
 function FutureDocument({relatedTo, verb = 'refersTo', setLastUpdate, backend, asSource = false}) {
   const [selectedVerb, setSelectedVerb] = useState(verb);
+  const [showDocumentList, setShowDocumentList] = useState(false);
+  const [selectedDocument, setSelectedDocument] = useState(null);
+  const [userDocuments, setUserDocuments] = useState([]);
   const fixedType = relatedTo.length === 0 || verb === 'includes' || asSource;
 
+  useEffect(() => {
+    const fetchUserDocuments = async () => {
+      backend.refreshDocuments((documents) => {
+        setUserDocuments(documents);
+      });
+    };
+
+    fetchUserDocuments();
+  }, [backend]);
+
   const handleSelectChange = (event) => {
     setSelectedVerb(event.target.value);
   };
@@ -23,8 +37,33 @@ function FutureDocument({relatedTo, verb = 'refersTo', setLastUpdate, backend, a
             <option value="isTranslationOf">Adaptation</option>
           </Form.Select>
         )}
-        <FutureDocumentIcon {...{relatedTo, verb: selectedVerb, setLastUpdate, backend, asSource}} />
+        <FutureDocumentIcon
+          relatedTo={selectedDocument ? [selectedDocument._id] : relatedTo}
+          verb={selectedVerb}
+          setLastUpdate={setLastUpdate}
+          backend={backend}
+          asSource={asSource}
+        />
+        {!fixedType && (
+          <Link
+            title="Select an existing document to add glose"
+            className="icon select-document ms-2 link-icon"
+            onClick={() => setShowDocumentList(!showDocumentList)}
+          />
+        )}
       </Card.Body>
+      {showDocumentList && (
+        <Card.Body>
+          <DocumentList
+            userDocuments={userDocuments}
+            relatedTo={relatedTo}
+            setSelectedDocument={setSelectedDocument}
+            setShowDocumentList={setShowDocumentList}
+            setLastUpdate={setLastUpdate}
+            backend={backend}
+          />
+        </Card.Body>
+      )}
     </Card>
   );
 }

frontend/src/styles/FutureDocument.css

@@ -1,3 +1,7 @@
 .icon {
   cursor: pointer;
 }
+
+.link-icon {
+  font-size: 28px;
+}