98 - Handling Pagination in React

tweetme2-web/src/tweets/list.js

@@ -40,14 +40,31 @@ export function TweetsList(props) {
       updateFinalTweets.unshift(tweets)
       setTweets(updateFinalTweets)
     }
+    const handleLoadNext = (event) => {
+      event.preventDefault()
+      if (nextUrl !== null) {
+        const handleLoadNextResponse = (response, status) =>{
+          if (status === 200){
+            setNextUrl(response.next)
+            const newTweets = [...tweets].concat(response.results)
+            setTweetsInit(newTweets)
+            setTweets(newTweets)
+          } else {
+            alert("There was an error")
+          }
+        }
+        apiTweetList(props.username, handleLoadNextResponse, nextUrl)
+      }
+    }
+
     return <React.Fragment>{tweets.map((item, index)=>{
       return <Tweet  
         tweet={item} 
         didRetweet={handleDidRetweet}
         className='my-5 py-5 border bg-white text-dark' 
         key={`${index}-{item.id}`} />
     })}
-    { nextUrl !== null && <button className='btn btn-outline-primary'>Load next</button>}
+    {nextUrl !== null && <button onClick={handleLoadNext} className='btn btn-outline-primary'>Load next</button>}
     </React.Fragment>
   }
 

tweetme2-web/src/tweets/lookup.js

@@ -14,10 +14,13 @@ export function apiTweetDetail(tweetId, callback) {
 }
 
 
-export function apiTweetList(username, callback) {
+export function apiTweetList(username, callback, nextUrl) {
     let endpoint =  "/tweets/"
     if (username){
         endpoint =  `/tweets/?username=${username}`
     }
+    if (nextUrl !== null && nextUrl !== undefined) {
+        endpoint = nextUrl.replace("http://localhost:8000/api", "")
+    }
     backendLookup("GET", endpoint, callback)
 }