97 - Handling our New List View Response

tweetme2-web/public/index.html

@@ -32,7 +32,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id='tweet-container'></div>
-    <div id="tweetme-2" data-username="cfe" data-can-tweet="false"></div>
+    <div id="tweetme-2" data-username="justin" data-can-tweet="false"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

tweetme2-web/src/tweets/list.js

@@ -7,6 +7,7 @@ import {Tweet} from './detail'
 export function TweetsList(props) {
     const [tweetsInit, setTweetsInit] = useState([])
     const [tweets, setTweets] = useState([])
+    const [nextUrl, setNextUrl] = useState(null)
     const [tweetsDidSet, setTweetsDidSet] = useState(false)
     useEffect(()=>{
       const final = [...props.newTweets].concat(tweetsInit)
@@ -19,7 +20,8 @@ export function TweetsList(props) {
       if (tweetsDidSet === false){
         const handleTweetListLookup = (response, status) => {
           if (status === 200){
-            setTweetsInit(response)
+            setNextUrl(response.next)
+            setTweetsInit(response.results)
             setTweetsDidSet(true)
           } else {
             alert("There was an error")
@@ -38,13 +40,15 @@ export function TweetsList(props) {
       updateFinalTweets.unshift(tweets)
       setTweets(updateFinalTweets)
     }
-    return tweets.map((item, index)=>{
+    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>}
+    </React.Fragment>
   }