From 57179682ae7a385f706a2d7fd2f93ee727286f38 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Fri, 9 Oct 2020 17:16:03 -0400
Subject: [PATCH] react

---
 public/app.js     | 128 ++++++++++++++++++++++++++++++++++++++++++++++
 public/index.html |  16 ++++++
 2 files changed, 144 insertions(+)
 create mode 100644 public/app.js
 create mode 100644 public/index.html

diff --git a/public/app.js b/public/app.js
new file mode 100644
index 0000000..ee8bb7e
--- /dev/null
+++ b/public/app.js
@@ -0,0 +1,128 @@
+class App extends React.Component {
+    state = {
+        people:[]
+    }
+
+    componentDidMount = () => {
+        axios.get('/api/people').then(
+            (response) => {
+                this.setState({
+                    people:response.data
+                })
+            }
+        )
+    }
+
+    createPerson = (event) => {
+        event.preventDefault();
+        axios.post(
+            '/api/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('/api/people/' + event.target.value).then(
+            (response) => {
+                this.setState({
+                    people:response.data
+                })
+            }
+        )
+
+    }
+
+    updatePerson = (event) => {
+        event.preventDefault();
+        const id = event.target.getAttribute('id');
+        axios.put(
+            '/api/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')
+)
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..5569382
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+        <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>People CRUD App</h1>
+        <main></main>
+    </body>
+</html>