1 00:00:01,010 --> 00:00:01,710 Welcome back. 2 00:00:01,910 --> 00:00:07,160 In this video, we are going to set up a part of our categories screen, so here you can see the different 3 00:00:07,160 --> 00:00:12,320 categories that we have like business, entertainment, general and so forth, and you see that the 4 00:00:12,320 --> 00:00:19,100 selected option is going to stay as well as we have a side scroll view here or a scroll of a view that 5 00:00:19,100 --> 00:00:25,250 goes to the horizontal direction and not the vertical direction, as we usually have in here, for example. 6 00:00:25,760 --> 00:00:27,620 All right, so let's get started building that. 7 00:00:29,630 --> 00:00:34,670 Therefore, let's go over to our categories page, so we had those categories. 8 00:00:35,240 --> 00:00:38,090 File where we for now just had a simple text. 9 00:00:38,450 --> 00:00:41,150 And we're going to add another composable here. 10 00:00:41,480 --> 00:00:44,540 So I'm going to create two categories tab. 11 00:00:44,750 --> 00:00:47,690 So fun category tab. 12 00:00:47,690 --> 00:00:53,690 Like so and it will need a category itself, which will be a string. 13 00:00:53,930 --> 00:00:59,600 So category of type string, then we need to know which one is selected. 14 00:01:00,920 --> 00:01:06,530 So this will be a Boolean, which I'm going to set default by default, and then I'm going to have an 15 00:01:06,530 --> 00:01:18,590 on fetch kid to go every variable, which will get a string and return a unit. 16 00:01:20,180 --> 00:01:20,720 OK. 17 00:01:21,730 --> 00:01:28,870 So can custom write our our code, so when something was selected, what should happen, so to speak? 18 00:01:29,470 --> 00:01:29,880 All right. 19 00:01:29,890 --> 00:01:34,120 And then what I need in here is, first of all, going to be the background. 20 00:01:34,570 --> 00:01:37,290 So I want to set the background color of it. 21 00:01:37,300 --> 00:01:42,700 As you saw, this background color is changing depending on whether it's selected or not. 22 00:01:43,180 --> 00:01:45,550 So we can just check if is selected. 23 00:01:46,240 --> 00:01:48,490 Then we are going to use one color. 24 00:01:48,490 --> 00:01:59,380 So color resource here with the art of color dot purple 200 and we need to import art. 25 00:02:00,040 --> 00:02:01,150 So let's import that. 26 00:02:01,630 --> 00:02:03,130 Then there is this color purple on. 27 00:02:03,130 --> 00:02:07,780 There are colors XML file, which you will find under your. 28 00:02:09,060 --> 00:02:12,690 Well, it's under duress values here. 29 00:02:12,870 --> 00:02:18,510 There's the colors XML file in there you will find some predefined colors, like the purple colors, 30 00:02:18,750 --> 00:02:21,990 which have been added for the project by default. 31 00:02:22,920 --> 00:02:23,310 I don't. 32 00:02:24,570 --> 00:02:31,230 If it's not going to be selected, then I'm going to have this else clause and we can put it here else. 33 00:02:32,070 --> 00:02:37,350 We're going to use color resource with IDR Dot. 34 00:02:39,100 --> 00:02:39,700 Color. 35 00:02:42,540 --> 00:02:45,600 Thought and then it will be purple 700. 36 00:02:47,610 --> 00:02:55,110 OK, so this is our if statement here and what's wrong with the color surface? 37 00:03:01,690 --> 00:03:05,500 And for any of this to work, let's make sure we have this in a composable. 38 00:03:05,800 --> 00:03:07,660 OK, then this error disappears. 39 00:03:08,230 --> 00:03:09,520 That's always a tricky one. 40 00:03:10,030 --> 00:03:14,020 The code itself is fine, but you forgot, for example, that it should be a composable. 41 00:03:14,530 --> 00:03:18,840 OK, and then I will set the surface of the category tap. 42 00:03:18,850 --> 00:03:21,820 So there's this surface composable. 43 00:03:21,940 --> 00:03:25,420 And I want to actually import it. 44 00:03:25,750 --> 00:03:34,420 So for surface composable, let's import this One UI modifier surface and here I'll have a modifier 45 00:03:34,420 --> 00:03:40,570 first, which is just going to design it as I'm going to design the little bit of padding towards the 46 00:03:40,570 --> 00:03:41,770 horizontal direction. 47 00:03:41,770 --> 00:03:50,580 So what's both directions in the horizontal level and the vertical 16 dpi and what to import dpi? 48 00:03:50,920 --> 00:03:55,430 So towards the horizontal direction, it's going to just have four density pixels towards the others. 49 00:03:55,720 --> 00:03:56,560 It's going to have more. 50 00:03:56,800 --> 00:04:01,990 And then the modifier will also have a clickable so I want to be able to click on it. 51 00:04:02,500 --> 00:04:09,040 And once I click on any of the given, then on such categories should be called where I'm going to pass 52 00:04:09,040 --> 00:04:10,300 the category itself. 53 00:04:10,840 --> 00:04:15,250 So this is quite connected here, so to speak. 54 00:04:15,250 --> 00:04:21,310 So when we are creating a category tap, we are passing a category to it and we're passing what should 55 00:04:21,310 --> 00:04:23,350 happen once we are fetching a category. 56 00:04:23,360 --> 00:04:29,470 So once we're loading the data for a specific category and we are passing the category that is passed 57 00:04:29,470 --> 00:04:33,500 to the category tab to the on fetch category string. 58 00:04:33,520 --> 00:04:36,700 So this is a string as you see here, so it's fine to pass it. 59 00:04:37,120 --> 00:04:39,700 So we're basically saying which category was selected? 60 00:04:40,410 --> 00:04:40,870 OK. 61 00:04:41,410 --> 00:04:48,730 And then I'm going to set the shape of the category tab to be small. 62 00:04:48,790 --> 00:04:51,280 So a material theme. 63 00:04:53,800 --> 00:05:00,550 That shape that small or shapes or small. 64 00:05:01,810 --> 00:05:05,980 OK, and this is not as intended, so here. 65 00:05:07,660 --> 00:05:08,410 Let me see this. 66 00:05:08,500 --> 00:05:09,730 This is still the surface. 67 00:05:10,990 --> 00:05:13,120 This was just generated for me by default. 68 00:05:13,210 --> 00:05:18,970 Like when they added the material theme here and the color should be using the background that we set 69 00:05:18,970 --> 00:05:19,180 up. 70 00:05:19,780 --> 00:05:22,120 So this will be the surface of the item. 71 00:05:22,870 --> 00:05:28,120 OK, now I want to say what should be the content of the Category tab item? 72 00:05:28,540 --> 00:05:35,500 So here I'm just going to say that it should be a text and the text should have category text. 73 00:05:35,650 --> 00:05:38,350 So the text content of that text will be category. 74 00:05:39,460 --> 00:05:43,420 And then I'm going to add a style to it as well. 75 00:05:43,930 --> 00:05:52,960 So it's going to use the material theme that typography that body to style. 76 00:05:54,200 --> 00:05:56,180 And you can use any other style if you want to. 77 00:05:56,810 --> 00:06:00,470 And the color is just going to be white, so color is white. 78 00:06:01,310 --> 00:06:03,260 We need to import color here for this. 79 00:06:03,800 --> 00:06:06,050 So let's import color. 80 00:06:06,380 --> 00:06:11,530 This one, the compose version, and then I'm going to add the modifier to style. 81 00:06:11,540 --> 00:06:14,600 It is a little bit more with padding, for example. 82 00:06:15,050 --> 00:06:21,470 So towards the left of eight density pixels, actually towards all directions of eight density pixels. 83 00:06:22,010 --> 00:06:22,970 So deep. 84 00:06:23,390 --> 00:06:23,840 Like so. 85 00:06:27,320 --> 00:06:34,250 All right, so this will be the category tab composable and we're going to display in our categories 86 00:06:34,250 --> 00:06:39,290 in a bit, but before that, let's set up the different categories that we want to have available in 87 00:06:39,290 --> 00:06:40,100 our application. 88 00:06:40,490 --> 00:06:45,650 So I'm just going to create a new file for this and enum class, so to speak. 89 00:06:47,100 --> 00:06:53,400 Which I'm going to put into my models folder, so I had this model's folder, and let's go ahead and 90 00:06:53,400 --> 00:06:55,380 create a new column file class. 91 00:06:55,710 --> 00:06:57,450 And this one will be an enum class. 92 00:06:58,110 --> 00:07:09,150 So article category and an enum class allows us to create keywords that we assign a certain value to. 93 00:07:09,360 --> 00:07:11,670 So that's really the advantage that we have here. 94 00:07:12,000 --> 00:07:22,350 So this category or article category should have a category name that is passed to it to glory name, 95 00:07:22,350 --> 00:07:23,640 which will be of type string. 96 00:07:25,530 --> 00:07:28,200 And then inside of it, I'm going to set up the different. 97 00:07:29,210 --> 00:07:34,010 Values, so I'm going to have a business with the category name of business. 98 00:07:36,300 --> 00:07:39,510 Then I'm going to have the entertainment. 99 00:07:41,050 --> 00:07:46,390 Category and so forth, so I'm just going to add the most important categories here entertainment, 100 00:07:46,390 --> 00:07:49,810 general health, science, sports and technology. 101 00:07:50,840 --> 00:07:56,750 OK, so this will be different categories that I want to have in my application, as you can see here, 102 00:07:56,760 --> 00:08:00,860 so business, entertainment, general health, science, sports and technology. 103 00:08:01,340 --> 00:08:07,280 So we're just creating this big keyword and assigning a string to word so capitalized keyword that we 104 00:08:07,280 --> 00:08:09,860 can now use whenever we are. 105 00:08:10,900 --> 00:08:14,320 Creating a article category or using the article category class. 106 00:08:14,830 --> 00:08:17,440 So now let's get the article category. 107 00:08:17,590 --> 00:08:19,000 Therefore, I'm going to create a function. 108 00:08:19,000 --> 00:08:22,300 Get all article kitty. 109 00:08:24,540 --> 00:08:29,240 Categories you could call a category one category. 110 00:08:30,710 --> 00:08:32,450 Yeah, I'm just going to leave it like this, it's fine. 111 00:08:32,960 --> 00:08:36,230 This would be a list of article category. 112 00:08:36,950 --> 00:08:43,039 So this would just return an article category list with all of those categories. 113 00:08:43,370 --> 00:08:45,800 So business, entertainment and so forth. 114 00:08:46,370 --> 00:08:52,530 So let's return a list of those individual keywords like so return list of business, entertainment 115 00:08:52,530 --> 00:08:54,890 and general health science, sports and technology. 116 00:08:55,160 --> 00:09:03,710 Therefore, we can either import them or use them like so like with the article category keyword and 117 00:09:04,130 --> 00:09:05,360 well in front of it. 118 00:09:06,290 --> 00:09:06,800 Like so. 119 00:09:10,630 --> 00:09:12,760 Sports and technology. 120 00:09:14,190 --> 00:09:14,610 All right. 121 00:09:14,940 --> 00:09:23,040 So this will give us all the categories, the article categories, and now how about getting a specific 122 00:09:23,040 --> 00:09:23,250 one? 123 00:09:23,460 --> 00:09:26,280 Well, there I'm going to use the new function here. 124 00:09:26,790 --> 00:09:29,910 Good article category. 125 00:09:31,260 --> 00:09:32,310 Like a specific one. 126 00:09:32,640 --> 00:09:38,940 And here I need to pass into category name, so category which will be the string type. 127 00:09:39,240 --> 00:09:43,050 And it will return an article category, Nullarbor, so it can also return nothing. 128 00:09:43,950 --> 00:09:50,640 So what I'm going to do is I'm going to create a map and the map will have values. 129 00:09:53,280 --> 00:09:56,430 That are going to be associated. 130 00:09:57,940 --> 00:10:04,060 By our associate by the article category category name. 131 00:10:05,730 --> 00:10:15,840 And these values only work if I import the article category in this entire file, so import EU Dot Orioles 132 00:10:15,850 --> 00:10:21,090 start and usurp the models the DOT article category like so. 133 00:10:22,250 --> 00:10:24,200 And actually, the star. 134 00:10:25,880 --> 00:10:30,140 Like debts and then the values are going to work so that we can return. 135 00:10:31,390 --> 00:10:35,350 The Met at the position of the category. 136 00:10:39,790 --> 00:10:47,410 Though this get article category will get a string, and it will basically return to category based 137 00:10:47,410 --> 00:10:48,130 on that string. 138 00:10:48,310 --> 00:10:55,210 So it takes this map where it has the value associated with a category name, and then it just uses 139 00:10:55,210 --> 00:11:00,760 this map and gets the one where the categories are overlapping, so to speak. 140 00:11:00,760 --> 00:11:06,490 So whenever we're passing signs, for example, it's going to return the science category. 141 00:11:09,610 --> 00:11:16,360 OK, now inside of categories, we created this category Typekit, whenever we are using it so far, 142 00:11:16,360 --> 00:11:17,770 so we need to change that. 143 00:11:18,100 --> 00:11:24,070 So instead of just displaying a text here, I want to display the different category items. 144 00:11:24,820 --> 00:11:32,830 Therefore, I'm going to create or used on for each category here, which will be nothing by default. 145 00:11:32,830 --> 00:11:39,250 So we'll do nothing by default, but we can override it and we need to pass the new manager to it so 146 00:11:39,250 --> 00:11:42,010 that we can get all both the categories. 147 00:11:42,430 --> 00:11:51,700 So now we can go ahead and get all categories and call them types items more like storing them in taps 148 00:11:51,700 --> 00:11:52,150 items. 149 00:11:52,750 --> 00:11:57,490 And now we can go ahead and create this column, which contains all of those lazy rows. 150 00:11:57,490 --> 00:11:59,440 So it's just going to be one column for now. 151 00:11:59,830 --> 00:12:02,980 But then later on, we're going to add more details in here. 152 00:12:02,980 --> 00:12:07,990 But for now, it's going to be this lazy row, my lazy row like we've seen before with lazy columns. 153 00:12:08,320 --> 00:12:10,750 Is it one that we can make scrollable? 154 00:12:11,200 --> 00:12:17,530 So let's go ahead and create a column here and it will have a lazy row in it, as I said. 155 00:12:18,130 --> 00:12:23,620 And now we can import the lazy row class in here. 156 00:12:23,650 --> 00:12:27,100 Well, doesn't want to import it otherwise. 157 00:12:27,170 --> 00:12:32,170 So now let's import the lazy roll and now we get the lazy list scope. 158 00:12:32,170 --> 00:12:39,040 So all of the items that are going to be in there and we can just go ahead and use those items to parse 159 00:12:39,050 --> 00:12:42,430 the tabs, items that size into it. 160 00:12:42,910 --> 00:12:49,240 So we're just going to say go through all of those items individually and get the category from that 161 00:12:49,240 --> 00:12:50,040 taps item. 162 00:12:50,050 --> 00:12:57,160 So category will be taps items and we're going to get it at the position of it. 163 00:12:58,180 --> 00:13:00,580 So it's going to use this taps item. 164 00:13:00,580 --> 00:13:03,430 It's going to get all categories that we have. 165 00:13:03,430 --> 00:13:10,120 So this get all category articles or all the card categories is not going to get called and it's going 166 00:13:10,120 --> 00:13:12,190 to give us a list of all of the categories. 167 00:13:13,240 --> 00:13:15,910 And now we are displaying those. 168 00:13:16,090 --> 00:13:23,590 OK, so I'm going to now create a category tab, which is this composable that we just created and I'm 169 00:13:23,590 --> 00:13:25,470 going to pass the category in it. 170 00:13:26,050 --> 00:13:31,540 And now I just need while I need to be more specific, I need to get the category name itself. 171 00:13:31,900 --> 00:13:32,860 So here you see. 172 00:13:33,250 --> 00:13:39,250 Like the category name like this and I'll put the on fetch category. 173 00:13:39,700 --> 00:13:46,600 That's where I'm going to pass that on for each category that is passed to this categories composable. 174 00:13:48,130 --> 00:13:54,820 All right, so now we can design this category, tap water pass, some more details to it, for example, 175 00:13:55,120 --> 00:13:56,140 is it selected or not? 176 00:13:56,140 --> 00:14:04,570 Because you see a category tab has the is selected value, then the category itself and the on for each 177 00:14:04,570 --> 00:14:05,200 category. 178 00:14:05,500 --> 00:14:09,430 And because we are using name parameters, we can just work with the order. 179 00:14:09,580 --> 00:14:10,330 We are happy with. 180 00:14:10,690 --> 00:14:14,110 So we could have also used the correct order that would have been fine as well. 181 00:14:14,470 --> 00:14:20,640 So we're going to set is selected to be news manager DOT selected category. 182 00:14:25,530 --> 00:14:30,240 OK, and then here we will need to set which item is selected. 183 00:14:30,900 --> 00:14:35,670 So what is the category that we have gotten from the news manager? 184 00:14:36,030 --> 00:14:39,990 But for that, we need to prepare our news manager to be ready for that. 185 00:14:40,500 --> 00:14:44,910 So let's jump over to our news manager and I have it open right here. 186 00:14:45,510 --> 00:14:51,500 OK, and here we need to add a property at the very top. 187 00:14:51,570 --> 00:14:57,510 Here we are getting the news response and here we can just go ahead and create a new valve, which will 188 00:14:57,510 --> 00:15:03,930 be the selected category, which will be a mutable state. 189 00:15:04,050 --> 00:15:08,550 So mutable state of type article category. 190 00:15:10,010 --> 00:15:10,490 Nullarbor. 191 00:15:10,700 --> 00:15:21,080 So it could be now, and it will be a mutable state off, so mutable state of which is all which we're 192 00:15:21,080 --> 00:15:22,280 passing null to. 193 00:15:23,570 --> 00:15:25,670 That's why it's fine if it's not another bill. 194 00:15:26,060 --> 00:15:31,610 So now we have the selected category and we can create a function in here, which will be triggered 195 00:15:31,610 --> 00:15:35,540 whenever we are changing the selected category. 196 00:15:35,870 --> 00:15:43,490 So there's a function going to be on selected category changed where we need to pass in the category, 197 00:15:44,150 --> 00:15:52,550 which will be of type string and then we can say what should happen once we selected the different category. 198 00:15:52,760 --> 00:15:56,770 So I'm just going to say that the new category should be the. 199 00:15:58,290 --> 00:16:06,570 Good article category with the category name, but we have asked, so here this category, so at this 200 00:16:06,570 --> 00:16:11,010 point, then the guy said this word so many times, so it really wears off. 201 00:16:11,400 --> 00:16:16,140 So I'm sorry for that, but it's just how it happens in programming sometimes, right? 202 00:16:16,680 --> 00:16:23,790 And then I can go ahead and set the selected categories of value because it's as you as you recall, 203 00:16:23,790 --> 00:16:24,750 it's a state, right? 204 00:16:25,200 --> 00:16:32,470 So we're using states in order to update our UI or the cool thing about states is when a date that data 205 00:16:32,490 --> 00:16:37,220 piece changes, then like every listener, so to speak, is updated. 206 00:16:37,230 --> 00:16:39,390 So in our case, the UI will be updated. 207 00:16:39,390 --> 00:16:44,520 And yeah, so here we can just say, OK, the selected category will be the new category. 208 00:16:45,030 --> 00:16:49,330 So this will be called whenever we're changing the current select, add the category. 209 00:16:49,410 --> 00:16:55,200 OK, so for example, when we're changing to entertainment, then well, this method will be called. 210 00:16:55,500 --> 00:17:01,380 It will set the new category, which will then internally modify the UM. 211 00:17:02,420 --> 00:17:09,510 I think here it will modify the category tab with the um. 212 00:17:10,230 --> 00:17:14,310 Yeah, I will notify it basically saying, OK, you are the one selected and stuff. 213 00:17:15,210 --> 00:17:17,730 OK, so then it will be selected and get the color. 214 00:17:17,880 --> 00:17:22,619 But the selected thing itself is not happening yet because in here in categories, we need to take care 215 00:17:22,619 --> 00:17:22,980 of that. 216 00:17:22,980 --> 00:17:23,900 So we need to. 217 00:17:24,540 --> 00:17:30,120 While we prepared our news manager now has this on select category changed and it has a selected category. 218 00:17:30,390 --> 00:17:34,580 So now we can use it and say so here, when is selected. 219 00:17:34,590 --> 00:17:39,660 So when this category tab is being selected, well, we're setting the value, whether it's selected 220 00:17:39,660 --> 00:17:47,340 based on the news manager's selected category value where we're comparing it to category. 221 00:17:48,030 --> 00:17:49,950 So this is a double equal sign. 222 00:17:49,950 --> 00:17:51,600 We're not setting it, we're comparing it to. 223 00:17:51,720 --> 00:17:56,940 That's really important because we're basically using an if statement because is selected is not holding 224 00:17:56,940 --> 00:17:59,640 a category and neither does it hold a string. 225 00:17:59,640 --> 00:18:01,950 It is holding a Boolean, as you see here. 226 00:18:02,310 --> 00:18:09,810 So if the category that we are getting here for the current tab is the same category as the one that 227 00:18:09,810 --> 00:18:15,750 is currently selected, the news manager, then the current category tab will be selected. 228 00:18:16,050 --> 00:18:20,100 But as we have multiple tabs, you can see only one of them will be selected. 229 00:18:20,370 --> 00:18:22,950 So it is quite complex code that we have built here. 230 00:18:22,950 --> 00:18:24,060 But what do we have select? 231 00:18:24,150 --> 00:18:31,410 Will create it this way is a very safe code, so it will just work automatically, so to speak. 232 00:18:31,410 --> 00:18:37,380 We don't need to manually said, OK, well, the one that we clicked on should now be selected, but 233 00:18:37,380 --> 00:18:42,510 we're just saying change to state for the one that is clicked on and then everything else will happen 234 00:18:42,720 --> 00:18:43,320 based on that. 235 00:18:45,890 --> 00:18:52,670 So now at this point, the news item needs to know about this change as well, because while we're getting 236 00:18:52,670 --> 00:18:58,580 an error here, because the categories here you see it doesn't know about any news manager that it could 237 00:18:58,580 --> 00:19:03,530 pass, for example, and it doesn't know anything about the on fetch category and stuff. 238 00:19:03,530 --> 00:19:08,960 Because if you look at our categories now, you see we need to pass on each category and we need to 239 00:19:08,960 --> 00:19:10,070 pass a news manager. 240 00:19:10,520 --> 00:19:11,690 So let's do just that. 241 00:19:12,020 --> 00:19:16,790 Therefore, we need to change what we are getting in the bottom navigation up here. 242 00:19:17,120 --> 00:19:21,530 So let's say we also want to have a news manager at this point. 243 00:19:22,690 --> 00:19:25,750 And then we can pass that news manager as the news manager here. 244 00:19:25,810 --> 00:19:31,120 So this will be our news manager and then we need to also say what should happen once we are fetching 245 00:19:31,120 --> 00:19:31,870 the category. 246 00:19:32,140 --> 00:19:40,240 And here I'm just going to use a lambda, which is going to go ahead and say, Well, call the news 247 00:19:40,240 --> 00:19:45,430 manager and it's on selected category changed to be it. 248 00:19:45,970 --> 00:19:48,760 And it is going to be the string that we're getting here. 249 00:19:48,760 --> 00:19:54,610 So on fetch Category C here gives us a string because, well, let's jump to on such Category C, we 250 00:19:54,610 --> 00:19:55,780 get a string from it. 251 00:19:56,260 --> 00:20:05,860 So once we are using it, once we are using or creating the categories to get the string and we are 252 00:20:05,860 --> 00:20:11,920 passing or using that string here, we're passing it to the on selected category changed, which needed 253 00:20:11,920 --> 00:20:13,330 the string, which is of Typekit. 254 00:20:13,330 --> 00:20:18,310 While we're just going to be called Category two, then change the selected value. 255 00:20:19,330 --> 00:20:22,600 So this is quite interconnected everything. 256 00:20:23,020 --> 00:20:29,980 And now obviously, we also need to make a change to our bottom navigation item that took care of the 257 00:20:29,980 --> 00:20:32,710 articles, and he will need to pass and use manager as well. 258 00:20:33,490 --> 00:20:39,970 So I'm just going to pass the news manager that we get to our navigation item itself. 259 00:20:39,970 --> 00:20:42,490 So the function navigation gets in use manager. 260 00:20:42,740 --> 00:20:48,460 We're basically creating a new use manager and we're passing that news manager to our bottom navigation. 261 00:20:48,760 --> 00:20:52,360 And at this point, we should be able to run this. 262 00:20:55,470 --> 00:20:56,430 So let's see. 263 00:20:58,780 --> 00:21:00,740 Let's go to categories, and there we are. 264 00:21:00,760 --> 00:21:03,910 So we have our list, but select one, you see now it's selected. 265 00:21:05,160 --> 00:21:09,870 OK, now science is selected now sports is selected and so forth, so based on that, we want to now 266 00:21:09,870 --> 00:21:14,430 display the right information and that's what we're going to set up in the next video. 267 00:21:14,970 --> 00:21:15,900 So see you there.