1 00:00:00,060 --> 00:00:00,320 Right. 2 00:00:00,320 --> 00:00:01,920 And now let's set up the functionality. 3 00:00:01,940 --> 00:00:08,900 So basically every time we'll click on a button, we'll make a new request in the query params. 4 00:00:08,900 --> 00:00:10,780 We'll also have the page. 5 00:00:10,790 --> 00:00:15,230 For starters, let's navigate back to our page button container. 6 00:00:15,230 --> 00:00:18,010 I don't think we need to log pages anymore. 7 00:00:18,020 --> 00:00:21,320 And now let's set up the function we're going to invoke. 8 00:00:21,500 --> 00:00:27,050 For now, let's just pass in some kind of parameter and let's log it now. 9 00:00:27,050 --> 00:00:28,790 In my case, I'm going to call it page number. 10 00:00:28,790 --> 00:00:31,850 So let's go with handle page change. 11 00:00:31,850 --> 00:00:36,320 This is something we're going to invoke and we're looking for one thing and one thing only, and that 12 00:00:36,320 --> 00:00:37,700 is the page number. 13 00:00:37,940 --> 00:00:39,710 Like I said, for now, let's just log it. 14 00:00:39,710 --> 00:00:42,260 Let's see whether we're getting the correct value. 15 00:00:42,590 --> 00:00:44,930 Now, when do we want to invoke it? 16 00:00:44,930 --> 00:00:45,500 Well. 17 00:00:46,090 --> 00:00:51,160 When we click on Breve, when we click on any of the buttons as well as the next one. 18 00:00:51,280 --> 00:00:57,060 And I think let's start with all of the buttons, since functionality is going to be extremely straightforward. 19 00:00:57,070 --> 00:01:02,050 So we're have the button right after the key I'm going to set up on Click. 20 00:01:02,170 --> 00:01:09,340 And essentially every time I click on a button, I just want to pass in the page number to the handle 21 00:01:09,340 --> 00:01:09,730 page. 22 00:01:09,730 --> 00:01:12,880 Again, we don't have any functionality yet, we're just logging. 23 00:01:13,090 --> 00:01:15,150 Don't worry, we'll set it up in a second. 24 00:01:15,160 --> 00:01:23,980 So let's go with the handle page change and let's pass in the page number and if everything is correct. 25 00:01:25,030 --> 00:01:28,510 Once we navigate to the browser, take a look at the console. 26 00:01:28,690 --> 00:01:31,930 Basically we'll see the page number. 27 00:01:31,930 --> 00:01:32,500 Correct. 28 00:01:32,500 --> 00:01:34,150 So two, three, four. 29 00:01:34,150 --> 00:01:36,160 And of course we can also see one. 30 00:01:36,520 --> 00:01:42,430 Now let's also do the same thing for the prev and next, we just need to keep in mind that of course. 31 00:01:43,200 --> 00:01:45,570 There is a set number of pages. 32 00:01:45,570 --> 00:01:53,220 So effectively, if the page is less than one, I actually want to set it equal to the number of pages. 33 00:01:53,220 --> 00:01:55,590 I want to go all the way to the last page. 34 00:01:55,620 --> 00:01:59,340 Now, alternatively, you can always set it equal to one. 35 00:01:59,370 --> 00:02:00,570 That's also an option. 36 00:02:00,570 --> 00:02:01,930 But I chose this route. 37 00:02:01,950 --> 00:02:04,380 So let's look for pre first. 38 00:02:05,030 --> 00:02:07,780 Then let's go with on click. 39 00:02:08,090 --> 00:02:13,160 Let's set up our callback function and we're not going to invoke it right away. 40 00:02:13,190 --> 00:02:14,990 Handle page change. 41 00:02:14,990 --> 00:02:22,730 We're going to go with Let brief page and we'll calculate by setting up current page minus one. 42 00:02:22,970 --> 00:02:25,040 Like I said, everything is awesome, but. 43 00:02:25,720 --> 00:02:31,730 We might also face the situation where this is going to be equal to zero. 44 00:02:31,750 --> 00:02:36,730 Let's say that at the moment we are on page one and we want to go to previous page. 45 00:02:36,730 --> 00:02:38,830 One minus one is going to be zero. 46 00:02:38,860 --> 00:02:44,620 Now, in order to avoid such scenario, we're going to go with brief page, less than one. 47 00:02:44,620 --> 00:02:48,360 So if it's less than one, like I said, we have few options. 48 00:02:48,370 --> 00:02:51,280 If you want, you can always set it equal to one. 49 00:02:51,460 --> 00:02:57,820 Now, in my case, I'm going to go with num pages, so I'm going to go to the end of the array. 50 00:02:57,910 --> 00:03:03,790 That's going to be my approach and then we're going to go with handle page change and we'll pass in 51 00:03:03,790 --> 00:03:05,230 the brief page. 52 00:03:05,230 --> 00:03:08,050 So that's our brief page functionality. 53 00:03:08,050 --> 00:03:14,350 And when it comes to the next page, pretty much the logic is almost the same. 54 00:03:14,350 --> 00:03:17,920 We just need to look for the last page in our array. 55 00:03:18,070 --> 00:03:22,690 So let's navigate over here and let's go with on click. 56 00:03:23,490 --> 00:03:25,740 And let me just pass it in or I'm sorry. 57 00:03:25,950 --> 00:03:31,050 I was copying the entire thing so there was no need for on click. 58 00:03:31,260 --> 00:03:36,440 And now we just want to change this around where we're not looking for the proof page. 59 00:03:36,450 --> 00:03:38,790 We're actually going to look for next page. 60 00:03:40,220 --> 00:03:45,890 And as far as the condition we're going to look for next page, bigger than Num of pages. 61 00:03:45,890 --> 00:03:51,050 And I'll say note, since we want to look for next page, we're going to go with plus one. 62 00:03:51,320 --> 00:03:53,780 And like I said, next page bigger. 63 00:03:54,620 --> 00:03:57,320 And we're going to look for number of pages. 64 00:03:57,710 --> 00:03:59,930 Again, this is totally up to you. 65 00:03:59,960 --> 00:04:05,900 You can leave this logic or in my case, I'm going to go back to the first page, so I'll set it equal 66 00:04:05,900 --> 00:04:07,230 to one. 67 00:04:07,250 --> 00:04:14,300 Now, at the moment we won't see the prev and next in the browser just because we're not changing those 68 00:04:14,300 --> 00:04:16,060 pages in our URL. 69 00:04:16,070 --> 00:04:23,360 So in order to complete our functionality, we want to navigate back to handle page change. 70 00:04:23,360 --> 00:04:30,680 And for starters, we want to grab the search and path name from use location as well as the navigate. 71 00:04:30,680 --> 00:04:39,050 So once we invoke handle page change, we'll actually we'll invoke a navigate and in there we'll pass 72 00:04:39,050 --> 00:04:40,220 in the URL. 73 00:04:40,310 --> 00:04:42,320 So let's go somewhere here. 74 00:04:42,590 --> 00:04:45,440 I guess right after the pages doesn't really matter. 75 00:04:45,440 --> 00:04:48,920 I'm going to go with const and search. 76 00:04:49,590 --> 00:04:50,340 Pathname. 77 00:04:50,490 --> 00:04:56,400 So those are the two things I can get from use location hook, which is provided by React router Dom. 78 00:04:56,700 --> 00:05:03,180 And then also remember, in order to programmatically navigate, we want to go navigate and we want 79 00:05:03,180 --> 00:05:05,940 to set it equal to use, navigate hook. 80 00:05:06,090 --> 00:05:13,020 Now before we continue, let me just log the search as well as the path name, just so you can see what 81 00:05:13,020 --> 00:05:14,850 we're going to be working with. 82 00:05:15,460 --> 00:05:21,400 I notice once we navigate back to the browser, this is going to be our search. 83 00:05:21,400 --> 00:05:24,670 And then right after that we have the path name. 84 00:05:24,670 --> 00:05:28,120 So of course, path name is our page. 85 00:05:28,120 --> 00:05:33,340 And then when it comes to search, these are going to be our query params. 86 00:05:33,340 --> 00:05:41,980 So now we want to navigate back to the handle page change and essentially I want to use new URL search 87 00:05:41,980 --> 00:05:44,440 params and pass in the search. 88 00:05:44,800 --> 00:05:48,220 So we want to use again one of the JavaScript constructors. 89 00:05:48,220 --> 00:05:55,570 So we'll go with search params, that's going to be my name and we'll set it equal to new URL search 90 00:05:55,570 --> 00:06:03,820 params and we want to pass in the search and as a result I can add extra query param which one will 91 00:06:03,820 --> 00:06:04,540 the page? 92 00:06:04,540 --> 00:06:10,020 So now we'll send a request to the server with the page included. 93 00:06:10,030 --> 00:06:12,160 So let's go with search params. 94 00:06:12,160 --> 00:06:13,480 So that's our object. 95 00:06:13,570 --> 00:06:15,950 We have a set method. 96 00:06:15,950 --> 00:06:18,650 We need to come up with a name and this is very very important. 97 00:06:18,650 --> 00:06:25,550 Remember on the server, the query parameter we're looking for is the page and therefore we go here 98 00:06:25,550 --> 00:06:29,300 with page comma, and then we pass in the page number. 99 00:06:29,300 --> 00:06:36,500 So whatever we get over here and then we want to navigate basically back to our all jobs. 100 00:06:36,500 --> 00:06:42,500 However, in this case we'll have all of the search params, including the page. 101 00:06:42,500 --> 00:06:44,270 So let's go with navigate. 102 00:06:44,270 --> 00:06:48,350 Then we want to construct it and therefore I'm going to go with template string. 103 00:06:48,350 --> 00:06:50,990 First of all, I'll grab the path name again. 104 00:06:50,990 --> 00:06:56,360 This is going to go back to forward slash dashboard, forward slash all jobs. 105 00:06:56,390 --> 00:07:03,350 Then let's add here a question mark since that's the syntax and one more time let's access the search 106 00:07:03,350 --> 00:07:08,810 params only in this case, essentially I want to set it equal to a string. 107 00:07:09,280 --> 00:07:13,420 So first I get back my instance. 108 00:07:13,450 --> 00:07:20,260 On the instance, I add an extra query param by the name of page, and of course the value is equal 109 00:07:20,260 --> 00:07:22,420 to page number, whatever it is. 110 00:07:22,420 --> 00:07:25,630 And then we navigate back to the same page. 111 00:07:25,870 --> 00:07:30,460 In this case, we have the page and we need to turn this into a string. 112 00:07:30,880 --> 00:07:35,170 And as a result, if you notice again, let me start from the scratch. 113 00:07:35,170 --> 00:07:36,970 So we navigate over here to all jobs. 114 00:07:36,970 --> 00:07:43,570 We have those ten pages and if I click on three now notice we make a request. 115 00:07:43,600 --> 00:07:46,300 Since we don't have anything in the inputs. 116 00:07:46,420 --> 00:07:51,310 Of course we only have the page, but this is added to our URL. 117 00:07:51,310 --> 00:07:56,530 So now when we go to a server, we actually request the third page. 118 00:07:56,680 --> 00:08:00,340 And if you don't believe me, I can set up over here interview. 119 00:08:00,550 --> 00:08:02,620 Now I'm going to have 32. 120 00:08:02,650 --> 00:08:09,650 Let's scroll down and if I go to the fourth page, I'm only going to have two jobs and of course, since 121 00:08:09,650 --> 00:08:16,160 we have already functionality for Prevnext notice once I click on next, I actually go to page number 122 00:08:16,160 --> 00:08:20,960 one and then if I click on Prove, now I go back to the last one. 123 00:08:20,960 --> 00:08:25,570 Now if I click one more time, then of course I'll have three, two, one and. 124 00:08:26,310 --> 00:08:27,690 On and on and on and on. 125 00:08:27,690 --> 00:08:31,560 So this is how we can set up straight up pagination in our project.