1 00:00:00,330 --> 00:00:03,990 So our functionality as far as pagination works really, really well. 2 00:00:04,170 --> 00:00:05,400 But there's a major. 3 00:00:06,300 --> 00:00:09,300 We're actually not triggering any kind of request. 4 00:00:09,900 --> 00:00:14,100 So the only thing that we're doing right now is changing value in the state. 5 00:00:14,580 --> 00:00:16,670 So how it can trigger the request? 6 00:00:16,680 --> 00:00:18,270 Well, let's take a look at the Redmi. 7 00:00:19,150 --> 00:00:28,870 And effectively, we have good jobs, not only I want to get search and arrest all the stuff, but I 8 00:00:28,870 --> 00:00:35,860 also want to get the page because remember when it comes to query params on a server, we actually have 9 00:00:35,860 --> 00:00:37,050 the page now. 10 00:00:37,480 --> 00:00:41,620 We assume that if there is no page, then we just go with page number one. 11 00:00:41,650 --> 00:00:45,880 But of course, we can add that and I'm not going to go to the server and show that. 12 00:00:45,880 --> 00:00:48,520 But if you want to double check, please do so. 13 00:00:48,820 --> 00:00:54,190 So in here, I'll add a query program by the name of Page, which is equal to the page. 14 00:00:54,640 --> 00:00:56,560 So that's going to be the first step. 15 00:00:56,680 --> 00:01:05,260 Next, we want to make sure that every time we change this value, we invoke good jobs from the scratch. 16 00:01:05,950 --> 00:01:13,030 Because just by adding this, I mean, nothing is going to change if we want to trigger a new set of 17 00:01:13,030 --> 00:01:15,610 data that represents that page. 18 00:01:15,910 --> 00:01:22,660 We also need to add here the page to the dependency array, and I'm talking about the jobs container 19 00:01:23,230 --> 00:01:24,100 and the last one. 20 00:01:24,700 --> 00:01:29,770 Probably the most trickiest one is going to be this one where remember, handle change. 21 00:01:30,430 --> 00:01:36,160 So every time we change any of these values, we actually do that using the handle change. 22 00:01:36,550 --> 00:01:43,900 Now what I want to do, every time we change this value, we change the query so automatically. 23 00:01:44,260 --> 00:01:53,140 I'm getting new set of pages, new set up data and therefore I always, always want to set back Page 24 00:01:53,140 --> 00:01:56,620 two number one, because I always want to start with the first page. 25 00:01:57,010 --> 00:01:58,750 Hopefully, I makes sense. 26 00:01:59,620 --> 00:02:02,680 So now let's start working on the good jobs. 27 00:02:03,040 --> 00:02:09,729 So let me navigate right now to my app context, refine my good jobs. 28 00:02:10,060 --> 00:02:11,350 That's going to be the first one. 29 00:02:11,350 --> 00:02:13,030 So that is at a job. 30 00:02:13,770 --> 00:02:15,070 See or hear good jobs. 31 00:02:15,430 --> 00:02:19,870 I get the state value page and I'm just going to add it as a first one. 32 00:02:20,110 --> 00:02:23,590 I mean, you don't have to pardon me because I will. 33 00:02:23,980 --> 00:02:29,200 So let's set it equal to the page, and let's add the percent. 34 00:02:29,860 --> 00:02:32,290 So another query string primer. 35 00:02:32,560 --> 00:02:32,800 Great. 36 00:02:32,800 --> 00:02:33,230 Awesome. 37 00:02:34,120 --> 00:02:36,520 Let's go to the jobs container. 38 00:02:36,970 --> 00:02:40,240 Make sure that we have page here in the import. 39 00:02:40,600 --> 00:02:44,950 And let's add that one right away or here the page. 40 00:02:45,400 --> 00:02:46,240 So let's say it. 41 00:02:46,690 --> 00:02:48,850 And now our pagination works. 42 00:02:49,240 --> 00:02:51,280 So we'll be getting that data. 43 00:02:51,790 --> 00:02:56,350 But like I said, what I want to do is also get page number one. 44 00:02:56,380 --> 00:02:59,980 Now, this isn't the case where I guess I'll show you where the arrow would be. 45 00:03:00,310 --> 00:03:02,960 And by the way, I think it's going to be easier to grasp. 46 00:03:02,980 --> 00:03:04,080 So let me go over here. 47 00:03:05,000 --> 00:03:13,280 And now notice something where as we're changing since we added to dependency array, we're actually 48 00:03:13,610 --> 00:03:19,820 fetching new set up data and we can clearly see that in the network notice our requests. 49 00:03:20,030 --> 00:03:25,160 So the special number one, number two, and hopefully you're see where I'm going with this. 50 00:03:25,490 --> 00:03:32,330 And as we're going to be clicking on these pages, whether that is in a button container or prewar next, 51 00:03:32,840 --> 00:03:41,180 every time we basically get a new set of jobs and now let me showcase the problem if we don't have that 52 00:03:41,180 --> 00:03:42,620 page, set the one. 53 00:03:43,040 --> 00:03:44,960 So at the moment, this is my search. 54 00:03:45,500 --> 00:03:47,300 Now what is my current page? 55 00:03:47,660 --> 00:03:49,360 I believe we're here. 56 00:03:49,610 --> 00:03:50,660 Page number three. 57 00:03:51,320 --> 00:03:58,700 So if let's say I go here with a I'm going to trigger new request would search Hey, but what is the 58 00:03:58,700 --> 00:04:01,310 page rally page rulers number three? 59 00:04:02,190 --> 00:04:04,170 But does that make sense? 60 00:04:05,130 --> 00:04:12,360 I mean, I think it makes way more sense if every time we change this value, we also set the page back 61 00:04:12,360 --> 00:04:12,750 to one. 62 00:04:13,230 --> 00:04:17,790 And if you remember that we also used the here in the ad jump. 63 00:04:18,149 --> 00:04:24,000 But keep in mind, it doesn't really matter whether when we're changing the value in a handle change 64 00:04:24,360 --> 00:04:27,300 in the ad job, whether we set the page to one or not. 65 00:04:27,630 --> 00:04:31,380 That is really irrelevant if you're concerned about that. 66 00:04:31,740 --> 00:04:38,130 So let me go to the producer and then let me find the change. 67 00:04:38,610 --> 00:04:42,930 So handle no change for some reason. 68 00:04:43,380 --> 00:04:44,700 It's going to give me the long road. 69 00:04:44,910 --> 00:04:46,290 So here Hannah will change. 70 00:04:47,250 --> 00:04:54,330 Not only I want to change these rules, but I also always, always want to set back Page two number 71 00:04:54,330 --> 00:04:54,630 one. 72 00:04:54,930 --> 00:05:01,770 So let's say it, and now the functionality is going to work where if I get all of them, OK, awesome. 73 00:05:02,220 --> 00:05:03,660 Everything is going to be beautiful. 74 00:05:04,290 --> 00:05:12,600 But if, let's say I go to page number six and then type something in the form by default, I'll get 75 00:05:12,600 --> 00:05:14,010 the page number one. 76 00:05:14,490 --> 00:05:15,750 And congratulations. 77 00:05:16,020 --> 00:05:18,870 That concludes the pagination functionality.