1 00:00:01,140 --> 00:00:02,760 ‫Let's start this lecture 2 00:00:02,760 --> 00:00:06,120 ‫by taking a look at our project requirements 3 00:00:06,120 --> 00:00:09,723 ‫to see what we actually already implemented. 4 00:00:11,400 --> 00:00:14,580 ‫So, up until this point, actually all we did 5 00:00:14,580 --> 00:00:18,420 ‫was to load the menu from the API. 6 00:00:18,420 --> 00:00:21,150 ‫So, that's really the only thing here. 7 00:00:21,150 --> 00:00:25,380 ‫But since we are now loading data from API, 8 00:00:25,380 --> 00:00:28,440 ‫let's also load individual orders. 9 00:00:28,440 --> 00:00:31,140 ‫So, basically so that we can implement 10 00:00:31,140 --> 00:00:34,200 ‫this other feature here where a user can 11 00:00:34,200 --> 00:00:39,180 ‫look up their order based on the ID of that order. 12 00:00:39,180 --> 00:00:41,700 ‫So, we cannot create orders yet, 13 00:00:41,700 --> 00:00:44,914 ‫but we can already use some dummy IDs 14 00:00:44,914 --> 00:00:48,870 ‫to look up orders that had been placed before. 15 00:00:48,870 --> 00:00:52,413 ‫And so, let's now implement that functionality. 16 00:00:53,850 --> 00:00:57,390 ‫So, basically, now we are going to work on this 17 00:00:57,390 --> 00:01:00,783 ‫route right here and on this order page. 18 00:01:01,950 --> 00:01:05,970 ‫So, actually, right now, if we go to /order 19 00:01:05,970 --> 00:01:09,630 ‫and then slash something here, we will actually 20 00:01:09,630 --> 00:01:13,950 ‫already get one dummy order right here. 21 00:01:13,950 --> 00:01:18,950 ‫So, if we take a look at our order component here, 22 00:01:20,760 --> 00:01:22,980 ‫so, we see that we then have 23 00:01:22,980 --> 00:01:26,370 ‫this fake order here, basically. 24 00:01:26,370 --> 00:01:29,700 ‫So, this order object right here is what 25 00:01:29,700 --> 00:01:32,790 ‫right now is being displayed over here. 26 00:01:32,790 --> 00:01:35,130 ‫But, of course, what we want to do next 27 00:01:35,130 --> 00:01:37,020 ‫is to make this dynamic. 28 00:01:37,020 --> 00:01:40,080 ‫So, we want to read the order ID here 29 00:01:40,080 --> 00:01:43,048 ‫from the URL and then display all the data 30 00:01:43,048 --> 00:01:47,670 ‫regarding this exact order here on our page. 31 00:01:47,670 --> 00:01:51,093 ‫And so, that's what we will implement now. 32 00:01:52,020 --> 00:01:54,840 ‫So, the first thing that we need to do is 33 00:01:54,840 --> 00:01:57,570 ‫to implement a way in which we can actually 34 00:01:57,570 --> 00:02:00,224 ‫search for the order, so in which we can 35 00:02:00,224 --> 00:02:04,650 ‫input the order ID into our application. 36 00:02:04,650 --> 00:02:06,839 ‫So, basically, we want a search field 37 00:02:06,839 --> 00:02:10,050 ‫right here in the header so that we can 38 00:02:10,050 --> 00:02:14,013 ‫always access the search functionality from everywhere. 39 00:02:15,480 --> 00:02:18,390 ‫So, let's then create a new component. 40 00:02:18,390 --> 00:02:21,300 ‫And, since this component is gonna be related 41 00:02:21,300 --> 00:02:24,030 ‫to searching a new order, it is, 42 00:02:24,030 --> 00:02:27,930 ‫of course, part here of the order feature. 43 00:02:27,930 --> 00:02:30,046 ‫And so, let's create that component 44 00:02:30,046 --> 00:02:32,643 ‫right here in this folder. 45 00:02:33,960 --> 00:02:35,640 ‫So, let's say, "SearchOrder.JSX," 46 00:02:40,590 --> 00:02:45,590 ‫and then, here, let's just return an input. 47 00:02:49,140 --> 00:02:54,133 ‫So, the placeholder should be "Search order #". 48 00:02:55,800 --> 00:03:00,800 ‫Then, let's make this actually a controlled element. 49 00:03:01,470 --> 00:03:04,413 ‫So, that means that we need some state now. 50 00:03:05,340 --> 00:03:08,433 ‫So, let's call it query, and setQuery, 51 00:03:10,048 --> 00:03:10,881 ‫useState with an empty string. 52 00:03:15,690 --> 00:03:19,140 ‫So, this is something we have done many, many times, 53 00:03:19,140 --> 00:03:22,983 ‫so we already know really well how this works, 54 00:03:24,390 --> 00:03:27,753 ‫so this requires no explanation anymore. 55 00:03:29,400 --> 00:03:33,420 ‫So, here when we change then the text 56 00:03:33,420 --> 00:03:37,553 ‫we will update the query with e.target.value. 57 00:03:40,650 --> 00:03:41,763 ‫All right. 58 00:03:43,920 --> 00:03:47,220 ‫And now, in order to actually automatically 59 00:03:47,220 --> 00:03:52,220 ‫submit this input field, let's wrap it into a form. 60 00:03:55,521 --> 00:03:57,480 ‫So, that's a nice trick with which 61 00:03:57,480 --> 00:04:01,650 ‫we can basically automatically submit this input value 62 00:04:01,650 --> 00:04:04,353 ‫here simply by hitting the enter key. 63 00:04:05,700 --> 00:04:08,340 ‫So, let's then used onSubmit here 64 00:04:08,340 --> 00:04:12,723 ‫and create, as always, a handleSubmit function. 65 00:04:17,430 --> 00:04:20,850 ‫So, this then needs to receive the event 66 00:04:20,850 --> 00:04:25,470 ‫so that we can do event.preventDefault 67 00:04:25,470 --> 00:04:27,630 ‫because otherwise this will then create 68 00:04:27,630 --> 00:04:30,750 ‫a new navigation which we do not want 69 00:04:30,750 --> 00:04:33,243 ‫in a single page application like this. 70 00:04:35,280 --> 00:04:37,890 ‫All right, now we are not done yet, 71 00:04:37,890 --> 00:04:42,363 ‫but I still want to already include this here. 72 00:04:44,340 --> 00:04:49,340 ‫So, SearchOrder, and here it is. 73 00:04:51,930 --> 00:04:55,860 ‫All right, so what do we want to happen here 74 00:04:55,860 --> 00:05:00,330 ‫whenever we type something and then hit enter? 75 00:05:00,330 --> 00:05:04,110 ‫Well, we will want to move to this page right here. 76 00:05:04,110 --> 00:05:08,460 ‫So /order/, and then whatever we type here, 77 00:05:08,460 --> 00:05:10,833 ‫because here we will have the ID. 78 00:05:12,930 --> 00:05:17,930 ‫Now, first of all, if there is no query, then just return. 79 00:05:18,960 --> 00:05:21,180 ‫But otherwise, what we want to do 80 00:05:21,180 --> 00:05:23,970 ‫is to then navigate to that page. 81 00:05:23,970 --> 00:05:27,933 ‫So, for that, we again need the navigate function. 82 00:05:29,010 --> 00:05:33,420 ‫So, just like we learned before in a previous project. 83 00:05:33,420 --> 00:05:36,720 ‫So, for that, we use the useNavigate hook 84 00:05:36,720 --> 00:05:40,490 ‫and then here we can call navigate to 85 00:05:40,490 --> 00:05:45,490 ‫/order/ and then the query. 86 00:05:47,280 --> 00:05:51,780 ‫And then, finally, let's set the query back to empty. 87 00:05:51,780 --> 00:05:54,870 ‫And this should be all we need. 88 00:05:54,870 --> 00:05:58,200 ‫So, let's come back here, let's try something. 89 00:05:58,200 --> 00:05:59,940 ‫Then, I will hit the return or 90 00:05:59,940 --> 00:06:03,630 ‫the enter key... and beautiful. 91 00:06:03,630 --> 00:06:07,110 ‫So, here we have now order/ this ID, 92 00:06:07,110 --> 00:06:11,040 ‫but of course, this here is still the dummy data. 93 00:06:11,040 --> 00:06:13,770 ‫So, next up what we need to do is to then 94 00:06:13,770 --> 00:06:17,160 ‫actually fetch the data from the API. 95 00:06:17,160 --> 00:06:22,160 ‫So, using this getOrder function that we already have 96 00:06:22,710 --> 00:06:27,063 ‫which will receive exactly that ID right there. 97 00:06:29,130 --> 00:06:32,610 ‫Okay, so this one is finished. 98 00:06:32,610 --> 00:06:36,060 ‫And so, let's now work here on the order. 99 00:06:36,060 --> 00:06:38,940 ‫And so, the way we will do this is exactly 100 00:06:38,940 --> 00:06:42,060 ‫the same way as we did with the menu. 101 00:06:42,060 --> 00:06:46,020 ‫So, first of all, we create our loader function. 102 00:06:46,020 --> 00:06:49,980 ‫So, we will do that again right here inside the component. 103 00:06:49,980 --> 00:06:52,500 ‫Then, we will connect the loader function 104 00:06:52,500 --> 00:06:55,860 ‫with the route definition right here, 105 00:06:55,860 --> 00:06:58,830 ‫and then, in the page component itself, 106 00:06:58,830 --> 00:07:01,953 ‫so inside the order, we will get that data. 107 00:07:02,850 --> 00:07:06,120 ‫All right. And we could even define 108 00:07:06,120 --> 00:07:08,970 ‫the loader function, of course, right here. 109 00:07:08,970 --> 00:07:12,510 ‫So you wouldn't have to place it inside this file, 110 00:07:12,510 --> 00:07:16,143 ‫but it's a bit of a convention to do so. 111 00:07:18,150 --> 00:07:23,150 ‫So, let's do export the async function called loader. 112 00:07:26,010 --> 00:07:30,240 ‫And then, here, what we want to do is to get the order. 113 00:07:33,240 --> 00:07:38,240 ‫So we do await getOrder, but now remember 114 00:07:38,310 --> 00:07:41,310 ‫that this needs to receive the ID. 115 00:07:41,310 --> 00:07:43,560 ‫So, how do we get the ID from the 116 00:07:43,560 --> 00:07:47,100 ‫URL right into this function? 117 00:07:47,100 --> 00:07:51,467 ‫Well, we previously used the useParams hook, right? 118 00:07:52,689 --> 00:07:57,570 ‫So something like this. However, since this is a hook 119 00:07:57,570 --> 00:08:00,150 ‫it only works inside components. 120 00:08:00,150 --> 00:08:02,493 ‫It doesn't work in regular functions. 121 00:08:03,750 --> 00:08:07,860 ‫So, let's remove that, and also from here, 122 00:08:07,860 --> 00:08:09,333 ‫since we don't need that. 123 00:08:10,380 --> 00:08:13,800 ‫But, luckily for us, React Router has, of course, 124 00:08:13,800 --> 00:08:17,370 ‫thought of the situation, and therefore it passes 125 00:08:17,370 --> 00:08:21,270 ‫in some data into the loader function as it calls it, 126 00:08:21,270 --> 00:08:24,900 ‫and one of the properties of the object that 127 00:08:24,900 --> 00:08:29,103 ‫the loader function receives is exactly the params. 128 00:08:30,240 --> 00:08:33,240 ‫So, we de-structure that object here 129 00:08:33,240 --> 00:08:34,653 ‫and get out the params. 130 00:08:36,510 --> 00:08:40,390 ‫And so, here, we then get params.orderId 131 00:08:41,700 --> 00:08:44,340 ‫and it is called orderId because that is 132 00:08:44,340 --> 00:08:47,190 ‫exactly the name that we gave it here. 133 00:08:47,190 --> 00:08:52,190 ‫So, this is the name of our param, right? 134 00:08:52,500 --> 00:08:56,673 ‫So, getOrder... apparently we didn't import that. 135 00:08:58,170 --> 00:09:00,540 ‫And now, all we need to do is to 136 00:09:00,540 --> 00:09:04,410 ‫really return something from the loader function. 137 00:09:04,410 --> 00:09:08,793 ‫And then, let's connect the two. 138 00:09:11,670 --> 00:09:14,460 ‫So, we use loader, but first of all, 139 00:09:14,460 --> 00:09:17,700 ‫we need to, of course, import that here. 140 00:09:17,700 --> 00:09:22,700 ‫So, right here, loader as orderLoader. 141 00:09:26,070 --> 00:09:27,933 ‫So, that's a bit of a funny name. 142 00:09:29,310 --> 00:09:33,130 ‫But anyway, let's now connect that here 143 00:09:36,093 --> 00:09:40,050 ‫and immediately, we get some error here. 144 00:09:40,050 --> 00:09:42,690 ‫So, couldn't find order with this ID 145 00:09:42,690 --> 00:09:45,450 ‫which is already nice, I guess. 146 00:09:45,450 --> 00:09:48,660 ‫So, something is already working, but of course, 147 00:09:48,660 --> 00:09:53,040 ‫we, again, want to see this error inside the actual layout. 148 00:09:53,040 --> 00:09:56,260 ‫So, let's again grab this error element here 149 00:09:57,570 --> 00:10:00,420 ‫and paste that right here. 150 00:10:00,420 --> 00:10:03,003 ‫And so, this is a lot nicer. 151 00:10:05,730 --> 00:10:07,800 ‫Now, let's come here to this order 152 00:10:07,800 --> 00:10:11,280 ‫because here, actually, I have a test ID. 153 00:10:11,280 --> 00:10:14,670 ‫So, let's grab that and paste that here. 154 00:10:14,670 --> 00:10:17,220 ‫Or, of course, we could also write it there. 155 00:10:17,220 --> 00:10:19,380 ‫That would be the exact same thing. 156 00:10:19,380 --> 00:10:22,470 ‫And now, we do not get an error anymore, 157 00:10:22,470 --> 00:10:24,360 ‫meaning that something worked. 158 00:10:24,360 --> 00:10:28,350 ‫But still, we have this fake order right here 159 00:10:28,350 --> 00:10:31,293 ‫because that's still the one that we are using. 160 00:10:32,640 --> 00:10:35,220 ‫So, this order object that we had right there. 161 00:10:35,220 --> 00:10:36,690 ‫And so, now, as a third step, 162 00:10:36,690 --> 00:10:39,480 ‫we need to get the data from the loader. 163 00:10:39,480 --> 00:10:43,773 ‫And so, just like before, let's actually do this here. 164 00:10:47,790 --> 00:10:49,780 ‫So, let's do useLoaderData. 165 00:10:53,460 --> 00:10:56,253 ‫And so, this is now the new order, 166 00:10:57,180 --> 00:10:59,883 ‫so we can delete this one here. 167 00:11:04,230 --> 00:11:06,930 ‫All right. But what matters is that now 168 00:11:06,930 --> 00:11:11,130 ‫we are actually getting this data from the API. 169 00:11:11,130 --> 00:11:14,280 ‫So, this is now the actual fetched data, 170 00:11:14,280 --> 00:11:18,270 ‫and we can confirm this if we use another ID here. 171 00:11:18,270 --> 00:11:21,047 ‫So, let's use CQE92U, then hit enter. 172 00:11:25,560 --> 00:11:29,040 ‫And now, indeed, the data has changed here. 173 00:11:29,040 --> 00:11:32,760 ‫And maybe you noticed that actually we also had 174 00:11:32,760 --> 00:11:37,760 ‫our loading indicator automatically working up here, right? 175 00:11:37,860 --> 00:11:39,603 ‫So, let's try that again. 176 00:11:41,100 --> 00:11:43,380 ‫So, let's copy again this one, and then 177 00:11:43,380 --> 00:11:45,720 ‫you will notice that we automatically 178 00:11:45,720 --> 00:11:48,420 ‫get the loading indicator right up there. 179 00:11:48,420 --> 00:11:52,500 ‫And then, once that is done, the data here will change. 180 00:11:52,500 --> 00:11:53,673 ‫So, let's try that. 181 00:11:57,090 --> 00:11:59,610 ‫So, sometimes, this API will take some time 182 00:11:59,610 --> 00:12:03,030 ‫to fetch the data. That's completely normal. 183 00:12:03,030 --> 00:12:05,700 ‫But now, here it is, and it is, indeed, 184 00:12:05,700 --> 00:12:08,190 ‫really nice that we automatically 185 00:12:08,190 --> 00:12:12,330 ‫get that loading indicator right there, 186 00:12:12,330 --> 00:12:15,570 ‫which is because of the reason that I mentioned earlier, 187 00:12:15,570 --> 00:12:18,930 ‫which is the fact that this navigation state here 188 00:12:18,930 --> 00:12:23,050 ‫really is universal for the entire application. 189 00:12:23,050 --> 00:12:26,040 ‫So, that's the whole reason why we placed this 190 00:12:26,040 --> 00:12:29,850 ‫loading indicator in the app layout in the first place, 191 00:12:29,850 --> 00:12:33,420 ‫because this will then render our loader 192 00:12:33,420 --> 00:12:37,323 ‫each time that somewhere in the app something is loading.