Okay, let's work on the profile screen. So this screen right here, when we tap on a user's avatar. So there are actually two parts here. There is the profile section, and then we have the user's tweets. So we'll work on both parts in this video. So let's start with the profile. We have to add a few more fields to our database. So for example, the profile, the location, and the link. So let's add those. So let's go in our backend.

So let's add those. So let's go in our backend. Let's go to our create_users_table, and let's add those fields. So let's put it underneath the avatar here. Let me move this up, and we'll put it here. So let's start with the profile. Let's make it a text field. And let's make it nullable, so it's not required. And let's add the location, and we'll make that a string. And then we'll add one for link, actually one for link, and one for link_text.

And let's add the location, and we'll make that a string. And then we'll add one for link, actually one for link, and one for link text. So let's add that, link, and link text. Okay, let's save that. Let's go into our UserFactory, and let's add some fake information here. So for the profile, let's just make it a sentence. So this faker sentence, and let's say 14 words for the location. Let's do this faker city, and then we'll add a comma, and then we'll add a country. So this faker country.

and then we'll add a country. So this faker country. Okay, for the link, we'll just hard code their cast here. Okay, and for the link text, let's say, let's make a random between two options. So we'll use a collection here, collect, and we'll say layercasts.com or layerfile.com. And then we can say random here. Okay, hopefully I did that right. Let's go ahead and reseed our database.

Okay, hopefully I did that right. Let's go ahead and reseed our database. So I'm going to do php artisan migrate:fresh --seed, okay? And now we should have all of that new information. So let me just double check the database here. Let's go to our users, and we do have those fields. We do, okay, cool. So let's go ahead and start filling out this information here. So let me just reload the React Native app. And let's start by passing in the userId whenever we click the avatar image.

So let me just reload the React Native app. And let's start by passing in the userId whenever we click the avatar image. So this is in two places. We have it here on the home screen, and we also have it here on the single tweet page. So pretty much the same thing as passing in the tweetId for the single tweet. So back to our React Native app, let's take a look at this. Let's add userId for our user, okay? And again, it's the same thing. So we'll pass in the userId. userId is userId, okay?

So we'll pass in the userId. User ID is userId, okay? And let's make sure to do the same thing for the other screen. That will be the Tweet screen. Go to Profile. Let's put that in here. And we also have to pass it in here. So in this case, it will be the tweet.user.id. tweet.user.id, and it should be the same on our home screen. Go to Profile, tweet.user.id, okay.

Tweet.user.id, and it should be the same on our home screen. Go to profile, tweet.user.id, okay. Let's go back to our profile screen, and let's make sure to accept the route up here. So here we can accept the route, and let's also add the navigation. Now we can make a call to the backend to grab the user information. And I forgot to make that API route, so let's do that. So back to our backend, back to our routes/api file. Let's go ahead and make that endpoint. So I'm just gonna grab something like this.

Let's go ahead and make that endpoint. So I'm just gonna grab something like this. Let's say route to get, it'll be users, user. We'll take in the user here. And we can pretty much just return the user here. So let's say user, and let's try that out. Let's make sure to import User, okay. And let's go back to our REST client. Let's go to users/1. And not found, users, sorry.

Let's go to users/1. And not found, users, sorry. Okay, should be get, sorry, get in here. Okay, so just like before, we only wanna return the information we need. So we can do User, we can use the only method here. So for example, if we only wanted the ID and the name, we can do that. So let's try that again, and we only get those fields. So let me just paste in the rest of the fields that we do want. Okay, so I pasted in those fields. Let's try it out here.

So in here. So that's just to make sure that the data is loaded from the server. Actually, we'll do that next. Let's start with the actual call to the back end. So let's look for our useEffect hook here, and let's just copy this. Let's go back to our screen, let's put it here. Make sure to import useEffect, and let's say getUserProfile. And for now, let's remove the page. But we might need this later on if we want the infinite scroll to work. And let's grab the information for actually getting the data from the server.

