'Delete note feature' added

Drougnov · Sep 18, 2022 · 31e7ce9 · 31e7ce9
1 parent 68fccbf
commit 31e7ce9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/App.js b/src/App.js
@@ -16,26 +16,31 @@ export default function App(){
   function createNewNote() {
     const newNote = {
       id: nanoid(),
-      body: "# Type your note's title here"
+      body: `# Enter title here \n\n`
     }
     setNotes(prevNotes => [newNote, ...prevNotes])
     setCurrentNoteId(newNote.id)
-}
+  }
 
   function updateNote(text) {
     setNotes(oldNotes => {
-      let arr = [];
-      for(let i=0; i<oldNotes.length; i++){
-        if(oldNotes[i].id === currentNoteId){
-          arr.unshift({...oldNotes[i], body:text});
-        }else{
-          arr.push({...oldNotes[i], body:text})
+        let arr = []
+        for(let i= 0; i < oldNotes.length; i++) {
+            if(oldNotes[i].id === currentNoteId) {
+                arr.unshift({ ...oldNotes[i], body: text })
+            } else {
+                arr.push(oldNotes[i])
+            }
         }
-      }
-      return arr;
+        return arr;
     })
   }
 
+  function deleteNote(event, noteId) {
+    event.stopPropagation()
+    setNotes(oldNotes => oldNotes.filter(note => note.id !== noteId))
+  }
+
   function findCurrentNote() {
       return notes.find(note => {
         return note.id === currentNoteId
@@ -56,6 +61,7 @@ export default function App(){
             setCurrentNoteId={setCurrentNoteId} 
             currentNote={findCurrentNote()} 
             newNote={createNewNote} 
+            deleteNote={deleteNote}
           />
           {currentNoteId && notes.length > 0 && 
             <Editor 

diff --git a/src/Components/Sidebar.js b/src/Components/Sidebar.js
@@ -1,12 +1,13 @@
 export default function Sidebar(props){
-    const noteList = props.notes.map((note, index)=> (
+    const noteList = props.notes.map((note)=> (
         <li key={note.id}
             className={`title ${
                 note.id === props.currentNote.id ? "selected-note" : ""
             }`}
             onClick={() =>props.setCurrentNoteId(note.id)}
         >
             <span className="text-snippet">{note.body.split('\n')[0]}</span>
+            <button className="delete-btn" onClick={(event) => props.deleteNote(event, note.id)}><i class="fa-solid fa-trash"></i></button>
         </li>
     ))
     return(