From 552679b230e5ce106c9971353566ae8fc34eb318 Mon Sep 17 00:00:00 2001
From: marvinbanton <marvin.banton@boom.camp>
Date: Fri, 21 Jun 2019 09:19:14 +0800
Subject: [PATCH] submission

---
 package-lock.json                      | 34 ++++----------
 package.json                           |  1 +
 src/components/App.js                  | 65 +++++++++++++++++++++++---
 src/components/Compose/Compose.js      |  8 +++-
 src/components/Header/Header.js        |  2 +-
 src/components/Header/Search/Search.js | 22 ++++-----
 src/components/Post/Edit/Edit.js       |  9 +++-
 src/components/Post/Post.js            | 13 ++++--
 8 files changed, 104 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f8c8362..1fbb6cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7048,8 +7048,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -7086,8 +7085,7 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -7096,8 +7094,7 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7200,8 +7197,7 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7211,7 +7207,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7224,20 +7219,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7254,7 +7246,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7327,8 +7318,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7338,7 +7328,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7414,8 +7403,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7445,7 +7433,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7463,7 +7450,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7502,13 +7488,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         }
diff --git a/package.json b/package.json
index 490d2cc..ec796ee 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/App.js b/src/components/App.js
index b48f641..e6bbae3 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,9 +1,13 @@
 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,23 +22,70 @@ 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,date) {
+    axios.put(`http://localhost:9090/posts/${id}`,{text,date})
+    .then(Response =>{
+      const newpost =Response.data;
+      console.log(newpost);
+      const new_post = this.state.posts.map(post =>{
+        if(post.id === newpost.id){
+          return { post,...newpost };
+        } else {
+          return post;
+        }
+      });
+      this.setState({ posts: new_post });
+    });
+  }
 
-  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(Response =>{
+      this.setState({ posts:[Response.data,...this.state.posts] })
+    });
+  }
 
+  searchPost = (text) => {
+  axios.get(`http://localhost:9090/posts?q=${encodeURI(text)}`)
+  .then(Response =>{
+    this.setState({
+      posts: Response.data
+    });
+  });
+  }
   render() {
     const { posts } = this.state;
 
     return (
       <div className="App__parent">
-        <Header />
+        <Header SearchPostFn={this.searchPost}/>
 
         <section className="App__content">
-          <Compose />
+          <Compose createPostFn={this.createPost}/>
+          {posts.map(post =>(
+            <Post key={post.id} 
+            text={post.text} 
+            date={post.date}
+            id={post.id}
+            updatePostFn={this.updatePost}
+            deletePostFn={this.deletePost}/>
+          ))}
         </section>
       </div>
     );
diff --git a/src/components/Compose/Compose.js b/src/components/Compose/Compose.js
index 57a3aed..e6eb74f 100644
--- a/src/components/Compose/Compose.js
+++ b/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
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 8bd5f2d..c4c8b08 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -20,7 +20,7 @@ export default class Header extends Component {
 
           {/* Displays the search bar */}
           <div className="Header__right">
-            <Search />
+            <Search SearchPostFn={this.props.SearchPostFn}/>
 
             {/* Displays the profile icon */}
             <div className="Header__profile">
diff --git a/src/components/Header/Search/Search.js b/src/components/Header/Search/Search.js
index 5778c53..426a09b 100644
--- a/src/components/Header/Search/Search.js
+++ b/src/components/Header/Search/Search.js
@@ -7,15 +7,15 @@ import { MdSearch } from 'react-icons/md';
 //////////////////////////////////////////////////////// THIS COMPONENT IS BEING RENDERED IN THE *HEADER* COMPONENT
 
 export default class Search extends Component {
-  render() {
-    return (
-      <section className="Search__parent">
-        <div className="Search__content">
-          <input placeholder="Search Your Feed" />
+ render() {
+   return (
+     <section className="Search__parent">
+       <div className="Search__content">
+       <input placeholder="Search Your Feed" onChange={e => this.props.SearchPostFn(e.target.value)}/>
 
-          <MdSearch id="Search__icon" />
-        </div>
-      </section>
-    );
-  }
-}
+         <MdSearch id="Search__icon" />
+       </div>
+     </section>
+   );
+ }
+}
\ No newline at end of file
diff --git a/src/components/Post/Edit/Edit.js b/src/components/Post/Edit/Edit.js
index 29e4d05..af959b1 100644
--- a/src/components/Post/Edit/Edit.js
+++ b/src/components/Post/Edit/Edit.js
@@ -19,7 +19,14 @@ export default class Edit extends Component {
     this.setState({ text: value });
   }
 
-  updatePost() {}
+  updatePost() {
+    const { text } =this.state;
+    const { id, updatePostFn, hideEdit, date } = this.props;
+
+    updatePostFn(id,text,date);
+    
+    hideEdit();
+  }
 
   render() {
     // More destructuring!
diff --git a/src/components/Post/Post.js b/src/components/Post/Post.js
index c7cb520..395bc6a 100644
--- a/src/components/Post/Post.js
+++ b/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 { text, date } = 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={() => this.props.deletePostFn(this.props.id)}>Delete</span>
           </div>
         </div>
 
@@ -83,7 +84,7 @@ export default class Post extends Component {
           <span className="Post__name">DevMountain</span>
           <span className="Post__handle">@DevMountain</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,13 @@ 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 
+            hideEdit={this.hideEdit} 
+            id={this.props.id} 
+            text={text} date={date} 
+            updatePostFn={this.props.updatePostFn} />
           ) : (
-            <span className="Post__text">POST TEXT GOES HERE</span>
+            <span className="Post__text">{text}</span>
           )}
         </div>