import React from 'react'; import axios from 'axios'; import { CustomerClient, CustomerListItem } from '../../APIClient'; import { Layout } from '../shared/Layout'; import Swal from 'sweetalert2'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTrash } from '@fortawesome/free-solid-svg-icons'; const DeleteCustomerButton: React.FunctionComponent<{ customerID: string, onDelete: (val) => void }> = ({ customerID, onDelete }) => { const onClickDelete = async () => { const result = await Swal.fire({ title: 'Confirm delete?', text: 'Delete customer?', icon: 'warning', showCancelButton: true, }) if (result.isConfirmed) { onDelete(customerID); } } return ( ); } const CustomerListItemRows: React.FunctionComponent<{ customers: CustomerListItem[], onDelete: (val) => void, }> = ({ customers, onDelete }) => { let rows = customers.map(x => { return ( {x.customerID} {x.name} {x.email} ); }) return ( {rows} ) } class Customer extends React.Component<{}, { customer: CustomerListItem[] }> { constructor(props) { super(props); this.state = { customer: [], } } async componentDidMount() { this.getCustomers(); } async getCustomers() { try { const client = new CustomerClient(); let data = await client.getAll(); console.log(data); this.setState({ customer: data }); } catch (error) { this.setState({ customer: [], }); } } async deleteCustomer(customerId) { try { const client = new CustomerClient(); await client.delete(customerId); let customer = this.state.customer.filter(x => x.customerID != customerId); this.setState({ customer }) } catch (error) { alert(error); } } render() { return (
ID Name Email
); } } export default function CustomerPage() { return ( ) }