Delete availability front end-Miguel-Cabral

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;

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("");
@@ -140,6 +141,20 @@ const InputAvailabilitiesPage = () => {
 							<td>{availability.date}</td>
 							<td>{availability.fromTime}</td>
 							<td>{availability.toTime}</td>
+              <td>
+                <DeleteAvailability
+                  availability={availability}
+                  onDelete={(availabilityToDelete) =>
+                    setAvailabilities(
+                      availabilities.filter(
+                        (availability) =>
+                          availability !== availabilityToDelete
+                      )
+                    )
+                  }
+                />
+              </td>
+
 						</tr>
 					))}
 				</tbody>