29 - Dynamically Load More Posts

Author: codingforentrepreneurs

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

@@ -88,10 +88,11 @@ class PostDetail extends Component {
                     pathname: `/posts`,
                     state: { fromDashboard: false }
                   }}>Posts</Link>
-                  <Link maintainScrollPosition={false} to={{
+
+                  {post.owner === true ? <Link maintainScrollPosition={false} to={{
                     pathname: `/posts/create/`,
                     state: { fromDashboard: false }
-                  }}>Create Post</Link>
+                  }}>Create Post</Link> : "" }
                </p>
 
                   {post.owner === true ? <PostForm post={post} postItemUpdated={this.handlePostItemUpdated} /> : ""}

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

@@ -10,28 +10,57 @@ class Posts extends Component {
         super(props)
         this.togglePostListClass = this.togglePostListClass.bind(this)
         this.handleNewPost = this.handleNewPost.bind(this)
+        this.loadMorePosts =this.loadMorePosts.bind(this)
+        this.state = {
+            posts: [],
+            postsListClass: "card",
+            next: null,
+            previous: null,
+            author: false,
+            count: 0
+        }
     }
-    state = {
-        posts: [],
-        postsListClass: "card",
+
+    loadMorePosts(){
+        const {next} = this.state 
+        if (next !== null || next !== undefined) {
+             this.loadPosts(next)
+        }
+       
     }
-  loadPosts(){
-      const endpoint = '/api/posts/' 
+    
+  loadPosts(nextEndpoint){
+      let endpoint = '/api/posts/' 
+      if (nextEndpoint !== undefined) {
+          endpoint = nextEndpoint
+      }
       let thisComp = this
       let lookupOptions = {
           method: "GET",
           headers: {
               'Content-Type': 'application/json'
           }
       }
+      const csrfToken = cookie.load('csrftoken')
+      if (csrfToken !== undefined) {
+          lookupOptions['credentials'] = 'include'
+          lookupOptions['headers']['X-CSRFToken'] = csrfToken
+       }
 
       fetch(endpoint, lookupOptions)
       .then(function(response){
           return response.json()
       }).then(function(responseData){
           console.log(responseData)
+          // let currentPosts = thisComp.state.posts
+          // let newPosts = currentPosts.concat(responseData.results)
+          // console.log(currentPosts)
            thisComp.setState({
-                  posts: responseData
+                  posts: thisComp.state.posts.concat(responseData.results),
+                  next: responseData.next,
+                  previous: responseData.previous,
+                  author: responseData.author,
+                  count: responseData.count
               })
       }).catch(function(error){
           console.log("error", error)
@@ -68,27 +97,32 @@ class Posts extends Component {
       this.setState({
           posts: [],
           postsListClass: "card",
+          next: null,
+          previous: null,
+          author: false,
+          count: 0
       })
       this.loadPosts()
   }
   render() {
       const {posts} = this.state
       const {postsListClass} = this.state
-      const csrfToken = cookie.load('csrftoken')
+      const {author} = this.state
+      const {next} = this.state 
     return (
       <div>
-          <h1>Hello World</h1>
-          <Link maintainScrollPosition={false} to={{
+          {author === true ? <Link className='mr-2' maintainScrollPosition={false} to={{
                     pathname: `/posts/create/`,
                     state: { fromDashboard: false }
-                  }}>Create Post</Link>
+                  }}>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>}
+          {next !== null ? <button onClick={this.loadMorePosts}>Load more</button> : ''}
       </div>
     );
   }