17 - Child Element Event Emitter

Author: codingforentrepreneurs

src/reactify-ui/src/posts/PostCreate.js

@@ -35,7 +35,9 @@ class PostCreate extends Component {
               return response.json()
           }).then(function(responseData){
               console.log(responseData)
-             
+              if (thisComp.props.newPostItemCreated){
+                  thisComp.props.newPostItemCreated(responseData)
+              }
           }).catch(function(error){
               console.log("error", error)
               alert("An error occured, please try again later.")

src/reactify-ui/src/posts/Posts.js

@@ -10,7 +10,7 @@ class Posts extends Component {
     constructor(props){
         super(props)
         this.togglePostListClass = this.togglePostListClass.bind(this)
-
+        this.handleNewPost = this.handleNewPost.bind(this)
     }
     state = {
         posts: [],
@@ -39,41 +39,17 @@ class Posts extends Component {
       })
   }
 
-  createPost(){
-      const endpoint = '/api/posts/' 
-      const csrfToken = cookie.load('csrftoken')
-      let thisComp = this
-      let data = {
-            "slug": "",
-            "title": "",
-            "content": "",
-            "draft": false,
-            "publish": null
-        }
-      if (csrfToken !== undefined) {
-          let lookupOptions = {
-              method: "POST",
-              headers: {
-                  'Content-Type': 'application/json',
-                  'X-CSRFToken': csrfToken
-              },
-              body: JSON.stringify(data),
-              credentials: 'include'
-          }
-
-          fetch(endpoint, lookupOptions)
-          .then(function(response){
-              return response.json()
-          }).then(function(responseData){
-              console.log(responseData)
-             
-          }).catch(function(error){
-              console.log("error", error)
-          })
-      } 
-      
+  handleNewPost(postItemData){
+      console.log(postItemData)
+      let currentPosts = this.state.posts
+      currentPosts.unshift(postItemData) // unshift
+      this.setState({
+          posts: currentPosts
+      })
   }
 
+  
+
   togglePostListClass(event){
       event.preventDefault()
       let currentListClass = this.state.postsListClass
@@ -111,7 +87,7 @@ class Posts extends Component {
           }) : <p>No Posts Found</p>}
           {(csrfToken !== undefined && csrfToken !==null) ?
               <div className='my-5'>
-                  <PostCreate />
+                  <PostCreate newPostItemCreated={this.handleNewPost} />
               </div>
           : ""}