27 - Post Create Clean Up

Author: codingforentrepreneurs

src/reactify-ui/src/App.js

@@ -5,13 +5,13 @@ import './App.css';
 
 import Posts from './posts/Posts';
 import PostDetail from './posts/PostDetail';
-import PostUpdate from './posts/PostUpdate'
+import PostCreate from './posts/PostCreate'
 class App extends Component {
   render() {
     return (
       <BrowserRouter>
           <Switch>
-            <Route exact path='/posts/create' component={PostUpdate}/>
+            <Route exact path='/posts/create' component={PostCreate}/>
             <Route exact path='/posts' component={Posts}/>
             <Route exact path='/posts/:slug' component={PostDetail}/>
             <Route component={Posts}/>

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

@@ -1,3 +1,21 @@
+import React, {Component} from 'react'
+
+import PostForm from './PostForm'
+
+class PostCreate extends Component {
+  render(){
+    return (
+      <div>
+      <h1>Create Post</h1>
+        <PostForm />
+      </div>
+    )
+  }
+
+}
+
+export default PostCreate
+
 // left for reference
 
 

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

@@ -3,7 +3,7 @@ import 'whatwg-fetch'
 import cookie from 'react-cookies'
 import { Link } from 'react-router-dom'
 
-import PostUpdate from './PostUpdate'
+import PostForm from './PostForm'
 
 class PostDetail extends Component {
     constructor(props){
@@ -83,12 +83,18 @@ class PostDetail extends Component {
                 <h1>{post.title}</h1>
                 {post.slug}
 
-                <p className='lead'><Link maintainScrollPosition={false} to={{
+                <p className='lead'>
+                <Link maintainScrollPosition={false} to={{
                     pathname: `/posts`,
                     state: { fromDashboard: false }
-                  }}>Posts</Link></p>
+                  }}>Posts</Link>
+                  <Link maintainScrollPosition={false} to={{
+                    pathname: `/posts/create/`,
+                    state: { fromDashboard: false }
+                  }}>Create Post</Link>
+               </p>
 
-                  {post.owner === true ? <PostUpdate post={post} postItemUpdated={this.handlePostItemUpdated} /> : ""}
+                  {post.owner === true ? <PostForm post={post} postItemUpdated={this.handlePostItemUpdated} /> : ""}
                 </div>
                }
            </div> : "Loading..."}</p>

src/reactify-ui/src/posts/PostUpdate.js src/reactify-ui/src/posts/PostForm.jssrc/reactify-ui/src/posts/PostUpdate.js renamed to src/reactify-ui/src/posts/PostForm.js

@@ -3,7 +3,7 @@ import 'whatwg-fetch'
 import cookie from 'react-cookies'
 import moment from 'moment'
 
-class PostUpdate extends Component {
+class PostForm extends Component {
     constructor(props){
         super(props)
         this.handleSubmit = this.handleSubmit.bind(this)
@@ -44,7 +44,6 @@ class PostUpdate extends Component {
               if (thisComp.props.newPostItemCreated){
                   thisComp.props.newPostItemCreated(responseData)
               }
-              thisComp.defaultState()
               thisComp.clearForm()
           }).catch(function(error){
               console.log("error", error)
@@ -125,6 +124,7 @@ class PostUpdate extends Component {
         event.preventDefault()
       }
       this.postCreateForm.reset()
+      this.defaultState()
     }
 
 
@@ -209,11 +209,11 @@ class PostUpdate extends Component {
                      required='required'/>
                 </div>
                 <button type='submit' className='btn btn-primary'>Save</button>
-                <button className={`btn btn-secondary ${cancelClass}`} onClick={this.clearForm}>Cancel</button>
+                <button className={`btn btn-secondary`} onClick={this.clearForm}>Clear</button>
             </form>
         )
     }
 
 }
 
-export default PostUpdate
+export default PostForm

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

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import 'whatwg-fetch'
 import cookie from 'react-cookies'
-
-import PostUpdate from './PostUpdate'
+import { Link } from 'react-router-dom'
 import PostInline from './PostInline'
 
 class Posts extends Component {
@@ -40,7 +39,7 @@ class Posts extends Component {
   }
 
   handleNewPost(postItemData){
-      console.log(postItemData)
+      // console.log(postItemData)
       let currentPosts = this.state.posts
       currentPosts.unshift(postItemData) // unshift
       this.setState({
@@ -79,18 +78,17 @@ class Posts extends Component {
     return (
       <div>
           <h1>Hello World</h1>
+          <Link maintainScrollPosition={false} to={{
+                    pathname: `/posts/create/`,
+                    state: { fromDashboard: false }
+                  }}>Create Post</Link>
+          
           <button onClick={this.togglePostListClass}>Toggle Class</button>
           {posts.length > 0 ? posts.map((postItem, index)=>{
               return (
                       <PostInline post={postItem} elClass={postsListClass} />
               )
           }) : <p>No Posts Found</p>}
-          {(csrfToken !== undefined && csrfToken !==null) ?
-              <div className='my-5'>
-                  <PostUpdate newPostItemCreated={this.handleNewPost} />
-              </div>
-          : ""}
-          
       </div>
     );
   }