import React, { useEffect, useState } from "react"; import Pagination from "../components/Pagination"; import CustomerAPI from "../services/CustomerAPI"; import { toast } from "react-toastify"; import { Link } from "react-router-dom"; const CustomersPage = props => { const [customers, setCustomers] = useState([]); const [curPage, setCurPage] = useState(1); const [search, setSearch] = useState(""); const fetchCustomers = async () => { setCustomers(await CustomerAPI.getAll()); }; useEffect(() => { fetchCustomers(); }, []); const nbPerPage = 10; const filteredCustomers = customers.filter(customer => (customer.firstName + customer.lastName + customer.company + customer.email) .toLowerCase() .includes(search.toLowerCase()) ); const paginatedCustomer = Pagination.getData( curPage, nbPerPage, filteredCustomers ); const handlePageChange = page => { console.log("click"); setCurPage(page); }; const handleDelete = customer => { const originalList = [...customers]; setCustomers( customers.filter(curCustomer => curCustomer.id != customer.id) ); CustomerAPI.delete(customer.id) .then(response => toast.success("Client supprimé !")) .catch(error => { setCustomers(originalList); toast.error("Impossible de supprimer le client !"); }); }; const handleSearch = event => { setSearch(event.currentTarget.value); }; return ( <>
Id | Client | Entreprise | Factures | Montant Total | ||
---|---|---|---|---|---|---|
{customer.id} | {customer.firstName} {customer.lastName} | {customer.email} | {customer.company} | {customer.invoices.length} | {customer.totalAmount.toLocaleString()} € | modifier |