delete note

Author: abhishekrathore

package-lock.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.8.3",
     "uuid": "^9.0.0",

package.json

@@ -12,14 +12,24 @@ function App() {
   const addNote = (note:NoteType)=>{
     setNotes([note,...notes])
   }
+  const editNote = (id:string)=>{
+    console.log('edit',id);
+  }
+
+  const deleteNote = (id:string)=>{
+    const index = notes.findIndex(note=>note.id===id);
+    let editedNotes = [...notes]
+    editedNotes.splice(index,1);
+    setNotes(editedNotes);
+  }
   return (
     <div className="App">
       <h2>Notes App</h2>
       <AddNote addNote={addNote}></AddNote>
       <div>
         {
           notes.map(
-            note=> <Note key={note.id} priority={note.priority} text={note.text}></Note>
+            note=> <Note key={note.id} id={note.id} priority={note.priority} text={note.text} editNote={editNote} deleteNote={deleteNote}></Note>
           )
         }
       </div>

src/App.tsx

@@ -6,5 +6,6 @@
     height: 5rem;
     border-radius: 0.5rem;
     margin-top: 1rem;
+    position: relative;
 
 }

src/components/card/card.css

@@ -1,10 +1,5 @@
 export type Priority = 'high' | 'medium' | 'low';
 
-export type NoteProps = {
-    text: string,
-    priority? : Priority
-}
-
 export type NoteType = {
     id: string,
     text: string,

src/components/note/note-type.ts

@@ -1,2 +1,7 @@
 
-
+.right-corner{
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 0.5rem;
+}

src/components/note/note.css

@@ -1,9 +1,16 @@
 import './note.css'
 
-import {NoteProps,Color} from './note-type';
+import {Color, Priority} from './note-type';
 import Card from '../card/card';
+import { FaTrash, FaEdit } from 'react-icons/fa';
 
-
+type NoteProps = {
+    id: string,
+    text: string,
+    priority? : Priority,
+    editNote:(id: string) => void,
+    deleteNote:(id: string) => void
+}
 
 
 function Note(props: NoteProps){
@@ -12,9 +19,15 @@ function Note(props: NoteProps){
         bgColor={props.priority && Color[props.priority]}
         height='2'
         padding='1'>
+        <> 
         <div>
             {props.text}
         </div>
+        <div className='right-corner'>
+            <FaEdit onClick={()=>props.editNote(props.id)}></FaEdit>
+            <FaTrash onClick={()=>props.deleteNote(props.id)}></FaTrash>
+        </div>
+        </>   
         </Card>
     )
 }