BAEL-4842 - Use React and Spring Boot to Build a Simple CRUD App

Initial source module for the article

spring-boot-modules/spring-boot-react/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);