integrating react

controllers/people.js

@@ -1,7 +1,7 @@
 const express = require('express');
 const router = express.Router();
 
-const data = [
+let data = [
     {
         id:1,
         name:'Matt',
@@ -29,12 +29,20 @@ router.post('/', (req, res) => {
 });
 
 router.delete('/:id', (req, res) => {
-    data.splice(req.params.id, 1);
+    data = data.filter(person => person.id != req.params.id, 1);
     res.json(data);
 });
 
 router.put('/:id', (req, res) => {
-    data[req.params.id] = req.body;
+    req.body.id = req.params.id;
+
+    data = data.map((person) => {
+        if(person.id == req.params.id){
+            return req.body
+        } else {
+            return person
+        }
+    })
     res.json(data);
 });
 

public/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')
+)

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>

server.js

@@ -2,6 +2,7 @@ const express = require('express');
 const app = express();
 
 app.use(express.json());
+app.use(express.static('public'))
 
 const peopleController = require('./controllers/people.js');
 app.use('/people', peopleController);