WEBVTT

00:00:00.160 --> 00:00:01.580
Hi and welcome back.

00:00:01.610 --> 00:00:05.060
Today we're going to be finishing
up our social media app.

00:00:05.090 --> 00:00:09.500
For that, we're going to start with
improving our code for the user post.

00:00:09.520 --> 00:00:11.240
Here we have a bunch of inline styles

00:00:11.270 --> 00:00:14.100
and this is not something
that advanced developers do.

00:00:14.130 --> 00:00:15.900
Let's take care of this.

00:00:15.930 --> 00:00:24.940
We're going to start from here
and we're going to call this style.userPostStats.
Let's save this.

00:00:24.970 --> 00:00:32.140
Go to style.
Js file and here let's create userPostStats and paste this here.

00:00:32.170 --> 00:00:37.420
Let's save this and go back to our
user post and continue doing so.

00:00:37.450 --> 00:00:41.420
Let's use style.userPostStatButton

00:00:41.440 --> 00:00:43.620
here.

00:00:43.650 --> 00:00:46.780
We can call it style.userPostStatButton

00:00:49.930 --> 00:00:58.100
let's save this
and come here and create and userPostStatButton and paste this here.

00:00:58.130 --> 00:00:59.920
Now everything's back to normal.

00:00:59.950 --> 00:01:06.967
We can also grab this here
and create style.userPostStatButton and

00:01:07.167 --> 00:01:13.240
we can call it right
because it's at the right side of this

00:01:13.270 --> 00:01:17.130
and we're going to need the margin 27,
which is the difference between

00:01:17.160 --> 00:01:20.850
this item and the one that we're
going to create right now.

00:01:20.880 --> 00:01:25.460
Let's create, user, post, stat button, and

00:01:25.490 --> 00:01:29.920
save this here and everything's back
to normal on our simulator again.

00:01:29.950 --> 00:01:36.640
Let's just copy this style
and apply it right here.

00:01:36.920 --> 00:01:40.080
Now what we want to do is also make sure

00:01:40.110 --> 00:01:45.920
that our texts next to our icons
looks great without the inline style.

00:01:45.950 --> 00:01:50.114
Let's get rid of this and call this

00:01:50.314 --> 00:01:52.850
style.userPostStatText.

00:01:52.880 --> 00:01:54.020
Let's save this.

00:01:54.050 --> 00:01:59.900
Go to our styles and create userPostStatText
and paste this here.

00:01:59.920 --> 00:02:00.380
Great.

00:02:00.410 --> 00:02:09.170
Now we can just copy this tile here and
paste it at this place and this place.

00:02:09.200 --> 00:02:12.400
Great.
Now, everything looks great in our code

00:02:12.430 --> 00:02:16.000
and it's very organized,
which is one of the biggest qualities

00:02:16.030 --> 00:02:19.450
that every great software
engineer should have.

00:02:19.480 --> 00:02:22.680
Now that we have this,
let's go back to our app.

00:02:22.710 --> 00:02:27.860
Js file and make sure that infinite
scroll works for this post as well.

00:02:27.890 --> 00:02:30.540
Now, for user stories, we decided that a

00:02:30.570 --> 00:02:34.300
four number would be appropriate
for fetching each batch.

00:02:34.330 --> 00:02:39.820
This is because we had nine items here,
so four was a really good decision there.

00:02:39.850 --> 00:02:44.860
But for the user post, we only have five
items, so let's make this two instead.

00:02:44.890 --> 00:02:50.420
What we're going to be doing is
fetching two posts at a time.

00:02:50.440 --> 00:02:53.840
Now, the first thing that we need
to do is something similar to this.

00:02:53.870 --> 00:02:57.200
Whenever the user opens the application,

00:02:57.230 --> 00:03:01.580
we want to make sure that there would
be some items available to them.

00:03:01.610 --> 00:03:03.680
Here, if we were to grab user post

00:03:03.710 --> 00:03:06.460
rendered data, it's going
to be empty, right?

00:03:06.490 --> 00:03:10.320
So far we're displaying this
user post using this array here.

00:03:10.350 --> 00:03:12.940
So if we actually were to grab this one

00:03:12.970 --> 00:03:18.800
and replace user posts with this,
we're going to see technically no posts.

00:03:18.830 --> 00:03:23.220
Let's just reload this application
and we're going to see no post.

00:03:23.250 --> 00:03:25.820
This is something that's expected and what

00:03:25.850 --> 00:03:31.540
we have to do is make sure that when this
use effect runs at the launch of our page,

