Faut fixer les appels d'api

GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js

@@ -1,11 +1,19 @@
 import { useEffect } from "react";
 import { useState } from "react";
 import InvoiceList from "../components/InvoiceList";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 
 const Invoices = () => {
 
     const [invoices, setInvoices] = useState([]);
 
+    const mySwal = withReactContent(Swal);
+
+    const [alertTitle, setAlertTitle] = useState("");
+    const [alertMessage, setAlertMessage] = useState("");
+    const [showAlert, setShowAlert] = useState(false);
+
     useEffect(() => {
         fetch(`https://localhost:7292/api/Invoice?all=true`, {
             method: 'GET',
@@ -23,10 +31,57 @@ const Invoices = () => {
         });
     }, []);
 
+    const handleCancelInvoice = async (id) => {
+
+        mySwal.fire({
+            title: `Effacer la commande?`,
+            text: 'Êtes-vous certain de vouloir effacer cette commande (cette action est irréversible)?',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Oui',
+            cancelButtonText: 'Non',
+        }).then(async (result) => {
+            if (result.isConfirmed) {
+                fetch(`https://localhost:7292/api/Invoice?id=${id}`, {
+                    method: 'CANCEL',
+                    mode: 'cors',
+                    credentials: 'include'
+                }).then(async (response) => {
+                    console.log(response);
+                    if (response.ok) {
+                        const deletedId = await response.json();
+                        setInvoices(invoices.filter((invoice) => invoice.id !== deletedId));
+
+                        onShowAlert('Suppression de la commande avec succès!', 2000);
+                    }
+                    else {
+                        console.log("test");
+                        mySwal.fire({
+                            title: `Erreur lors de la suppression de la commande...`,
+                            text: `L'erreur: ${response}`,
+                            icon: 'error',
+                        });
+                    }
+                });
+            }
+        })
+
+    };
+
+    const onShowAlert = (title, message, time) => {
+
+        setAlertTitle(title);
+        setAlertMessage(message);
+        setShowAlert(true);
+
+        window.setTimeout(() => { setShowAlert(false); }, time);
+    }
+
     return (
         <>
             <InvoiceList
                 invoices={invoices}
+                onCancel={handleCancelInvoice}
             />
         </>
     );