| import React, { Component } from 'react'; |
| import { Link, withRouter } from 'react-router-dom'; |
| import { Button, Container, Form, FormGroup, Input, Label } from 'reactstrap'; |
| import AppNavbar from './AppNavbar'; |
| |
| class ClientEdit extends Component { |
| |
| emptyItem = { |
| name: '', |
| email: '' |
| }; |
| |
| constructor(props) { |
| super(props); |
| this.state = { |
| item: this.emptyItem |
| }; |
| this.handleChange = this.handleChange.bind(this); |
| this.handleSubmit = this.handleSubmit.bind(this); |
| } |
| |
| async componentDidMount() { |
| if (this.props.match.params.id !== 'new') { |
| const client = await (await fetch(`/clients/${this.props.match.params.id}`)).json(); |
| this.setState({item: client}); |
| } |
| } |
| |
| handleChange(event) { |
| const target = event.target; |
| const value = target.value; |
| const name = target.name; |
| let item = {...this.state.item}; |
| item[name] = value; |
| this.setState({item}); |
| } |
| |
| async handleSubmit(event) { |
| event.preventDefault(); |
| const {item} = this.state; |
| |
| await fetch('/clients' + (item.id ? '/' + item.id : ''), { |
| method: (item.id) ? 'PUT' : 'POST', |
| headers: { |
| 'Accept': 'application/json', |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify(item), |
| }); |
| this.props.history.push('/clients'); |
| } |
| |
| render() { |
| const {item} = this.state; |
| const title = <h2>{item.id ? 'Edit Client' : 'Add Client'}</h2>; |
| |
| return <div> |
| <AppNavbar/> |
| <Container> |
| {title} |
| <Form onSubmit={this.handleSubmit}> |
| <FormGroup> |
| <Label for="name">Name</Label> |
| <Input type="text" name="name" id="name" value={item.name || ''} |
| onChange={this.handleChange} autoComplete="name"/> |
| </FormGroup> |
| <FormGroup> |
| <Label for="email">Email</Label> |
| <Input type="text" name="email" id="email" value={item.email || ''} |
| onChange={this.handleChange} autoComplete="email"/> |
| </FormGroup> |
| <FormGroup> |
| <Button color="primary" type="submit">Save</Button>{' '} |
| <Button color="secondary" tag={Link} to="/clients">Cancel</Button> |
| </FormGroup> |
| </Form> |
| </Container> |
| </div> |
| } |
| } |
| |
| export default withRouter(ClientEdit); |