| import React, { Component } from 'react'; |
| import { Button, ButtonGroup, Container, Table } from 'reactstrap'; |
| import AppNavbar from './AppNavbar'; |
| import { Link } from 'react-router-dom'; |
| |
| class InvoiceList extends Component { |
| |
| constructor(props) { |
| super(props); |
| this.state = {invoices: []}; |
| this.remove = this.remove.bind(this); |
| } |
| |
| componentDidMount() { |
| fetch('/invoices') |
| .then(response => response.json()) |
| .then(data => this.setState({invoices: data})); |
| } |
| |
| async remove(id) { |
| await fetch(`/invoices/${id}`, { |
| method: 'DELETE', |
| headers: { |
| 'Accept': 'application/json', |
| 'Content-Type': 'application/json' |
| } |
| }).then(() => { |
| let updatedClients = [...this.state.invoices].filter(i => i.id !== id); |
| this.setState({invoices: updatedClients}); |
| }); |
| } |
| |
| render() { |
| const {invoices} = this.state; |
| |
| const clientList = invoices.map(invoice => { |
| return <tr key={invoice.id}> |
| <td style={{whiteSpace: 'nowrap'}}>{invoice.invoiceTitle}</td> |
| <td>{invoice.id}</td> |
| <td> |
| <ButtonGroup> |
| <Button size="sm" color="primary" tag={Link} to={"/invoices/" + invoice.id}>Edit</Button> |
| <Button size="sm" color="danger" onClick={() => this.remove(invoice.id)}>Delete</Button> |
| </ButtonGroup> |
| </td> |
| </tr> |
| }); |
| |
| return ( |
| <div> |
| <AppNavbar/> |
| <Container fluid> |
| <div className="float-right"> |
| <Button color="success" tag={Link} to="/invoices/new">Add Invoice</Button> |
| </div> |
| <h3>Clients</h3> |
| <Table className="mt-4"> |
| <thead> |
| <tr> |
| <th width="30%">Id</th> |
| <th width="30%">Invoice Title</th> |
| <th width="40%">Actions</th> |
| </tr> |
| </thead> |
| <tbody> |
| {clientList} |
| </tbody> |
| </Table> |
| </Container> |
| </div> |
| ); |
| } |
| } |
| |
| export default InvoiceList; |