FEATURE: Delete a reference (close #3)

Hypertopic · Jun 6, 2023 · 3765dd2 · 3765dd2
1 parent 0d4b934
commit 3765dd2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,6 +13,7 @@
     "react-bootstrap": "^2.5.0",
     "react-bootstrap-icons": "^1.10.2",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-image-crop": "^10.0.9",
     "react-markdown": "^8.0.4",
     "react-notifications": "^1.7.4",

diff --git a/frontend/src/DeleteReferenceButton.js b/frontend/src/DeleteReferenceButton.js
@@ -0,0 +1,25 @@
+import {FaTimes} from 'react-icons/fa';
+import Button from 'react-bootstrap/Button';
+import {useNavigate} from 'react-router-dom';
+
+function DeleteReferenceButton({doc, ref_id, setLastUpdate, backend}) {
+  const navigate = useNavigate();
+  let handleDelete = async () => {
+    let _id = doc._id;
+    doc.links = doc.links.filter(link => link.object.toString() !== ref_id.toString());
+    Promise.all([
+      backend.putDocument(doc)
+    ]).then(() => {
+      setLastUpdate(_id);
+      navigate('/' + ref_id);
+    });
+  };
+
+  return (
+    <Button variant="danger" size="sm" className="delete-button" onClick={handleDelete}>
+      <FaTimes className="delete_reference"/>
+    </Button>
+  );
+}
+
+export default DeleteReferenceButton;
diff --git a/frontend/src/DocumentsCards.js b/frontend/src/DocumentsCards.js
@@ -8,13 +8,14 @@ import BrowseTools from './BrowseTools';
 import FutureDocument from './FutureDocument';
 import FutureCollection from './FutureCollection';
 import { TypeBadge } from './Type';
+import DeleteReferenceButton from './DeleteReferenceButton';
 
-function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backend}) {
+function DocumentsCards({docs, expandable, byRow, isDeletable, createOn, setLastUpdate, backend}) {
   return (
     <Row className="gy-4">
       {docs.map(x =>
         <Col key={x._id} md={ byRow && (12 / byRow) }>
-          <DocumentCard doc={x} expandable={expandable} />
+          <DocumentCard doc={x} expandable={expandable} isDeletable={isDeletable} ref_id={createOn} {...{setLastUpdate, backend}}/>
         </Col>
       )}
       {createOn &&
@@ -35,7 +36,7 @@ function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backe
   );
 }
 
-function DocumentCard({doc, expandable}) {
+function DocumentCard({doc, expandable, isDeletable, ref_id, setLastUpdate, backend}) {
   const collectionId = useMemo(() => {
     if (doc?.links?.length > 1) {
       return doc.links.every((item) => {
@@ -48,6 +49,11 @@ function DocumentCard({doc, expandable}) {
 
   return (
     <Card className="h-100">
+      {isDeletable && (
+        <Card.Header className="d-flex justify-content-end">
+          <DeleteReferenceButton doc={doc} ref_id={ref_id} setLastUpdate={setLastUpdate} backend={backend}/>
+        </Card.Header>
+      )}
       <Card.Body>
         <BrowseTools
           id={collectionId ? doc.links.length && windowWidth.current < 820 ? doc.links[0].object : doc._id : doc._id}

diff --git a/frontend/src/Page.js b/frontend/src/Page.js
@@ -220,7 +220,7 @@ function References({scholiaMetadata, active, createOn, setLastUpdate, backend})
   if (!active) return;
   return (
     <Col className="gloses" >
-      <DocumentsCards docs={scholiaMetadata} expandable={true} byRow={1}
+      <DocumentsCards docs={scholiaMetadata} expandable={true} byRow={1} isDeletable={true}
         {...{createOn, setLastUpdate, backend}}
       />
     </Col>