Hi and welcome back.
Today we're going to be finishing up our social media app.
For that, we're going to start with improving our code for the user post.
Here we have a bunch of inline styles
and this is not something that advanced developers do.
Let's take care of this.
We're going to start from here and we're going to call this style.userPostStats. Let's save this.
Go to style. Js file and here let's create userPostStats and paste this here.
Let's save this and go back to our user post and continue doing so.
Let's use style.userPostStatButton
here.
We can call it style.userPostStatButton
let's save this and come here and create and userPostStatButton and paste this here.
Now everything's back to normal.
We can also grab this here and create style.userPostStatButton and
we can call it right because it's at the right side of this
and we're going to need the margin 27, which is the difference between
this item and the one that we're going to create right now.
Let's create, user, post, stat button, and
save this here and everything's back to normal on our simulator again.
Let's just copy this style and apply it right here.
Now what we want to do is also make sure
that our texts next to our icons looks great without the inline style.
Let's get rid of this and call this
style.userPostStatText.
Let's save this.
Go to our styles and create userPostStatText and paste this here.
Great.
Now we can just copy this tile here and paste it at this place and this place.
Great. Now, everything looks great in our code
and it's very organized, which is one of the biggest qualities
that every great software engineer should have.
Now that we have this, let's go back to our app.
Js file and make sure that infinite scroll works for this post as well.
Now, for user stories, we decided that a
four number would be appropriate for fetching each batch.
This is because we had nine items here, so four was a really good decision there.
But for the user post, we only have five items, so let's make this two instead.
What we're going to be doing is fetching two posts at a time.
Now, the first thing that we need to do is something similar to this.
Whenever the user opens the application,
we want to make sure that there would be some items available to them.
Here, if we were to grab user post
rendered data, it's going to be empty, right?
So far we're displaying this user post using this array here.
So if we actually were to grab this one
and replace user posts with this, we're going to see technically no posts.
Let's just reload this application and we're going to see no post.
This is something that's expected and what
we have to do is make sure that when this use effect runs at the launch of our page,
we also do the same thing for the user posts.
Let's just copy this and paste it here.
Instead of setting is loading user
stories, we're going to have to set Ease loading user posts.
Just grab this and paste it here and do the same as well here.
Now we cant have the content with the same name.
What we can do is get initial data posts
and we can just copy this and paste it here.
Now our pagination for the user post
is working with user stories and we're going to need user posts variable here.
I just copy this and paste it here.
We are going to need the current page
to be one in the beginning, so let's just leave it as one right here.
Then what we also want to do is make sure
that user stories page size here is replaced with user posts page size.
Let's just paste this here and our get initial data post should work just fine.
If we save this
and reload our application, woops, let's see, we might have made a mistake here.
Get user stories rendered data.
We're replacing the user stories rendered data, and this is not what we should do.
Instead, we should set user post rendered
data because that's what we're grabbing the data for.
Let's make sure to replace this setter as well with the setter of user posts.
Now we can see the first two items.
But if we scroll, nothing is happening.
You know what we're going to have to do right now?
We're going to have to make sure that we
use this pagination function and we set on end threshold property here.
We're going to say that on end reach
threshold, which is going to be 0.5 right now as well, which will mean that
after we start scrolling, if we have seen the 50% of our content,
then we should do something and that something is going to be achieved
by setting up on and reached callback function right here.
Great.
So inside here, we should say that if this runs, we have reached the end of post.
Let's just save this, open up our terminal, and see what happens?
If we start scrolling, we have already reached the end of the posts.
The reason is that we already do see 50% of our items.
We see two items already, and we have seen 50% of those items right on scroll.
What we have to do is add two more.
To do that, we can literally go inside our list header component right here.
This is going to be the first line given here, the let's explore part.
We can just close this one because we're not going to need it.
We can just copy this code
inside on and reached and then we can just close this list
header component as well and go back to our on and reached function.
Here we can just paste this code.
Instead of some of the variables that we used here, we got to make sure that we
follow all of the items according to the user post.
So is loading user stories is actually going to be is loading user posts.
Let's just grab this variable here and make sure that we use this one here.
This will make sure that if we're already
in the middle of fetching the posts, then we don't do anything.
This might be useful at the situation when the user tries to scroll too fast.
If you scroll too fast and get to the end
very quickly multiple times and we're already trying to fetch one batch of data
for you, then we're just going to have to make sure that that fetching is
finished before requesting it many more times.
Great.
Now this case will be handled by this if statement.
Here, we're going to make sure that we set is loading user posts instead.
Let's use this here and set is loading user post to true before
we start the pagination function and make sure that we set it to false after that.
Great.
Now we can use the same constant here, content to append.
This is not going to be an issue, but we do have to make sure that instead
of user stories here, we use the user posts.
Let's just copy that and replace this.
Here, instead of user stories current page
plus one, we have to use user posts current page instead.
Let's just paste this here. Great.
Then here, instead of user stories page size, we got to use user posts page size.
Let's just copy this as well and paste it here.
Now, if the content to append did have some data and it's not equal to zero,
then we have to increase the current page because next time if we want to request
the next page, we have to have updated variable inside the current page.
Let's make sure that we copy,
set user post current page setter here and use it right here.
Here we also are going to have to use user posts current page.
Let's do that.
Here we're going to have to set user posts rendered data.
Let's just grab this, copy it, and paste it here.
Now everything should work well.
We can check this and how it's working.
Let's say that inside this function, we're going to say, console log,
fetching more data for you, and it's going to be user post current page plus one.
Let's save this, reload our application, and start scrolling.
We already started fetching more data.
Then if we scroll more, it's going to happen one more time, right?
Great.
If we go to the end, we see that Nicholas Namaradze,
which is our last element inside the user post, is visible here.
I hope that you understand the concept of infinite scrolling.
Again, if you're changing the code and you do see weird behavior and data
disappearing on you, please make sure that you reload your code.
This is not something that's going
to happen for you in production, so don't worry about it.
This is it. Congratulations.
Thank you so much for watching.
We're going to meet in the next section
where we're going to be discussing debugging skills in React Native.
Thanks and see you there.