import React from 'react';
import Table from '@material-ui/core/Table';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Axios from 'axios';

export default function Orders() {
  state = {
    data: []
  }

  componentDidMount() {
    axios.get(`https://asia-east2-tumbasin-production.cloudfunctions.net/api/orders`)
      .then(res => {
        const data = res.data;
        this.setState({ data });
      })
  }

  render() {
  return (
    <React.Fragment>
      <h1>Orderan Terbaru</h1>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell>Order</TableCell>
            <TableCell>Date</TableCell>
            <TableCell>Status</TableCell>
            <TableCell>Total</TableCell>
            <TableCell align="right">Id</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {this.state.data.map(row => (
            <TableRow key={row.id}>
              <TableCell>{row.Order}</TableCell>
              <TableCell>{row.Date}</TableCell>
              <TableCell>{row.Status}</TableCell>
              <TableCell>{row.Total}</TableCell>
              <TableCell align="right">{row.Id}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </React.Fragment>
  );
}
}