invoicer initial version
Change-Id: Ib20a96c224f5c055874f72f8f9a04a4dc8bbbc24
diff --git a/personal/arsenicum/invoicer/frontend/src/ClientEdit.js b/personal/arsenicum/invoicer/frontend/src/ClientEdit.js
new file mode 100644
index 0000000..6eafd20
--- /dev/null
+++ b/personal/arsenicum/invoicer/frontend/src/ClientEdit.js
@@ -0,0 +1,82 @@
+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);
\ No newline at end of file