1 00:00:01,050 --> 00:00:04,140 ‫Let's add a new feature to our application 2 00:00:04,140 --> 00:00:07,045 ‫which is to allow users to sort the items 3 00:00:07,045 --> 00:00:10,169 ‫by three different criteria. 4 00:00:10,169 --> 00:00:14,490 ‫So basically we will build this select box criteria 5 00:00:14,490 --> 00:00:16,405 ‫and then from there the user can choose which 6 00:00:16,405 --> 00:00:20,040 ‫of these criteria they want to sort the list by. 7 00:00:20,040 --> 00:00:23,384 ‫So something that's very common in most web applications. 8 00:00:23,384 --> 00:00:27,753 ‫And so let's now build a very simple version of that. 9 00:00:28,751 --> 00:00:30,308 ‫So we will do this here 10 00:00:30,308 --> 00:00:32,349 ‫right in the packing list component, 11 00:00:32,349 --> 00:00:36,600 ‫because if we were to create a new component just for this, 12 00:00:36,600 --> 00:00:38,082 ‫then we would add a little bit 13 00:00:38,082 --> 00:00:41,747 ‫of extra work with lifting some more state up. 14 00:00:41,747 --> 00:00:43,999 ‫And I want to keep it simple here 15 00:00:43,999 --> 00:00:46,622 ‫and not to confuse you even further. 16 00:00:46,622 --> 00:00:50,670 ‫And so yeah, it's no problem to just do it right here 17 00:00:50,670 --> 00:00:54,777 ‫in the packing list right after this div right here. 18 00:00:54,777 --> 00:00:57,285 ‫Or actually let's do it right here 19 00:00:57,285 --> 00:00:59,935 ‫after this unordered list. 20 00:00:59,935 --> 00:01:02,851 ‫So let's create a div with the class name 21 00:01:02,851 --> 00:01:07,465 ‫that I already created called actions, 22 00:01:07,465 --> 00:01:10,861 ‫because here we will have that select element 23 00:01:10,861 --> 00:01:15,033 ‫and later also a button to clear the entire list. 24 00:01:16,710 --> 00:01:19,590 ‫So inside the select element, as always 25 00:01:19,590 --> 00:01:21,420 ‫we need the option element, 26 00:01:21,420 --> 00:01:23,717 ‫which should have different values. 27 00:01:23,717 --> 00:01:26,406 ‫And so then later based on these values here 28 00:01:26,406 --> 00:01:29,620 ‫we will calculate the ordered list. 29 00:01:29,620 --> 00:01:34,095 ‫So the first one is based on input. 30 00:01:34,095 --> 00:01:37,071 ‫And so these are just some strings that we are making 31 00:01:37,071 --> 00:01:38,650 ‫up here. 32 00:01:38,650 --> 00:01:41,604 ‫So input is basically by the input order. 33 00:01:41,604 --> 00:01:44,550 ‫Then well let's write that here first. 34 00:01:44,550 --> 00:01:49,121 ‫So sort by the input order. 35 00:01:49,121 --> 00:01:53,376 ‫So by the order in which these items were actually placed 36 00:01:53,376 --> 00:01:55,110 ‫into the list. 37 00:01:55,110 --> 00:01:58,113 ‫Next up we want to sort by description. 38 00:01:59,162 --> 00:02:03,990 ‫So sort by description. 39 00:02:03,990 --> 00:02:06,128 ‫So basically alphabetically. 40 00:02:06,128 --> 00:02:11,128 ‫And then finally, let's also do, which is very nice 41 00:02:11,190 --> 00:02:13,396 ‫by the packed status. 42 00:02:13,396 --> 00:02:18,167 ‫So sort by packed status. 43 00:02:20,359 --> 00:02:21,390 ‫Nice. 44 00:02:21,390 --> 00:02:22,418 ‫So there it is. 45 00:02:22,418 --> 00:02:23,494 ‫Looks great. 46 00:02:23,494 --> 00:02:28,494 ‫And so now let's see how we can actually implement this. 47 00:02:28,818 --> 00:02:31,578 ‫So first of all, of course we need to know 48 00:02:31,578 --> 00:02:35,880 ‫inside the component, so inside our React application, 49 00:02:35,880 --> 00:02:38,940 ‫what the currently selected element here is. 50 00:02:38,940 --> 00:02:42,300 ‫And so for that we will once again transform this here 51 00:02:42,300 --> 00:02:44,223 ‫into a controlled element. 52 00:02:45,169 --> 00:02:48,717 ‫So for that we need our three steps. 53 00:02:48,717 --> 00:02:52,153 ‫So first of all, we create a new piece of state. 54 00:02:52,153 --> 00:02:57,153 ‫Let's call this one sortBy and setSortBy, useState. 55 00:03:00,984 --> 00:03:04,911 ‫And now our default will be the very first one here. 56 00:03:04,911 --> 00:03:09,630 ‫So we want that by default, they are sorted by input. 57 00:03:09,630 --> 00:03:12,390 ‫And so this input here is exactly this string 58 00:03:12,390 --> 00:03:13,890 ‫that we defined here 59 00:03:13,890 --> 00:03:16,593 ‫but it could also be description or packed. 60 00:03:19,041 --> 00:03:24,041 ‫And so now let's use that state here as the value. 61 00:03:26,159 --> 00:03:27,693 ‫So sortBy. 62 00:03:29,001 --> 00:03:31,671 ‫And up here, I used packed instead 63 00:03:31,671 --> 00:03:35,480 ‫then we should already see that reflected in the UI. 64 00:03:35,480 --> 00:03:38,520 ‫So you see that here we now have, by default, 65 00:03:38,520 --> 00:03:40,200 ‫sort by packed status 66 00:03:40,200 --> 00:03:42,520 ‫because now I used this string. 67 00:03:42,520 --> 00:03:44,850 ‫Now React is complaining and that's 68 00:03:44,850 --> 00:03:47,379 ‫because we are missing the third part 69 00:03:47,379 --> 00:03:50,704 ‫which is to now attach the unchanged event tender 70 00:03:50,704 --> 00:03:53,439 ‫so that we can then set the date based 71 00:03:53,439 --> 00:03:56,271 ‫on whatever the user selected there. 72 00:03:56,271 --> 00:03:57,880 ‫So onChange 73 00:04:00,570 --> 00:04:04,260 ‫and this function here will automatically receive the event 74 00:04:04,260 --> 00:04:06,603 ‫and then we can setSortBy 75 00:04:08,627 --> 00:04:13,627 ‫by using event dot target dot value. 76 00:04:13,950 --> 00:04:16,470 ‫So at some point you will get really used 77 00:04:16,470 --> 00:04:17,303 ‫to writing this kind 78 00:04:17,303 --> 00:04:20,520 ‫of thing here and it will become second nature. 79 00:04:20,520 --> 00:04:23,330 ‫So this is like a recipe that we always need to follow 80 00:04:23,330 --> 00:04:27,609 ‫and it always works in the exact same way really. 81 00:04:27,609 --> 00:04:29,682 ‫So let's see. 82 00:04:29,682 --> 00:04:33,180 ‫And yeah, that works nice. 83 00:04:33,180 --> 00:04:37,183 ‫And if we check out our component here, then we, 84 00:04:39,270 --> 00:04:41,220 ‫first of all need more space, 85 00:04:41,220 --> 00:04:44,722 ‫and then you see down here, we now have the sorts by status 86 00:04:44,722 --> 00:04:48,297 ‫inside or state inside our component. 87 00:04:48,297 --> 00:04:49,497 ‫Great. 88 00:04:49,497 --> 00:04:51,684 ‫And so now we can work with this. 89 00:04:51,684 --> 00:04:53,918 ‫So how do we now get React? 90 00:04:53,918 --> 00:04:58,410 ‫So how do we get our application to display the items here 91 00:04:58,410 --> 00:05:01,977 ‫sorted by whatever criteria we selected? 92 00:05:01,977 --> 00:05:05,390 ‫Well, basically we will just create a new items 93 00:05:05,390 --> 00:05:09,243 ‫which is then sorted by that criteria. 94 00:05:09,243 --> 00:05:13,440 ‫So we are not going to manipulate the original items array. 95 00:05:13,440 --> 00:05:15,793 ‫That state should stay unchanged. 96 00:05:15,793 --> 00:05:19,346 ‫Instead, we will now use again, derived state 97 00:05:19,346 --> 00:05:23,943 ‫because sorting one array can of course be computed based 98 00:05:23,943 --> 00:05:25,830 ‫on that initial array. 99 00:05:25,830 --> 00:05:27,937 ‫That makes total sense, right? 100 00:05:27,937 --> 00:05:31,860 ‫So once again, we will not create a new state variable here 101 00:05:31,860 --> 00:05:34,320 ‫because that's totally unnecessary. 102 00:05:34,320 --> 00:05:36,505 ‫We will simply create a new variable, and here, 103 00:05:36,505 --> 00:05:38,793 ‫actually a let variable. 104 00:05:40,200 --> 00:05:44,310 ‫So sorted items and we're using a let 105 00:05:44,310 --> 00:05:45,666 ‫so that now we can simply do a couple 106 00:05:45,666 --> 00:05:47,943 ‫of simple if statements. 107 00:05:48,810 --> 00:05:53,810 ‫So if sortBy is equal to input, then this is the default, 108 00:05:54,630 --> 00:05:55,463 ‫right? 109 00:05:55,463 --> 00:05:56,645 ‫And so then in this case, 110 00:05:56,645 --> 00:06:00,886 ‫we can simply say that sorted items should be just equal 111 00:06:00,886 --> 00:06:03,662 ‫to the original items. 112 00:06:03,662 --> 00:06:05,608 ‫So this is wrong here of course. 113 00:06:05,608 --> 00:06:07,105 ‫So again, in this case, 114 00:06:07,105 --> 00:06:11,920 ‫the sorted items are just equal to the items themselves. 115 00:06:11,920 --> 00:06:14,578 ‫So the ones that we receive as a prop here. 116 00:06:14,578 --> 00:06:17,190 ‫And so now of course in the end, 117 00:06:17,190 --> 00:06:21,866 ‫we need to use these sorted items and that's right here. 118 00:06:21,866 --> 00:06:23,200 ‫So from now on, 119 00:06:23,200 --> 00:06:26,340 ‫instead of rendering the original items array 120 00:06:26,340 --> 00:06:29,253 ‫we will always render the sorted items. 121 00:06:31,161 --> 00:06:32,823 ‫All right. 122 00:06:33,780 --> 00:06:38,780 ‫And let's just put some here, socks, a charger. 123 00:06:40,560 --> 00:06:42,513 ‫So these are quite easy to write. 124 00:06:44,724 --> 00:06:47,850 ‫Yeah, right now only this one here works. 125 00:06:47,850 --> 00:06:49,140 ‫So if I do this now, 126 00:06:49,140 --> 00:06:52,710 ‫then we get an error because sorted items is then just 127 00:06:52,710 --> 00:06:56,310 ‫this empty variable that React doesn't know how to render. 128 00:06:56,310 --> 00:07:00,450 ‫So well now I will have to write everything again here. 129 00:07:00,450 --> 00:07:04,140 ‫So socks, a shirt, and a charger. 130 00:07:04,140 --> 00:07:08,833 ‫All right, and now let's write one if 131 00:07:08,833 --> 00:07:10,623 ‫for the other two cases. 132 00:07:11,517 --> 00:07:16,517 ‫So if or sort by change is, that's a description, 133 00:07:19,770 --> 00:07:24,243 ‫then we will want to sort our items actually. 134 00:07:25,140 --> 00:07:28,743 ‫So sortedItems will then become items. 135 00:07:29,760 --> 00:07:31,860 ‫And now first we use slice. 136 00:07:31,860 --> 00:07:34,380 ‫Because with this we basically take a copy 137 00:07:34,380 --> 00:07:36,720 ‫of the array and that's very important 138 00:07:36,720 --> 00:07:39,642 ‫because the sort method is a mutating method. 139 00:07:39,642 --> 00:07:41,370 ‫And so if we didn't do this 140 00:07:41,370 --> 00:07:45,090 ‫then the items would actually get sorted as well. 141 00:07:45,090 --> 00:07:46,350 ‫So we don't want that. 142 00:07:46,350 --> 00:07:51,270 ‫So we use slice dot sort. 143 00:07:51,270 --> 00:07:54,270 ‫And now here I will just write the code because again, 144 00:07:54,270 --> 00:07:57,028 ‫I already explained exactly how this method works 145 00:07:57,028 --> 00:07:59,861 ‫in the review of JavaScript section. 146 00:07:59,861 --> 00:08:03,840 ‫Now in this case, since we want to sort alphabetically, 147 00:08:03,840 --> 00:08:07,346 ‫we can use the localCompare method. 148 00:08:07,346 --> 00:08:11,910 ‫So we want to take a, which is basically one object 149 00:08:11,910 --> 00:08:15,630 ‫of the array, and then we want to take the description 150 00:08:15,630 --> 00:08:20,630 ‫of that, which is one of the properties of each object. 151 00:08:20,790 --> 00:08:24,967 ‫And then since this is a string, we can call localCompare. 152 00:08:27,016 --> 00:08:30,120 ‫And then here we simply pass in another string 153 00:08:30,120 --> 00:08:33,093 ‫which is b dot description. 154 00:08:34,440 --> 00:08:35,273 ‫All right. 155 00:08:35,273 --> 00:08:39,379 ‫So this is going to work, hopefully at least. 156 00:08:39,379 --> 00:08:44,379 ‫And then finally, let's also add the code for our last case 157 00:08:45,402 --> 00:08:47,962 ‫which is by packed. 158 00:08:47,962 --> 00:08:50,970 ‫And so something very similar here 159 00:08:50,970 --> 00:08:54,610 ‫sortedItems is going to be equal to items 160 00:08:55,445 --> 00:08:58,527 ‫Taking a copy dot sort . 161 00:08:59,485 --> 00:09:03,878 ‫And then a and b which are basically two objects 162 00:09:03,878 --> 00:09:06,477 ‫of the array which are being compared. 163 00:09:06,477 --> 00:09:10,440 ‫And then since we want to order by the packed status 164 00:09:10,440 --> 00:09:11,829 ‫which is a bullion, 165 00:09:11,829 --> 00:09:14,730 ‫we need to first convert that to a number. 166 00:09:14,730 --> 00:09:19,730 ‫So a dot packed minus number b dot packed, 167 00:09:22,410 --> 00:09:23,670 ‫and that's it. 168 00:09:23,670 --> 00:09:25,775 ‫So let's try this out. 169 00:09:25,775 --> 00:09:29,048 ‫So by description, you see that now it's alphabetically 170 00:09:29,048 --> 00:09:31,915 ‫so C, S, S, 171 00:09:31,915 --> 00:09:34,710 ‫and then finally by the packed status. 172 00:09:34,710 --> 00:09:37,770 ‫So right now all of them are unpacked. 173 00:09:37,770 --> 00:09:40,983 ‫So let's click, and you see that then it moves to the end. 174 00:09:42,243 --> 00:09:43,980 ‫And the same thing right here. 175 00:09:43,980 --> 00:09:47,538 ‫Then if I remove it, it will move back here. 176 00:09:47,538 --> 00:09:49,130 ‫Great. 177 00:09:49,130 --> 00:09:51,540 ‫And of course we also have our default 178 00:09:51,540 --> 00:09:52,618 ‫which is the input order, 179 00:09:52,618 --> 00:09:56,537 ‫which is also the same that happens whenever we are 180 00:09:56,537 --> 00:10:00,392 ‫in the packed status and we have none of them packed in. 181 00:10:00,392 --> 00:10:01,310 ‫Great. 182 00:10:01,310 --> 00:10:03,985 ‫So that's just amazing. 183 00:10:03,985 --> 00:10:06,586 ‫We just implemented this simple feature 184 00:10:06,586 --> 00:10:09,279 ‫but also a very common feature simply 185 00:10:09,279 --> 00:10:12,386 ‫by using the power of derived state. 186 00:10:12,386 --> 00:10:15,573 ‫So again, we didn't create any new piece 187 00:10:15,573 --> 00:10:18,300 ‫of state for the sorted items. 188 00:10:18,300 --> 00:10:21,292 ‫The only state that we need is the sortBy state. 189 00:10:21,292 --> 00:10:24,925 ‫So that React actually has at all times the value 190 00:10:24,925 --> 00:10:27,330 ‫of this input field right here. 191 00:10:27,330 --> 00:10:30,930 ‫And then based on that, we simply create this derived state 192 00:10:30,930 --> 00:10:32,640 ‫of sorted items, which then 193 00:10:32,640 --> 00:10:36,787 ‫in the end is what we render onto the user interface. 194 00:10:36,787 --> 00:10:38,954 ‫And with this, the only thing that we have left 195 00:10:38,954 --> 00:10:43,080 ‫to do is to add this button here to clear the list. 196 00:10:43,080 --> 00:10:45,873 ‫And so that's the task of the next video.