submission

package.json

@@ -4,6 +4,7 @@
   "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",

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,35 @@ class App extends Component {
     this.createPost = this.createPost.bind(this);
   }
 
-  componentDidMount() {}
+  componentDidMount() {
+    axios.get('https://practiceapi.devmountain.com/api/posts').then(results => {
+      this.setState({ posts: results.data });
+    });
+  }
 
-  updatePost() {}
+  updatePost(id, text) {
+    axios
+      .put(`https://practiceapi.devmountain.com/api/posts?id=${id}`, { text })
+      .then(results => {
+        this.setState({ posts: results.data });
+      });
+  }
 
-  deletePost() {}
+  deletePost(id) {
+    axios
+      .delete(`https://practiceapi.devmountain.com/api/posts?id=${id}`)
+      .then(results => {
+        this.setState({ posts: results.data });
+      });
+  }
 
-  createPost() {}
+  createPost(text) {
+    axios
+      .post('https://practiceapi.devmountain.com/api/posts', { text })
+      .then(results => {
+        this.setState({ posts: results.data });
+      });
+  }
 
   render() {
     const { posts } = this.state;
@@ -34,11 +61,22 @@ 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

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,54 +56,40 @@ export default class Post extends Component {
     // const editing = this.state.editing
     // const showMasterMenu = this.state.showMasterMenu
     const { editing, showMasterMenu } = this.state;
+    const { text, date } = this.props;
 
     return (
-      // Main body of post
       <section className="Post__parent" onClick={this.hideMasterMenu}>
         {/* Three dots in top right corner */}
         <div className="Post__master-controls">
           <MdMoreVert onClick={this.toggleMasterMenu} />
-
-          {/* Drop-down menu. Remember that the "showMasterMenu" variable has been destructured off of this.state */}
-          <div
-            className="Post__master-menu"
+          <div className="Post__master-menu"
             style={{ display: showMasterMenu ? 'flex' : 'none' }}
           >
             <span onClick={this.showEdit}>Edit</span>
-            <span>Delete</span>
+            <span onClick={() => this.props.deletePostFn(this.id)}>Delete</span> {/* Remember to destructure deletePostFn off of props or use this.props.deletePostFn */}
           </div>
         </div>
-
-        {/* This is where all the meta data of the post will go (who, when, where) */}
         <div className="Post__meta-data">
           <div className="Post__profile-picture">
             <MdPersonOutline />
           </div>
-
-          <span className="Post__name">DevMountain</span>
-          <span className="Post__handle">@DevMountain</span>
-
-          <span className="Post__date">- POST DATE GOES HERE</span>
+          <span className="Post__name">Boom.Camp</span>
+          <span className="Post__handle">@boom.camp</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
-            You can also think of it as being written as so:
-              if( this.state.editing === true ) {
-                <Edit ... />
-              } else {
-                <span ... ></span>
-              }
-        */}
         <div className="Post__content">
-          {// This has been pulled off of this.state via destructuring
-          editing ? (
-            <Edit text="" hideEdit={this.hideEdit} />
+          {editing ? (
+            <Edit
+              text={text}
+              id={this.props.id} // Remember to destructure id off of props or use this.props.id
+              hideEdit={this.hideEdit}
+              updatePostFn={this.props.ComponentupdatePostFn}
+            />
           ) : (
-            <span className="Post__text">POST TEXT GOES HERE</span>
+            <span className="Post__text">{text}</span>
           )}
         </div>
-
-        {/* These are all of the cute little icons in the bottom left corner */}
         <div className="Post__user-controls">
           <MdChatBubbleOutline className="Post__control-icon" />
           <MdFavoriteBorder className="Post__control-icon" />