crud complete

.env

@@ -0,0 +1 @@
+REACT_APP_API_URL=https://afternoon-escarpment-71350.herokuapp.com/api/contacts

.env.sample

@@ -0,0 +1 @@
+REACT_APP_API_URL=PutYourAPIUrlHere 

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.20.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-scripts": "3.4.3"

src/App.js

@@ -1,12 +1,72 @@
 import React from 'react';
+import axios from 'axios';
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      hello world
+import Form from './components/Form';
+
+class App extends React.Component {
+  state = {
+    contacts: []
+  }
+
+  getContacts = () => {
+    // ** don't forget to create an env file with your api url! **
+    axios.get(process.env.REACT_APP_API_URL)
+      .then(res => {
+        this.setState({
+          contacts: res.data
+        });
+      });
+  }
+
+  deleteContact = (e) => {
+    axios.delete(`${process.env.REACT_APP_API_URL}/${e.target.value}`).then(res => {
+      this.getContacts();
+    });
+  }
+
+  createContact = (contactInfo) => {
+    axios.post(process.env.REACT_APP_API_URL, contactInfo).then(res => {
+      this.getContacts();
+    });
+  }
+
+  updateContact = (updateInfo, id) => {
+    axios.put(`${process.env.REACT_APP_API_URL}/${id}`, updateInfo).then(res => {
+      this.getContacts();
+    })
+  }
+
+  componentDidMount = () => {
+    this.getContacts();
+  }
+
+  render = () => {
+    return <div>
+        <h2>Contacts</h2>
+        <ul>
+            {
+                this.state.contacts.length > 0 ? this.state.contacts.map(
+                    (contact, index) => {
+                        return (
+                          <li key={contact.id}>
+                              {contact.name}: {contact.age}
+                              <button value={contact.id} onClick={this.deleteContact}>
+                                  Delete
+                              </button>
+                              <details><summary>Edit</summary>
+                                <Form contact={contact} updateContact={this.updateContact}/>
+                              </details>
+                          </li>
+                        )
+                    }
+                ) : null
+            }
+        </ul>
+        <h3>Add a Contact</h3>
+        <Form createContact={this.createContact} />
     </div>
-  );
+}
 }
 
 export default App;

src/components/Form.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+class Form extends React.Component {
+    state = {
+        name: '',
+        age: null
+    }
+
+    handleSubmit = (e) => {
+        e.preventDefault()
+        if(this.props.createContact) {
+            this.props.createContact({
+                name: this.state.name,
+                age: parseInt(this.state.age)
+            })
+        } else {
+            this.props.updateContact({
+                name: this.state.name,
+                age: parseInt(this.state.age)
+            }, this.state.id)
+        }
+    }
+
+    handleChange = (e) => {
+       this.setState({
+           [e.target.id]: e.target.value
+       })
+    }
+
+    componentDidMount = () => {
+        if(this.props.contact) {
+            this.setState(this.props.contact)
+        }
+    }
+
+    render() {
+        return (
+            <>
+                <form onSubmit ={this.handleSubmit}>
+                    <input type="text" id="name" placeholder="name" onChange={this.handleChange} defaultValue={this.state.name}></input>
+                    <input type="number" id="age" placeholder="age" onChange={this.handleChange} defaultValue={this.state.age}></input>
+                    <input type="submit" value="Submit"/>
+                </form>
+            </>
+        )
+    }
+}
+
+export default Form;

yarn.lock

@@ -2260,6 +2260,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
 
+axios@^0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.20.0.tgz#057ba30f04884694993a8cd07fa394cff11c50bd"
+  integrity sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.0.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.2.tgz#2bdffc0371e643e5f03ba99065d5179b9ca79799"
@@ -4635,6 +4642,11 @@ follow-redirects@^1.0.0:
   dependencies:
     debug "^3.0.0"
 
+follow-redirects@^1.10.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
+  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"