ASPNetCore/Next/pages/customer/index.tsx

106 lines
2.9 KiB
TypeScript
Raw Normal View History

2021-03-26 06:08:15 +00:00
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>
)
}