87 lines
2.6 KiB
JavaScript

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',
mode: 'cors',
credentials: 'include'
}).then(async (response) => {
if (response.ok) {
var json = await response.json();
setInvoices(json);
}
else{
console.log("Erreur lors de la requête des invoices");
}
});
}, []);
const handleCancelInvoice = async (id) => {
mySwal.fire({
title: `Annuler la commande?`,
text: 'Êtes-vous certain de vouloir annuler 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/Cancel/${id}`, {
method: 'POST',
mode: 'cors',
credentials: 'include'
}).then(async (response) => {
if (response.ok) {
const deletedId = await response.json();
setInvoices(invoices.filter((invoice) => invoice.id !== deletedId));
onShowAlert('Annulation de la commande avec succès!', 2000);
}
else {
mySwal.fire({
title: `Erreur lors de l'annulation 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}
/>
</>
);
}
export default Invoices