But we might need this later on if we want the infinite scroll to work. And let's grab the information for actually getting the data from the server. So we'll grab this method, okay, and let's paste that in here. Okay, let's call it getUserProfile. getUserProfile, and we don't need this stuff. We are going to users/, and we have that param coming in. So it's going to be route.params.userId. And we have to make a piece of state to hold the user information, so setUser. It's gonna be response.data, and setIsLoading to false. So let's add those pieces of state.

It's gonna be response.data, and setIsLoading to false. So let's add those pieces of state. So again, we'll just grab it from the home screen. So we need the data and the loading state. Okay, so let's paste that up here. We'll change this to user, and setUser, and let's say null by default. And let's make sure we're getting that information here. So let's just console.log response.data. Okay, hopefully, I did that right. Oops, we have to import useState.

Okay, so we do get the user information. So again, we do have to add that loading spinner or the activity indicator. So let's do that as well. So in our ProfileHeader, where is it? Right here. Let's wrap this whole thing in a fragment first, and then we'll put the loading indicator here. So here, and then at the end of the view, right here. Let's close that out, okay. Save that, and now we can grab the activity indicator. So let's go here, let's look for that.

So let's make sure it works for the other page as well. So once we're in the single tweet page, and we click on the profile from there. Can't find variable userId. Tweet screen. I forgot to accept it here. userId, okay. And it does work, cool. Okay, so let me just remove the sleep from the back end. And now we can just fill out the information here on the front end. So pretty much the same thing we've been doing.

And now we can just fill out the information here on the front end. So pretty much the same thing we've been doing. So let's finish that up. So back to our profile screen, we can replace the avatar. So that should be the image. So this is the background, which I don't have implemented. So we'll leave that. But for this, it should be user.avatar. What's next? This should be username, user.name.

What's next? This should be username, user.name. This should be user username. Let's make sure the app's still there. User.username. Okay, see if that works. And let's continue filling out the rest. This is the profile. User.profile. This is the location.

User.profile. This is the location. User.location. This should be the User.link. And this should be the link text. So obviously, this should be set in some sort of settings page, which I don't have. And all of the validation can happen on there. So we have valid data. But for now, we're just grabbing it from the fake data from the back end.

So we have valid data. But for now, we're just grabbing it from the fake data from the back end. User.link.text. And then we have the joined. So for now, we'll just output the createdAt timestamp. User.createdAt. Okay. Okay. And we don't have the following implementation done yet. So we don't have this information.

And we don't have the following implementation done yet. So we don't have this information. So we'll make sure to update it when we do have that. So again, we can make use of date-fns to format this. So let's use the format method. Let's say new Date(). user.createdAt. And let's make sure to import format from date-fns. So it's this one here. And let's save that.

So it's this one here. And let's save that. I forgot to add the second param, which is the format. So it's going to be a month. It's going to be a month, the full name, and then the full year. So YYYY. Okay. Let's check if that works. And it does. Cool.

And it does. Cool. I think all of my users are created on the current date. So let's update our back end here. So user.factory. Is there a created_at here? There's not. So let's do the same thing we did for tweet.factory. And update the created_at to be a random day. So back here, let's add created_at.

And update the created_at to be a random day. So back here, let's add created_at. And let's say between five years ago and now so we can have different dates. So again, I'm going to php artisan migrate --seed. Let's go ahead and reload the app. Oops. And let's see if we get different days here. And we do. Cool. So June, December, and so on.

Cool. So June, December, and so on. So I think that's it for this video. We'll work on the user's tweets in the next video because I want to share at least some logic with this flat list in the main page. And we also want to maintain the infinite scroll and pull to refresh. But for now, we do have the user profile being pulled from the server. So let's go ahead and make a commit. Actually, did I remove the console.log? console.log, let's remove this.

Actually, did I remove the console.log? console.log, let's remove this. Okay. So let's go ahead and make a commit here. git add, git commit, pull user info from server. And for the back end, let's say, git add, git commit, add endpoint for user data.