added the ability to delete a note

Author: kesslerpillar

README.md

@@ -1697,4 +1697,64 @@ describe('Note Capture', () => {
 
 [Code for this section](https://github.com/pairing4good/tdd-amplify-react/commit/f6ee8a279908c49d6d03ccb7f209b4833832c1e6)
 
+</details>
+
+<details>
+  <summary>Add Note Deletion</summary>
+
+## Add Note Deletion
+In order to add note deletion, let's drive this from the Cypress test.  This will help in cleaning up notes that were created during the UI test.
+
+- Add a deletion test to the Cypress test
+```js
+it('should delete note', () => {
+  cy.get('[data-testid=test-button-0]').click();
+
+  cy.get('[data-testid=test-name-0]').should('not.exist')
+  cy.get('[data-testid=test-description-0]').should('not.exist')
+})
+```
+- Run the Cypress test and verify that it Fails 
+
+- To make it go green, add a new deletion function to `NoteRepository.js`
+```js
+...
+import { createNote as createNoteMutation, deleteNote as deleteNoteMutation} from './graphql/mutations';
+
+...
+
+export async function deleteById( id ) {
+  return await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
+}
+```
+
+- Create a new deletion callback function in `App.js`
+```js
+async function deleteNoteCallback( id ) {
+  const newNotesArray = notes.filter(note => note.id !== id);
+  setNotes(newNotesArray);
+  await deleteById(id);
+}
+```
+
+- Pass the `deleteNoteCallback` callback function parameter to the `NoteList` component.
+```js
+<NoteList notes={notes}
+  deleteNoteCallback={deleteNoteCallback}/>
+```
+
+- Add a deletion button to the `NoteList` component
+```js
+<button 
+    data-testid={'test-button-' + index}
+    onClick={() => props.deleteNoteCallback(note.id)}>
+    Delete note
+</button>
+```
+- Run all the tests
+- Green
+- Commit
+
+[Code for this section]()
+
 </details>

cypress/integration/note.spec.js

@@ -43,6 +43,13 @@ describe('Note Capture', () => {
 
     })
 
+    it('should delete note', () => {
+        cy.get('[data-testid=test-button-0]').click();
+
+        cy.get('[data-testid=test-name-0]').should('not.exist')
+        cy.get('[data-testid=test-description-0]').should('not.exist')
+    })
+
     it('should have an option to sign out', () => {
         cy.get('[data-testid=sign-out] > .hydrated').click()
         cy.get('amplify-auth-container.hydrated > .hydrated').should('exist')

src/App.js

@@ -3,7 +3,7 @@ import NoteForm from './NoteForm';
 import React, { useState, useEffect } from 'react';
 import NoteList from './NoteList';
 import Header from './Header';
-import { findAll, save } from './NoteRepository';
+import { findAll, save, deleteById } from './NoteRepository';
 import { withAuthenticator } from '@aws-amplify/ui-react'
 import Footer from './Footer';
 
@@ -29,14 +29,22 @@ function App() {
     setNotes(updatedNoteList); 
   }
 
+
+  async function deleteNoteCallback( id ) {
+    const newNotesArray = notes.filter(note => note.id !== id);
+    setNotes(newNotesArray);
+    await deleteById(id);
+  }
+
   return (
     <div className="App">
       <Header />
       <NoteForm notes={notes}  
         formData={formData} 
         setFormDataCallback={setFormData} 
         createNoteCallback={createNote}/>
-      <NoteList notes={notes}/>
+      <NoteList notes={notes}
+        deleteNoteCallback={deleteNoteCallback}/>
       <Footer />
     </div>
   );

src/NoteList.js

@@ -6,7 +6,12 @@ function NoteList(props) {
           props.notes.map((note, index) => (
               <div key={'note-' + index}>
                   <p data-testid={"test-name-" + index}>{note.name}</p>
-                  <p data-testid={"test-description-" + index}>{note.description}</p>  
+                  <p data-testid={"test-description-" + index}>{note.description}</p> 
+                  <button 
+                      data-testid={'test-button-' + index}
+                      onClick={() => props.deleteNoteCallback(note.id)}>
+                      Delete note
+                  </button> 
               </div>
           ))
       } 

src/NoteRepository.js

@@ -1,6 +1,6 @@
 import { API } from 'aws-amplify';
 import { listNotes } from './graphql/queries';
-import { createNote as createNoteMutation} from './graphql/mutations';
+import { createNote as createNoteMutation, deleteNote as deleteNoteMutation} from './graphql/mutations';
 
 export async function findAll(){
     const apiData = await API.graphql({ query: listNotes });
@@ -10,4 +10,8 @@ export async function findAll(){
 export async function save(note){
     const apiData = await API.graphql({ query: createNoteMutation, variables: { input: note } });
     return apiData.data.createNote;
+}
+
+export async function deleteById( id ) {
+    return await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
 }