ASPNetCore/Next/pages/customer/index.tsx

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 (
        <button className="btn btn-danger btn-sm" onClick={onClickDelete}>
            <FontAwesomeIcon icon={faTrash} />
        </button>
    );
}
const CustomerListItemRows: React.FunctionComponent<{
    customers: CustomerListItem[],
    onDelete: (val) => void,
}> = ({ customers, onDelete }) => {
    let rows = customers.map(x => {
        return (
            <tr>
                <td>{x.name}</td>
                <td>{x.email}</td>
                <td><DeleteCustomerButton customerID={x.customerID} onDelete={onDelete}></DeleteCustomerButton></td>
            </tr>
        );
    })
    return (
        <tbody>
            {rows}
        </tbody>
    )
}
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 (
            <table className="table table-hover table-striped table-sm">
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
                <CustomerListItemRows customers={this.state.customer} onDelete={this.deleteCustomer.bind(this)}>
                </CustomerListItemRows>
            </table>
        );
    }
}

export default function CustomerPage() {
    return (
        <Layout title="Customers">
            <Customer></Customer>
        </Layout>
    )
}