65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import axios from 'axios';
|
||
|
|
|
||
|
|
import { Layout } from './shared/Layout';
|
||
|
|
|
||
|
|
interface CustomerListItem {
|
||
|
|
customerID: string;
|
||
|
|
name: string;
|
||
|
|
email: string;
|
||
|
|
}
|
||
|
|
function RenderCustomerListItemRows(customers: CustomerListItem[]) {
|
||
|
|
let rows = customers.map(x => {
|
||
|
|
return (
|
||
|
|
<tr>
|
||
|
|
<td>{x.name}</td>
|
||
|
|
<td>{x.email}</td>
|
||
|
|
</tr>
|
||
|
|
);
|
||
|
|
})
|
||
|
|
return (
|
||
|
|
<tbody>
|
||
|
|
{rows}
|
||
|
|
</tbody>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
class Customer extends React.Component<{}, {customer: CustomerListItem[] }> {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
customer: [],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
async componentDidMount() {
|
||
|
|
try {
|
||
|
|
let data = await axios.get<CustomerListItem[]>("http://localhost:5000/api/customer");0
|
||
|
|
console.log(data.data);
|
||
|
|
this.setState({
|
||
|
|
customer: data.data
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
this.setState({
|
||
|
|
customer: [],
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<table className="table table-hover table-striped table-sm">
|
||
|
|
<tr>
|
||
|
|
<th>Name</th>
|
||
|
|
<th>Email</th>
|
||
|
|
</tr>
|
||
|
|
{RenderCustomerListItemRows(this.state.customer)}
|
||
|
|
</table>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function CustomerPage() {
|
||
|
|
return (
|
||
|
|
<Layout title="Customers">
|
||
|
|
<Customer></Customer>
|
||
|
|
</Layout>
|
||
|
|
)
|
||
|
|
}
|