Okay, let's work on the single tweet screen. So as we tap one of these tweets, we want this screen to show the appropriate data. So before we do that, I forgot to add the timestamp for the tweet, which should go right underneath the tweet body. So I'm just going to paste that in. So it's just a container that is using a Vue component, and we have these styles on it. Then we have a bunch of text for the timestamp, then we have this Twitter for iPhone text. So let's save that. We need the styles for that as well. So we have three new ones.

We need the styles for that as well. So we have three new ones. We have tweetTimestampContainer, tweetTimestampText, and linkColor. So again, I'm just going to paste that in. So I'm just going to paste in three styles here. And that should look good. There we go. Cool. Now let's work on the backend and make an endpoint to grab a single tweet. So let's go to our Laravel project.

Now let's work on the backend and make an endpoint to grab a single tweet. So let's go to our Laravel project. Let's make a new route. Again, I'm just working in the routes file for now. It's going to be /tweets/{tweetId}. It's going to take in a tweet. And we are just going to return the tweet. So let's try that out in our REST client. So the endpoint is going to be /tweets/{id}, try that out. Okay, so there we go.

So the endpoint is going to be /tweets/{id}, try that out. Okay, so there we go. So we also want User information here. So let's make sure to load the User or eager load the User like this. There we go. Now we have User information here. But just like before, we can limit the fields we want to show. So we can basically just copy this and use that here. Okay, so now we only have those fields being returned. Okay, back to our front end.

Okay, so now we only have those fields being returned. Okay, back to our front end. So from the home screen, we want to pass in the tweet_id into the tweet screen page. So let's do that. So let's go into our home screen. So we have this go to, not sure what I named it, go to singleTweet. Yeah, go to singleTweet. So now this should take in a tweet_id. Sorry, tweet_id. And to pass params to the screen, we can just pass it as the second parameter here.

Cool. Okay. So let's go back to our tweet screen. Now we can accept those params coming in. We can say route. And let's just make sure that we can see the correct tweet ID on this page. So I'll just make a new text component here. And it's just going to be route.params.tweet ID. Okay, save that. Let's go into one of these tweets.

Okay, save that. Let's go into one of these tweets. And there it is. This is tweet 41. Now let's go ahead and communicate with our backend. So we'll make use of a useEffect hook to run when the screen runs. So we can copy that from our HomeScreen. Where's our useEffect hook? Right here. Let's put that in our TweetScreen up here.

Right here. Let's put that in our tweet screen up here. We don't need this page param. And I'll name this method getTweet. Let's make sure to import useEffect. And let's go ahead and make this getTweet method. getTweet. And again, I'm going to take this from our home screen. So we're just making an Axios call to the correct endpoint, and then setting our state. So let me just grab all of this, paste this in, don't need a param here.

So we're just making an Axios call to the correct endpoint, and then setting our state. So let me just grab all of this, paste this in, don't need a param here. So the endpoint is now tweet, or tweet slash tweet ID. So we have that coming in. So let's say route.params.tweet ID. And we don't need all of this stuff, which was for our pagination. So let's get rid of this. So we do need a piece of state to hold the tweet. So let's add that. I'll name it tweet.

So let's add that. I'll name it tweet. So setTweet, it's going to be response.data. We don't need this. And we do need a loading state as well. We don't need this refreshing state. OK. So let's add that new piece of state, or the two new pieces of state, one for the tweet and one for the loading state. So I'm just going to grab that from here.

and one for the loading state. So I'm just going to grab that from here. So it's just this. Maybe I should have named data to tweets in this component, but that's OK. Let's go ahead and paste that in up here. Let's name this tweet and setTweet. And the default will be null. And let's make sure to import useState. OK. And for now, let's just console.log the response.data to see if our communication with the backend

OK. And for now, let's just console.log the response.data to see if our communication with the backend works correctly. So let me uncomment this. Let's save that. We have to import Axios. Let me just do that here. Import Axios from Axios. OK. And let's check our console into our React Native project.

So here's the information for that tweet. So first, let's add the loading indicator to make sure our data is loaded first before we show the tweet information on the screen. So in here, let's get rid of this. And let's add the conditional for isLoading. So let's say isLoading. And if it is, we'll just load the ActivityIndicator. So we'll just put it in brackets like this. And let me just grab the ActivityIndicator from our home screen here. OK.

