From 83af39f6a4437eb81b4c8d1d78bfb248ade50c6b Mon Sep 17 00:00:00 2001
From: migue <miguelanjo2@hotmail.com>
Date: Wed, 22 Mar 2023 11:19:30 +0000
Subject: [PATCH 1/3] added deleteAvailability component

---
 client/src/components/DeleteAvailability.js | 34 +++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 client/src/components/DeleteAvailability.js

diff --git a/client/src/components/DeleteAvailability.js b/client/src/components/DeleteAvailability.js
new file mode 100644
index 0000000..f52180c
--- /dev/null
+++ b/client/src/components/DeleteAvailability.js
@@ -0,0 +1,34 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+
+const DeleteAvailability = ({ availability, onDelete }) => {
+  const handleDelete = () => {
+    onDelete(availability);
+    fetch(`/api/`,
+     {
+       method: "DELETE",
+       headers: {
+         "Content-Type": "application/json",
+         },
+         body: JSON.stringify(),
+     })
+     .then((res) => res.json())
+     .then((data) => {
+       if (data.error) {
+         alert(data.error);
+       } else {
+         alert("your availability is deleted!");
+         window.location.reload();
+       }
+     })
+     .catch((err) => console.log(err));
+  };
+
+  return (
+    <Button variant="danger" size="sm" onClick={handleDelete}>
+      Delete
+    </Button>
+  );
+};
+
+export default DeleteAvailability;

From ed62867afc138e2cdc08676c54eae3ec388d77fd Mon Sep 17 00:00:00 2001
From: migue <miguelanjo2@hotmail.com>
Date: Wed, 22 Mar 2023 11:25:19 +0000
Subject: [PATCH 2/3] render DeleteAvailability component

---
 client/src/components/InputAvailabilitiesPage.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/client/src/components/InputAvailabilitiesPage.js b/client/src/components/InputAvailabilitiesPage.js
index 72434a8..aae9a55 100644
--- a/client/src/components/InputAvailabilitiesPage.js
+++ b/client/src/components/InputAvailabilitiesPage.js
@@ -140,6 +140,20 @@ const InputAvailabilitiesPage = () => {
 							<td>{availability.date}</td>
 							<td>{availability.fromTime}</td>
 							<td>{availability.toTime}</td>
+              <td>
+                <DeleteButton
+                  availability={availability}
+                  onDelete={(availabilityToDelete) =>
+                    setAvailabilities(
+                      availabilities.filter(
+                        (availability) =>
+                          availability !== availabilityToDelete
+                      )
+                    )
+                  }
+                />
+              </td>
+              
 						</tr>
 					))}
 				</tbody>

From f83dc1bfc486bb2e3004eb2b7a16b47bd57dde00 Mon Sep 17 00:00:00 2001
From: migue <miguelanjo2@hotmail.com>
Date: Wed, 22 Mar 2023 11:28:13 +0000
Subject: [PATCH 3/3] change DeleteButton to DeleteAvailability

---
 client/src/components/InputAvailabilitiesPage.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/InputAvailabilitiesPage.js b/client/src/components/InputAvailabilitiesPage.js
index aae9a55..1822480 100644
--- a/client/src/components/InputAvailabilitiesPage.js
+++ b/client/src/components/InputAvailabilitiesPage.js
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { Container, Row, Col, Button, Form, Card, Table } from "react-bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
+import DeleteAvailability from "./DeleteAvailability";
 
 const InputAvailabilitiesPage = () => {
   const [date, setDate] = useState("");
@@ -141,7 +142,7 @@ const InputAvailabilitiesPage = () => {
 							<td>{availability.fromTime}</td>
 							<td>{availability.toTime}</td>
               <td>
-                <DeleteButton
+                <DeleteAvailability
                   availability={availability}
                   onDelete={(availabilityToDelete) =>
                     setAvailabilities(