D

client/src/components/Card.js

@@ -3,8 +3,11 @@ import React from 'react';
 import Card from 'react-bootstrap/Card';
 import DeleteButton from './DeleteButton';
 
-const CardComp = ({ title, subtitle, body, link }) => {
+const CardComp = ({ title, subtitle, body, link, _id, noteIdfunc }) => {
 
+    const noteId = (id)=>{
+        noteIdfunc(id)
+    }
 
 
     return (
@@ -14,7 +17,7 @@ const CardComp = ({ title, subtitle, body, link }) => {
                 <Card.Subtitle className="mb-2 text-muted">{subtitle}</Card.Subtitle>
                 <Card.Text>{body}</Card.Text>
                 <Card.Link href="#">{link}</Card.Link>
-                <DeleteButton title={title} />
+                <DeleteButton noteId ={noteId} id={_id} title={title} />
             </Card.Body>
 
         </Card>

client/src/components/DeleteButton.js

@@ -2,26 +2,14 @@ import React, {useEffect, useState} from 'react'
 import classes from './DeleteButton.module.css'
 
 const DeleteButton = (props) => {
-    const [notes, setNotes] = useState([])
 
-    useEffect(() => {
-        let items = JSON.parse(localStorage.getItem("todos")); 
-        setNotes(items)
-
-    }, [])
-    console.log(notes)
-
-    const handleClickOnDelBtn = ()=>{
-        const newNotes = notes.filter((note)=>{
-            return note != props.title
-        })
-        console.log(newNotes)
-        // localStorage.clear();
-        localStorage.setItem('todos', JSON.stringify(newNotes))
+    const handleClickOnDelBtn = (id)=>{
+      props.noteId(id)
+      console.log(id)
     }
 
   return (
-    <div onClick={handleClickOnDelBtn} >
+    <div onClick={()=>{handleClickOnDelBtn(props.id)}} >
         <svg className={`bi bi-trash ${classes.delBtn}`} xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" viewBox="0 0 16 16">
   <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
   <path fillRule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>

client/src/components/Modal.js

@@ -17,15 +17,13 @@ const Dialog = ({ show, setShow, notes, setnotes, close }) => {
 
     const handleSubmit = (event) => {
       const note = {
-        title: "title1fsdasdfa1",
-        subtitle: "subtfasditle2",
-        body: "desasdfc",
+        title: title,
+        subtitle: subtitle,
+        body: desc,
       }
       event.preventDefault();
       if(title !== "") {
         setError(false);
-
-        setnotes([ ...notes, note ]);
         close(false);
       } else {
         setError(true);
@@ -47,7 +45,9 @@ const Dialog = ({ show, setShow, notes, setnotes, close }) => {
         Credentials: "include",
       });
       const data = await response.json();
+      setnotes([ ...notes, {title : data.title, subtitle : data.subtitle, body : data.body, _id  : data._id} ]);
       console.log(data);
+
     };
 
     return (

client/src/pages/Home.js

@@ -8,9 +8,6 @@ import AddButton from '../components/AddButton';
 const Home = () => {
   const [notes, setNotes] = React.useState([]); // var notes = [];
   const [loading, setLoading] = useState(false)
-  // React.useEffect(() => {
-  //   setNotes([...JSON.parse(localStorage.getItem('notes'))]);
-  // }, []);
 
   const fetchAllNotes = async ()=>{
     setLoading(true);
@@ -30,14 +27,39 @@ const Home = () => {
     }
   }, [])
 
+  const noteIdfunc = (id)=>{
+    console.log(id)
+    try {
+      console.log("first")
+      delNote(id)
+    } catch (error) {
+      console.log("suuuuu")
+    }
+
+  }
 
-  // const addNotes = async ()=>{
-  //   const response = await fetch("http://localhost:3001/", {
-  //     method : "POST",
+  const delNote = async (noteId) => {
+    setLoading(true)
+    await fetch("http://localhost:3001/", {
+      method: "DELETE",
+      body: JSON.stringify({noteId : noteId}),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        Credentials: "include",
+    });
+    setLoading(false)
 
-  //   })
-  // }
+    setNotes((prevNotes)=>{
+      return (
+        prevNotes.filter((note)=>{
+          return note._id != noteId
+        })
+      )
+    })
 
+  };
+
 
   return (
     <div>
@@ -55,7 +77,7 @@ const Home = () => {
             {notes.map((todo, index) => (
               <Col className="center" key={index}>
                 <div>
-                  <CardComp title={todo.title} subtitle={todo.subtitle} body={todo.body} />
+                  <CardComp noteIdfunc={noteIdfunc} _id={todo._id} title={todo.title} subtitle={todo.subtitle} body={todo.body} />
                 </div>
               </Col>
             ))}

server/.env

@@ -1,2 +1 @@
-# DATABASE_URI= mongodb+srv://oluwatomisin:oluwatomisin@cluster0.k4zdr.mongodb.net/TO-DO?retryWrites=true&w=majority
-DATABASE_URI= "mongodb://localhost:27017/NotesDB"
+DATABASE_URI= mongodb+srv://oluwatomisin:oluwatomisin@cluster0.k4zdr.mongodb.net/TO-DO?retryWrites=true&w=majority

server/dbConnect/db.js

@@ -1,5 +1,6 @@
 const mongoose = require("mongoose");
-const url = process.env.DATABASE_URI;
+// const url = process.env.DATABASE_URI;
+const url = "mongodb://localhost:27017/NotesDB";
 mongoose.connect(url, {useNewUrlParser: true})
 
 const NotesSchema = new mongoose.Schema({

server/package.json

@@ -11,7 +11,6 @@
   "license": "ISC",
   "dependencies": {
     "body-parser": "^1.20.0",
-    "cors": "^2.8.5",
     "express": "^4.18.1",
     "mongoose": "^6.6.3"
   },

server/routes/noteRoute.js

@@ -1,10 +1,8 @@
 const express = require('express');
 
 const router = express.Router();
-const app = express();
 
 router.route('/').get().post();
-router.route('/').delete().put();
-// router.route("/delete/:noteId").delete()
+router.route('/:id').delete().put();
 
 module.exports = router;

server/server.js

@@ -8,7 +8,7 @@ const cors = require("cors");
 app.use(
   cors({
     origin : "*",     // allow from any origin
-    methods : ['GET', 'POST', 'DELETE', 'PUT', 'PATCH'],  // allowed methods
+    methods : "*",  // allowed methods
     credentials: true
   })
 )
@@ -35,6 +35,19 @@ app.post("/", async(req, res)=>{
     }
 })
 
+app.delete("/", async (req, res)=>{
+    let reqNoteId = req.body.noteId
+    Note.findByIdAndDelete(reqNoteId, (err, blog) => {
+        if (err) {
+            console.log(err);
+          } else {
+            // console.log("blog " + blog.title + "is deleted !!");
+            res.send("delted successfully")
+          }
+    })
+
+})
+
 app.listen(3001, () => {
     console.log("server started at server 3001");
   });