1 00:00:00,330 --> 00:00:08,240 Amazing work now, of course, I would want to set up my buttons that control which page is displayed, 2 00:00:08,940 --> 00:00:18,360 so which items I'm actually displaying and the way we're going to set this up is where we have the section, 3 00:00:18,860 --> 00:00:21,620 the moment we have just one for the container. 4 00:00:22,050 --> 00:00:26,400 However, right next to it, I would want to display my buttons. 5 00:00:26,700 --> 00:00:32,130 And first I'll set up the button container, but then I'll show you why we would want to render that 6 00:00:32,130 --> 00:00:32,770 conditionally. 7 00:00:33,210 --> 00:00:39,210 So in here, we're going to go with B10 online class is container and for the time being, let's just 8 00:00:39,210 --> 00:00:40,590 place a dummy value. 9 00:00:40,890 --> 00:00:46,890 I'm just going to say hello world and everything is beautiful, but check it out. 10 00:00:47,370 --> 00:00:53,120 When we're loading, you're also able to see the button container. 11 00:00:53,370 --> 00:01:00,780 So if I go to the bigger browser window and for example, if I change the network and we're going to 12 00:01:00,780 --> 00:01:06,990 go here with, I don't know, fast 3G, I think that should be good the moment I have this loading. 13 00:01:07,350 --> 00:01:09,010 But I also have the hello world. 14 00:01:09,390 --> 00:01:16,110 Now, what that means is that our display, my buttons even before I have the loading, and that's not 15 00:01:16,110 --> 00:01:17,100 something that I would want. 16 00:01:17,400 --> 00:01:24,630 Instead, I'm just going to say here conditionally that I only would want to display B10 container if 17 00:01:24,630 --> 00:01:29,190 we are not loading now, since we have done that already quite a few times, I'm going to give you a 18 00:01:29,190 --> 00:01:29,680 challenge. 19 00:01:29,880 --> 00:01:36,720 So at the moment, pause the video and set it up how you would have that conditional rendering and then 20 00:01:36,720 --> 00:01:40,320 once you're done, just double check with my solution. 21 00:01:40,800 --> 00:01:49,110 So hopefully you were able to set it up and we simply say if we're not loading, only then I would want 22 00:01:49,110 --> 00:01:50,880 to display my Bethanne container. 23 00:01:51,210 --> 00:01:57,030 So I move this and to my unconditional surrender and then you'll check it out that I only have this 24 00:01:57,030 --> 00:02:01,070 loading and then once I'm done loading the van, I have my buttons. 25 00:02:01,500 --> 00:02:02,810 So that's what I would want to do. 26 00:02:03,930 --> 00:02:10,740 I'm going to close this out and I'm going to refresh so we don't have that fast 3G and now, of course, 27 00:02:10,740 --> 00:02:14,780 I would want to iterate over my data. 28 00:02:15,210 --> 00:02:23,220 Please keep in mind we're not iterating over the file or worse, we're iterating over the whole length, 29 00:02:23,520 --> 00:02:23,770 OK? 30 00:02:24,050 --> 00:02:27,660 That is very important because this is that array of arrays. 31 00:02:27,930 --> 00:02:35,070 And instead of showcasing nine buttons that just reflect that each item I would want to reference, 32 00:02:35,070 --> 00:02:37,260 well, how many pages I have shown here. 33 00:02:37,260 --> 00:02:40,920 If I have 20 pages, that's why I would want to display 20 items. 34 00:02:40,920 --> 00:02:45,510 And then I remember this data that is that array of arrays. 35 00:02:46,420 --> 00:02:53,290 OK, so hopefully that is clear and inside of this button container, like I said, I would want to 36 00:02:53,290 --> 00:02:54,930 iterate over that list. 37 00:02:55,360 --> 00:02:58,950 So we're going to say here data, then we're iterating over. 38 00:02:59,260 --> 00:03:03,430 But I can tell you right away that we actually don't care about that. 39 00:03:03,480 --> 00:03:03,800 Right. 40 00:03:04,210 --> 00:03:09,930 Because remember, it is array of arrays and that each array represents some kind of page. 41 00:03:10,150 --> 00:03:12,050 But I don't really care about those items. 42 00:03:12,310 --> 00:03:17,230 What I care about is the index because that index will help me. 43 00:03:17,470 --> 00:03:18,290 The change. 44 00:03:18,310 --> 00:03:21,030 Well, which page actually rendering. 45 00:03:21,460 --> 00:03:23,560 So I'm going to go with return. 46 00:03:23,690 --> 00:03:28,540 And for the time being, let's just go with simple return with our button for key. 47 00:03:28,580 --> 00:03:37,630 We just use the index and I'm going to go with class name buttons, class name page and then hyphen 48 00:03:37,630 --> 00:03:38,070 between. 49 00:03:38,440 --> 00:03:47,220 And as far as the value was just a button we save and we should see all of these buttons. 50 00:03:47,560 --> 00:03:52,330 And again, the amount of buttons will depend on how many pages we have. 51 00:03:52,720 --> 00:03:56,230 The more pages we have, the more buttons will have and less pages. 52 00:03:56,510 --> 00:03:58,090 Hopefully you get the gist. 53 00:03:58,420 --> 00:04:03,940 So now of course, I can display the buttons, but there's a few things that I would want to fix. 54 00:04:04,240 --> 00:04:07,960 First of all, instead of this hardcoded button, I would want this. 55 00:04:08,260 --> 00:04:09,970 Well, which page? 56 00:04:10,300 --> 00:04:14,430 Actually, that button preferences and not do that. 57 00:04:14,440 --> 00:04:17,310 Of course, I would want to look for my index. 58 00:04:17,470 --> 00:04:19,680 Remember, I don't care about the item. 59 00:04:19,870 --> 00:04:22,270 I don't care about array of arrays. 60 00:04:22,420 --> 00:04:25,520 I don't care about that specific array in that array of ours. 61 00:04:25,570 --> 00:04:28,790 But I care about the index of that. 62 00:04:28,810 --> 00:04:29,130 All right. 63 00:04:29,440 --> 00:04:33,830 That's why here, as far as the volume, I'm going to go with index. 64 00:04:34,370 --> 00:04:38,730 Now, one small gotcha is that that way I'm going to get page zero. 65 00:04:39,250 --> 00:04:44,920 Now, I don't think that makes sense, even though, of course, and our are zero index based. 66 00:04:45,250 --> 00:04:50,260 But I think it would be a better setup if we would say, yeah, this is page number one. 67 00:04:50,740 --> 00:04:51,850 How will we do that one? 68 00:04:51,850 --> 00:05:00,760 Well, simply we go plus one and then we display page number one all the way to page number 12 in our 69 00:05:00,760 --> 00:05:01,070 case. 70 00:05:01,570 --> 00:05:02,830 So that's a good start. 71 00:05:03,280 --> 00:05:09,870 And now, of course, I would want to set up a function that controls what which page I'm showing. 72 00:05:10,480 --> 00:05:18,940 So followers from which page and I'm simply going to call this Handal page and handle page. 73 00:05:19,300 --> 00:05:22,870 And as far as the logic, it's not going to be that challenging. 74 00:05:23,080 --> 00:05:24,790 We're simply going to say Handal page. 75 00:05:24,940 --> 00:05:28,870 We're going to be looking for the index that is coming forth from the button. 76 00:05:29,260 --> 00:05:33,280 And then we're just going to go set page and then pass index. 77 00:05:33,370 --> 00:05:35,530 Remember, by default, this is zero. 78 00:05:35,770 --> 00:05:39,530 And then, of course, each page has its unique index. 79 00:05:39,880 --> 00:05:45,970 So once we click on a button, we'll grab the index and then we'll pass it into a set page. 80 00:05:46,420 --> 00:05:47,800 We scroll down a bit. 81 00:05:48,100 --> 00:05:54,970 And now let's set up our logic, where, of course, once I click on a button on a part of that specific 82 00:05:54,970 --> 00:06:03,370 index, so we'll go it on like no one is equal to my error function, of course, because I don't want 83 00:06:03,370 --> 00:06:04,330 to invoke it right away. 84 00:06:04,660 --> 00:06:10,630 And I'm going to go with Channel Page and then I'll pass in the index, whatever it is, whatever that 85 00:06:10,630 --> 00:06:14,350 is, zero all the way to eleven in our. 86 00:06:15,460 --> 00:06:22,840 So once I navigate to the bigger screen now check it out, we can click, but nothing is happening. 87 00:06:23,660 --> 00:06:25,700 Interesting why nothing is happening. 88 00:06:26,350 --> 00:06:34,090 Well, because even though we change the index at the moment, we're not re rendering anything because 89 00:06:34,240 --> 00:06:39,070 we have to use the fact that once we said follower's equal to the page and that's it. 90 00:06:39,460 --> 00:06:46,900 So even though the index is changing, we're not really setting it to a new page because here the dependency 91 00:06:46,900 --> 00:06:48,630 already has just lowered. 92 00:06:49,000 --> 00:06:55,270 And I can clearly show that where if we go to inspect and if we'll take a look at the component, notice 93 00:06:55,270 --> 00:06:57,090 how these values are changing. 94 00:06:57,910 --> 00:07:00,030 So, yeah, we're changing that index. 95 00:07:00,310 --> 00:07:07,240 But for some reason, we are not getting that specific page and we simply fix that by adding one more 96 00:07:07,240 --> 00:07:11,250 item in my dependency right where I have my user. 97 00:07:11,740 --> 00:07:17,380 And I would want to run that user every time the page changes. 98 00:07:17,770 --> 00:07:23,300 So when the page changes, of course, I'll check for loading first, which we're not loading anymore. 99 00:07:23,320 --> 00:07:24,310 So this is going to be false. 100 00:07:24,610 --> 00:07:34,030 And then I'll go set followers than have my whole list and then just display that certain list that 101 00:07:34,030 --> 00:07:36,100 are right in that item. 102 00:07:36,280 --> 00:07:39,640 Now, of course, these values will represent that page. 103 00:07:40,000 --> 00:07:43,630 So in here, check it out once you click on the values changing. 104 00:07:43,810 --> 00:07:51,310 And also you're displaying different items because now in that array of arrays, well, you're accessing 105 00:07:51,550 --> 00:07:59,950 that specific array, whether that is a zero or one or two or whatever, and we're almost done with 106 00:07:59,950 --> 00:08:01,020 our page buttons. 107 00:08:01,450 --> 00:08:04,790 What is missing, though, is the active button. 108 00:08:05,350 --> 00:08:13,630 So when I change the index, I also want to change, which is the active button, because I think that 109 00:08:13,630 --> 00:08:15,400 would be a better user experience. 110 00:08:15,820 --> 00:08:22,120 And we're simply going to do that by setting up the class name active and dynamically. 111 00:08:22,510 --> 00:08:28,630 So initially we set this up as a simple string and now we're going to go back to Joske one and we're 112 00:08:28,630 --> 00:08:33,940 going to say that, yes, we would want to always display the page button, but I'll have to set it 113 00:08:33,940 --> 00:08:42,250 up to the template strength and we'll set up our expression where I'm going to say if index matches 114 00:08:42,250 --> 00:08:49,410 my current page value, then I would want to add active B10 class dynamically. 115 00:08:49,840 --> 00:08:57,580 So we're going to go with our ternary operator again and we're going to go with active B10 class and 116 00:08:57,580 --> 00:09:01,390 we only added if the index matches the pages. 117 00:09:01,690 --> 00:09:05,160 If not, then we simply return a no. 118 00:09:05,470 --> 00:09:12,850 And what you'll notice that once we're allowed notice the button with index of zero course matches the 119 00:09:12,850 --> 00:09:13,240 page. 120 00:09:13,240 --> 00:09:13,600 Correct. 121 00:09:13,810 --> 00:09:14,860 There's the page zero. 122 00:09:15,100 --> 00:09:22,630 And as we're going to be changing this internal page, also, the class will move from one button to 123 00:09:22,630 --> 00:09:23,130 another one. 124 00:09:23,590 --> 00:09:25,800 You definitely want to see that in action. 125 00:09:26,250 --> 00:09:31,900 Go to elements and main, then we're looking for followers, then button container and notice how the 126 00:09:31,900 --> 00:09:33,390 first one has this active button. 127 00:09:33,730 --> 00:09:41,230 So as I'm going to be clicking, then I'm going to be changing the value of the button that has the 128 00:09:41,470 --> 00:09:42,460 active button. 129 00:09:42,700 --> 00:09:48,820 So not only I'm turning the pages, I'm also displaying, well, which page I'm actually rendering.