finish a sinkrepair

api/database.json

@@ -21,13 +21,6 @@
       "neededBy": "2021-11-26",
       "id": 3
     },
-    {
-      "description": "testing123",
-      "address": "488",
-      "budget": "558",
-      "neededBy": "2021-12-25",
-      "id": 4
-    },
     {
       "description": "testing123",
       "address": "488",

scripts/Requests.js

@@ -1,10 +1,18 @@
-import { getRequests } from "./dataAccess.js"
+import { getRequests, deleteRequest } from "./dataAccess.js"
 
 // requests exports the requests stored in application state as requests passed in as an ordered list wrapped inside an unordered list
 export const Requests = () => {
     const requests = getRequests()
     const convertRequestToListElement = (requests) => {
-            return `<li>${requests.description}</li>`
+        return `
+        <li>
+            ${requests.description}
+            <button class="request__delete"
+                    id="request--${requests.id}">
+                Delete
+            </button>
+        </li>
+    `    
     }
     let html = `
         <ul>
@@ -16,3 +24,13 @@ export const Requests = () => {
 
     return html
 }
+
+const mainContainer = document.querySelector("#container")
+
+mainContainer.addEventListener("click", click => {
+    if (click.target.id.startsWith("request--")) {
+        const [,requestId] = click.target.id.split("--")
+        deleteRequest(parseInt(requestId))
+    }
+})
+

scripts/dataAccess.js

@@ -56,7 +56,7 @@ export const sendRequest = (userServiceRequest) => {
     })      
 }
 export const deleteRequest = (id) => {
-    return fetch(`${API}/requests/${id}`, { method: "DELETE" })
+    return fetch(`${API}/serviceRequests/${id}`, { method: "DELETE" })
         .then(
             () => {
                 mainContainer.dispatchEvent(new CustomEvent("stateChanged"))