updating with react

src/main/java/com/example/demo/Person.java

@@ -13,7 +13,7 @@ public class Person {
 
   private String name;
 
-  private String email;
+  private Integer age;
 
   public Integer getId() {
     return id;
@@ -31,11 +31,11 @@ public class Person {
     this.name = name;
   }
 
-  public String getEmail() {
-    return email;
+  public Integer getAge() {
+    return age;
   }
 
-  public void setEmail(String email) {
-    this.email = email;
+  public void setAge(Integer age) {
+    this.age = age;
   }
 }

src/main/resources/static/app.js

@@ -0,0 +1,128 @@
+class App extends React.Component {
+    state = {
+        people:[]
+    }
+
+    componentDidMount = () => {
+        axios.get('/people').then(
+            (response) => {
+                this.setState({
+                    people:response.data
+                })
+            }
+        )
+    }
+
+    createPerson = (event) => {
+        event.preventDefault();
+        axios.post(
+            '/people',
+            {
+                name:this.state.newPersonName,
+                age:this.state.newPersonAge,
+            }
+        ).then(
+            (response) => {
+                this.setState({
+                    people:response.data
+                })
+            }
+        )
+    }
+
+    changeNewPersonAge = (event) => {
+        this.setState({
+            newPersonAge:event.target.value
+        });
+    }
+
+    changeNewPersonName = (event) => {
+        this.setState({
+            newPersonName:event.target.value
+        });
+    }
+
+    deletePerson = (event) => {
+        axios.delete('/people/' + event.target.value).then(
+            (response) => {
+                this.setState({
+                    people:response.data
+                })
+            }
+        )
+
+    }
+
+    updatePerson = (event) => {
+        event.preventDefault();
+        const id = event.target.getAttribute('id');
+        axios.put(
+            '/people/' + id,
+            {
+                name:this.state.updatePersonName,
+                age:this.state.updatePersonAge,
+            }
+        ).then(
+            (response) => {
+                this.setState({
+                    people:response.data,
+                    name:'',
+                    age:null,
+                })
+            }
+        )
+    }
+
+    changeUpdatePersonName = (event) => {
+        this.setState(
+            {
+                updatePersonName:event.target.value
+            }
+        )
+    }
+
+    changeUpdatePersonAge = (event) => {
+        this.setState(
+            {
+                updatePersonAge:event.target.value
+            }
+        )
+    }
+
+    render = () => {
+        return <div>
+            <h2>Create Person</h2>
+            <form onSubmit={this.createPerson}>
+                <input onKeyUp={this.changeNewPersonName} type="text" placeholder="name" /><br/>
+                <input onKeyUp={this.changeNewPersonAge} type="number" placeholder="age" /><br/>
+                <input type="submit" value="Create Person" />
+            </form>
+            <h2>List of People</h2>
+            <ul>
+                {
+                    this.state.people.map(
+                        (person, index) => {
+                            return <li key={index}>
+
+                                {person.name}: {person.age}
+
+                                <button value={person.id} onClick={this.deletePerson}>DELETE</button>
+
+                                <form id={person.id} onSubmit={this.updatePerson}>
+                                    <input onKeyUp={this.changeUpdatePersonName} type="text" placeholder="name"/><br/>
+                                    <input onKeyUp={this.changeUpdatePersonAge} type="number" placeholder="age"/><br/>
+                                    <input type="submit" value="Update Person"/>
+                                </form>
+                            </li>
+                        }
+                    )
+                }
+            </ul>
+        </div>
+    }
+}
+
+ReactDOM.render(
+    <App></App>,
+    document.querySelector('main')
+)

src/main/resources/static/index.html

@@ -3,9 +3,14 @@
     <head>
         <meta charset="utf-8">
         <title></title>
-        <script src="/js/app.js" charset="utf-8"></script>
+        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+        <script type="text/babel" src="app.js" charset="utf-8"></script>
     </head>
     <body>
-        <h1>Hello Spring</h1>
+        <h1>People CRUD App</h1>
+        <main></main>
     </body>
 </html>

src/main/resources/static/js/app.js

@@ -1 +0,0 @@
-alert('hi')