added delete function

webmarker/src/App.js

@@ -29,12 +29,12 @@ function App() {
     }
 
     fetchData();
-  }, []);
+  }, [data]);
   
   return (
     <div className="App">
       <div className="head">
-        <input className="search" type="search" placeholder="Search for name/title/tag" onChange={search}/>
+        <input className="search" type="search" placeholder="Search for Name/Title/Tag" onChange={search}/>
         <button className="add-btn"><span className="material-icons-outlined md-36" onClick={() => setIsAdding(true)}>add</span></button>
         <button className="settings-btn"><span className="material-icons-outlined md-36">settings</span></button>
       </div>

webmarker/src/componets/EditModal.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const EditModal = ({id}) => {
+  return (
+    <div>{id}</div>
+  )
+}
+
+export default EditModal

webmarker/src/componets/List.js

@@ -1,6 +1,27 @@
 import '../styles/List.css';
+import { useState } from 'react';
 
 const List = ({data}) => {
+  const [reload, setReload] = useState(0);
+
+  async function deleteEntity(id) {
+    fetch("/delete", {
+    
+        // Adding method type
+        method: "DELETE",
+        
+        // Adding body or contents to send
+        body: JSON.stringify({id}),
+        
+        // Adding headers to the request
+        headers: {
+            "Content-type": "application/json; charset=UTF-8"
+        }
+    })
+    .then(res => res.text())
+    .then(message => {console.log(message)})
+  }
+
   return (
     <table className="table">
         <thead>
@@ -22,6 +43,7 @@ const List = ({data}) => {
                     <td>{e.title}</td>
                     <td><a href={e.link}>{url.hostname}</a></td>
                     <td>{e.tag}</td>
+                    <td className="delete" onClick={() => deleteEntity(e._id)}><div>X</div></td>
                 </tr>
             } catch (e) {
                 console.log(e)

webmarker/src/styles/List.css

@@ -18,6 +18,11 @@
   background-color:#273949;
 }
 
+.table tbody td {
+  border-radius: 10px;
+}
+
+
 .table a {
   text-decoration: none;
   color: rgb(194, 193, 193);
@@ -27,3 +32,9 @@
 .table a:hover {
   text-decoration: underline;
 }
+
+.delete {
+  background-color: red;
+  color: white;
+  cursor: pointer;
+}

webmarker/src/styles/Modal.css

@@ -1,5 +1,5 @@
 .overlay {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     background-color: rgba(49, 64, 73, 0.781);

webmarker_backend/server.js

@@ -1,6 +1,6 @@
 const express = require('express');
 const app = express();
-const { MongoClient } = require('mongodb');
+const { MongoClient, ObjectId } = require('mongodb');
 const phantom = require('phantom');
 
 const port = process.env.PORT || 3001;
@@ -23,6 +23,14 @@ app.post('/post', async (req, res) => {
   insertDoc(req.body);
 });
 
+app.delete('/delete', async (req, res) => {
+  const id = req.body.id.toString();
+
+  await deleteDoc(id);
+
+  res.send(`Bookmark with ObjectId "${id}" deleted.`);
+});
+
 async function insertDoc(doc) {
   try {
     await client.connect();
@@ -61,6 +69,24 @@ async function getDoc() {
   }
 }
 
+async function deleteDoc(doc) {
+  try {
+    await client.connect();
+
+    const database = client.db("sample_db");
+    const list = database.collection("list");
+    const result = await list.deleteOne({"_id": ObjectId(doc)});
+  } 
+  
+  catch(err) {
+    console.log(err);
+  }
+  
+  finally {
+    await client.close();
+  }
+}
+
 async function getTitle(url) {
   const instance = await phantom.create();
   const page = await instance.createPage();