00:03:31.570 --> 00:03:35.220
we also do the same thing
for the user posts.

00:03:35.250 --> 00:03:39.580
Let's just copy this and paste it here.

00:03:39.610 --> 00:03:42.220
Instead of setting is loading user

00:03:42.250 --> 00:03:45.780
stories, we're going to have
to set Ease loading user posts.

00:03:45.810 --> 00:03:51.260
Just grab this and paste it here
and do the same as well here.

00:03:51.290 --> 00:03:54.540
Now we cant have the content
with the same name.

00:03:54.570 --> 00:03:57.580
What we can do is get initial data posts

00:03:57.610 --> 00:04:02.540
and we can just copy
this and paste it here.

00:04:02.570 --> 00:04:05.460
Now our pagination for the user post

00:04:05.490 --> 00:04:11.860
is working with user stories and we're
going to need user posts variable here.

00:04:11.890 --> 00:04:14.380
I just copy this and paste it here.

00:04:14.410 --> 00:04:16.520
We are going to need the current page

00:04:16.540 --> 00:04:21.380
to be one in the beginning,
so let's just leave it as one right here.

00:04:21.410 --> 00:04:23.800
Then what we also want to do is make sure

00:04:23.830 --> 00:04:31.660
that user stories page size here is
replaced with user posts page size.

00:04:31.690 --> 00:04:37.520
Let's just paste this here and our get
initial data post should work just fine.

00:04:37.540 --> 00:04:40.700
If we save this

00:04:40.720 --> 00:04:50.500
and reload our application, woops, let's
see, we might have made a mistake here.

00:04:50.530 --> 00:04:52.640
Get user stories rendered data.

00:04:52.660 --> 00:04:58.580
We're replacing the user stories rendered
data, and this is not what we should do.

00:04:58.600 --> 00:05:01.080
Instead, we should set user post rendered

00:05:01.100 --> 00:05:04.400
data because that's
what we're grabbing the data for.

00:05:04.420 --> 00:05:09.420
Let's make sure to replace this setter
as well with the setter of user posts.

00:05:09.450 --> 00:05:11.860
Now we can see the first two items.

00:05:11.890 --> 00:05:14.540
But if we scroll, nothing is happening.

00:05:14.560 --> 00:05:16.880
You know what we're going
to have to do right now?

00:05:16.880 --> 00:05:18.880
We're going to have to make sure that we

00:05:18.910 --> 00:05:24.160
use this pagination function and we
set on end threshold property here.

00:05:24.190 --> 00:05:26.380
We're going to say that on end reach

00:05:26.410 --> 00:05:32.340
threshold, which is going to be 0.5
right now as well, which will mean that

00:05:32.360 --> 00:05:37.460
after we start scrolling,
if we have seen the 50% of our content,

00:05:37.480 --> 00:05:41.960
then we should do something
and that something is going to be achieved

00:05:41.980 --> 00:05:47.460
by setting up on and reached
callback function right here.

00:05:47.480 --> 00:05:47.840
Great.

00:05:47.860 --> 00:05:55.900
So inside here, we should say that if this
runs, we have reached the end of post.

00:05:55.920 --> 00:06:00.480
Let's just save this, open up our
terminal, and see what happens?

00:06:00.510 --> 00:06:05.440
If we start scrolling, we have
already reached the end of the posts.

00:06:05.470 --> 00:06:10.360
The reason is that we already
do see 50% of our items.

00:06:10.390 --> 00:06:18.220
We see two items already, and we have
seen 50% of those items right on scroll.

00:06:18.250 --> 00:06:21.180
What we have to do is add two more.

00:06:21.210 --> 00:06:26.820
To do that, we can literally go inside
our list header component right here.

00:06:26.850 --> 00:06:31.920
This is going to be the first line
given here, the let's explore part.

00:06:31.950 --> 00:06:35.300
We can just close this one because
we're not going to need it.

00:06:35.330 --> 00:06:38.180
We can just copy this code

00:06:38.210 --> 00:06:42.820
inside on and reached
and then we can just close this list

00:06:42.850 --> 00:06:48.160
header component as well and go back
to our on and reached function.

00:06:48.360 --> 00:06:50.640
Here we can just paste this code.

00:06:50.670 --> 00:06:55.860
Instead of some of the variables that we
used here, we got to make sure that we

00:06:55.890 --> 00:06:59.760
follow all of the items
according to the user post.

00:06:59.790 --> 00:07:05.380
So is loading user stories is actually
going to be is loading user posts.

00:07:05.410 --> 00:07:10.720
Let's just grab this variable here
and make sure that we use this one here.

