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>
    )
}