And that's another view there. So right here is where I want to close it. But we have to make it a fragment. There should be an error that says one parent element, and it does. So let's close the fragment here. Let's create it up here. And hopefully I did that right when I save. There we go. So let me make sure that's working. So back to our backend, let's just add a sleep here for two seconds so we can see it working.

So let me make sure that's working. So back to our backend, let's just add a sleep here for two seconds so we can see it working. So I'm going to save. Let's go ahead and reload this. Let me just make this smaller. So reload this. And we did not import activityIndicator. Back to our frontend. Import this. OK, save.

Import this. OK, save. And I did see it there. One more time. And there it is. Cool. So now we can just replace this data with the data coming from the server. So let me just remove that sleep. So let's start with my name. This should be tweet.user.name.

So let's start with my name. This should be tweet.user.name. This should be tweet.user.username. Make sure to leave the at sign. This should be the tweet.user.avatar. And let's see if that works for now. Sorry, we don't need the curlies here. OK, let's replace the body.

OK, and we'll make use of format here. So format from date_fns. Let me just import that actually. Should be this one. And we have to pass it in a new Date, which is this date right here coming in. And the second param is the format you want. So in our case, I've read the talks and it's hours or lowercase h. We want the colon, minutes, and a for a.m. and p.m.. So let's try that. Unexpected token.

So let's try that. Unexpected token. I forgot to close the method. Let's close that out, save. And the time is correct. And it's almost the same for the date, but we just have to change the format. So let me get rid of this, paste that in. And the format is going to be d for day, mm for the month, sorry, mmm, I believe is the short form month, and .yy for the year. OK, so that did work.

So yeah, that's basically it. We don't have information for retweets and quote tweets and likes. So we'll just leave that hard coded. But there's one more thing I want to clean up, and that's to use a base URL for our Axios calls. So right now we're making use of Axios in two places, in this tweet screen that we just did right here, and also in our home screen. So let's look for Axios. So right now we're hard coding the endpoint URL, which is this URL right here. And obviously this is only for our dev server.

So right now we're hard coding the endpoint URL, which is this URL right here. And obviously this is only for our dev server. And this will change when we put this on production. And we don't want to do this in several places, we just want to change it in one place. So there are a few ways to do this. But what I'm going to do is make an instance of Axios and use that. So you can put this wherever you'd like. But let's see, let's put it in our helpers folder. Since I already have that, I'm going to make a new file called axios-config.js. And we can import Axios in here.

Since I already have that, I'm going to make a new file called axios-config.js. And we can import Axios in here. So import Axios from Axios. And then we can make an instance of it and give it any options we want. And whenever we need to use it, we can just make use of this instance. So say const instance = Axios.create. And let's give it a base URL. That's the only option we need for now. And the base URL is this right here. So let me paste that in.

And the base URL is this right here. So let me paste that in. And we just have to export default the instance. Now whenever we want to make use of Axios, we'll make use of this one instead of calling it globally. So let's save this. Let's start with our home screen. Instead of this, let's import axios-config from, where is it? From here. So we have to go up into helpers and axios-config, okay.

From here. So we have to go up into helpers and axios-config, okay. Let's just grab this for our other file, save this, remove this, import. And then we can make use of axios-config instead here. And we no longer need the base URL. We can just say /tweets, and this should still work. Okay. Save that. Can find variable instance. I spelled it wrong, of course.

Can find variable instance. I spelled it wrong, of course. Save. Okay. Let's make sure our home screen still works. Let me just reload this. And it does. So let's do the same thing for our single tweet screen here. Let's get rid of axios. Let's paste in the axios-config, import.

Let's get rid of axios. Let's paste in the axios-config, import. And let's change the variable name here. And let's get rid of the base URL. Okay. Does this work? Let's just reload and make sure. Am I still console logging? No, I'm not, cool. Actually I am.

No, I'm not, cool. Actually I am. So let's get rid of that in the code. Right here. We don't need this anymore. And everything looks good. So now we are able to read tweets from our home screen and also the single tweet screen. In the next video, we'll work on creating tweets. So let's go ahead and make a commit as always. Let's say git add, git commit, pull data for single tweet screen.

So let's go ahead and make a commit as always. Let's say git add, git commit, pull data for single tweet screen. And we have changes in our backend as well. So let's say git add, add endpoint for single tweet.