00:07:10.750 --> 00:07:12.880
This will make sure that if we're already

00:07:12.910 --> 00:07:17.420
in the middle of fetching the posts,
then we don't do anything.

00:07:17.450 --> 00:07:22.300
This might be useful at the situation
when the user tries to scroll too fast.

00:07:22.320 --> 00:07:24.240
If you scroll too fast and get to the end

00:07:24.270 --> 00:07:29.240
very quickly multiple times and we're
already trying to fetch one batch of data

00:07:29.270 --> 00:07:33.660
for you, then we're just going to have
to make sure that that fetching is

00:07:33.690 --> 00:07:36.500
finished before requesting
it many more times.

00:07:36.520 --> 00:07:36.880
Great.

00:07:36.910 --> 00:07:40.500
Now this case will be handled
by this if statement.

00:07:40.530 --> 00:07:45.260
Here, we're going to make sure that we
set is loading user posts instead.

00:07:45.290 --> 00:07:50.900
Let's use this here and set is loading
user post to true before

00:07:50.920 --> 00:07:57.220
we start the pagination function and make
sure that we set it to false after that.

00:07:57.240 --> 00:07:57.660
Great.

00:07:57.690 --> 00:08:01.000
Now we can use the same constant here,
content to append.

00:08:01.000 --> 00:08:04.440
This is not going to be an issue,
but we do have to make sure that instead

00:08:04.470 --> 00:08:08.660
of user stories here,
we use the user posts.

00:08:08.690 --> 00:08:11.400
Let's just copy that and replace this.

00:08:11.420 --> 00:08:13.740
Here, instead of user stories current page

00:08:13.770 --> 00:08:19.780
plus one, we have to use
user posts current page instead.

00:08:19.800 --> 00:08:22.900
Let's just paste this here.
Great.

00:08:22.920 --> 00:08:29.120
Then here, instead of user stories page
size, we got to use user posts page size.

00:08:29.150 --> 00:08:33.060
Let's just copy this as
well and paste it here.

00:08:33.080 --> 00:08:39.620
Now, if the content to append did have
some data and it's not equal to zero,

00:08:39.650 --> 00:08:44.740
then we have to increase the current page
because next time if we want to request

00:08:44.770 --> 00:08:50.580
the next page, we have to have updated
variable inside the current page.

00:08:50.610 --> 00:08:53.220
Let's make sure that we copy,

00:08:53.250 --> 00:08:59.520
set user post current page setter here
and use it right here.

00:08:59.640 --> 00:09:04.380
Here we also are going to have
to use user posts current page.

00:09:04.410 --> 00:09:05.700
Let's do that.

00:09:05.730 --> 00:09:08.640
Here we're going to have to set
user posts rendered data.

00:09:08.670 --> 00:09:13.140
Let's just grab this, copy it,
and paste it here.

00:09:13.170 --> 00:09:16.460
Now everything should work well.

00:09:16.490 --> 00:09:19.300
We can check this and how it's working.

00:09:19.320 --> 00:09:25.100
Let's say that inside this function,
we're going to say, console log,

00:09:25.130 --> 00:09:34.220
fetching more data for you, and it's going
to be user post current page plus one.

00:09:34.250 --> 00:09:39.540
Let's save this, reload our application,
and start scrolling.

00:09:39.560 --> 00:09:42.700
We already started fetching more data.

00:09:42.730 --> 00:09:47.620
Then if we scroll more, it's going
to happen one more time, right?

00:09:47.640 --> 00:09:48.380
Great.

00:09:48.410 --> 00:09:51.120
If we go to the end,
we see that Nicholas Namaradze,

00:09:51.150 --> 00:09:54.840
which is our last element
inside the user post, is visible here.

00:09:54.870 --> 00:09:58.520
I hope that you understand
the concept of infinite scrolling.

00:09:58.550 --> 00:10:02.800
Again, if you're changing the code and you
do see weird behavior and data

00:10:02.820 --> 00:10:06.240
disappearing on you, please make
sure that you reload your code.

00:10:06.240 --> 00:10:07.520
This is not something that's going

00:10:07.550 --> 00:10:10.820
to happen for you in production,
so don't worry about it.

00:10:10.850 --> 00:10:12.560
This is it.
Congratulations.

00:10:12.560 --> 00:10:13.920
Thank you so much for watching.

00:10:13.920 --> 00:10:15.560
We're going to meet in the next section

00:10:15.580 --> 00:10:20.380
where we're going to be discussing
debugging skills in React Native.

00:10:20.410 --> 00:10:21.760
Thanks and see you there.