React-3 Submission

package.json

@@ -4,12 +4,14 @@
   "private": true,
   "homepage": "https://boomcamp.github.io/react-3/",
   "dependencies": {
+    "axios": "^0.19.0",
     "faker": "^4.1.0",
     "json-server": "^0.15.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-icons": "^3.7.0",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "save": "^2.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App.js

@@ -1,9 +1,14 @@
 import React, { Component } from 'react';
 
+import axios from 'axios';
 import './App.css';
 
+
 import Header from './Header/Header';
 import Compose from './Compose/Compose';
+import Post from './Post/Post';
+
+axios.defaults.headers.common['Content-Type'] = 'application/json';
 
 class App extends Component {
   constructor() {
@@ -18,13 +23,45 @@ class App extends Component {
     this.createPost = this.createPost.bind(this);
   }
 
-  componentDidMount() {}
+  componentDidMount() {
+    axios
+    .get('http://localhost:9090/posts')
+    .then(response => this.setState({ posts: response.data }));
+  }
 
-  updatePost() {}
+  updatePost(id,text) {
+    axios
+    .put(`http://localhost:9090/posts/${id}`, { text })
+    .then(response => {
+      const updatedPost = response.data;
+
+      const updatedPosts = this.state.posts.map(post => {
+        if(post.id === updatedPost.id) {
+          return {post, ...updatedPost };
+        }
+        else {
+          return post;
+        }
+      });
+      this.setState({ posts: updatedPosts })
+    });
+  }
 
-  deletePost() {}
+  deletePost(id) {
+    axios.delete(`http://localhost:9090/posts/${id}`).then(response => {
+      this.setState({
+        posts: this.state.posts.filter(post => post.id !== id),
+      });
+    });
+  }
 
-  createPost() {}
+  createPost(text) {
+    axios
+      .post('http://localhost:9090/posts', { text })
+      .then(results => {
+        this.setState({ posts: [results.data, ...this.state.posts] });
+      });
+  }
 
   render() {
     const { posts } = this.state;
@@ -34,11 +71,21 @@ class App extends Component {
         <Header />
 
         <section className="App__content">
-          <Compose />
+          <Compose createPostFn = {this.createPost} />
+          {posts.map(post => (
+            <Post 
+            key={post.id} 
+            id={post.id}
+            text={post.text} 
+            date={post.date}
+            updatePostFn={this.updatePost}
+            deletePostFn={this.deletePost}
+            />)
+            )}
         </section>
       </div>
     );
   }
 }
 
-export default App;
+export default App;

src/components/Compose/Compose.js

@@ -20,7 +20,13 @@ export default class Compose extends Component {
     this.setState({ text });
   }
 
-  createPost() {}
+  createPost() {
+    const { text } = this.state;
+    const { createPostFn } = this.props;
+
+    createPostFn( text );
+    this.setState({ text: ''});
+  }
 
   render() {
     // Destructuring
@@ -48,4 +54,4 @@ export default class Compose extends Component {
       </section>
     );
   }
-}
+}

src/components/Post/Edit/Edit.js

@@ -19,7 +19,13 @@ export default class Edit extends Component {
     this.setState({ text: value });
   }
 
-  updatePost() {}
+  updatePost() {
+    const {text } = this.state;
+    const { id, updatePostFn, hideEdit } = this.props;
+
+    updatePostFn(id, text);
+    hideEdit();
+  }
 
   render() {
     // More destructuring!

src/components/Post/Post.js

@@ -56,6 +56,7 @@ export default class Post extends Component {
     // const editing = this.state.editing
     // const showMasterMenu = this.state.showMasterMenu
     const { editing, showMasterMenu } = this.state;
+    const { id, text, date, updatePostFn, deletePostFn } = this.props;
 
     return (
       // Main body of post
@@ -70,7 +71,7 @@ export default class Post extends Component {
             style={{ display: showMasterMenu ? 'flex' : 'none' }}
           >
             <span onClick={this.showEdit}>Edit</span>
-            <span>Delete</span>
+            <span onClick={() => deletePostFn(id)}>Delete</span>
           </div>
         </div>
 
@@ -80,10 +81,10 @@ export default class Post extends Component {
             <MdPersonOutline />
           </div>
 
-          <span className="Post__name">DevMountain</span>
-          <span className="Post__handle">@DevMountain</span>
+          <span className="Post__name">Boom.Camp</span>
+          <span className="Post__handle">@boom.camp</span>
 
-          <span className="Post__date">- POST DATE GOES HERE</span>
+          <span className="Post__date">- {date} </span>
         </div>
 
         {/* This is where the text goes. Notice the turnary statement. The turnary statement decides to display either the text OR the editor view
@@ -97,9 +98,14 @@ export default class Post extends Component {
         <div className="Post__content">
           {// This has been pulled off of this.state via destructuring
           editing ? (
-            <Edit text="" hideEdit={this.hideEdit} />
+            <Edit 
+            text={text}
+            id={id}
+            hideEdit={this.hideEdit} 
+            updatePostFn={updatePostFn}
+            />
           ) : (
-            <span className="Post__text">POST TEXT GOES HERE</span>
+            <span className="Post__text"> {text} </span>
           )}
         </div>
 
@@ -112,4 +118,4 @@ export default class Post extends Component {
       </section>
     );
   }
-}
+}

src/index.js

@@ -5,4 +5,4 @@ import './index.css';
 
 import App from './components/App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));