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/ClientList.js

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