WEBVTT 00:00.000 --> 00:00.270 Okay. 00:00.300 --> 00:02.520 Our next task is to deal with the product details. 00:02.520 --> 00:07.680 So when we click on this view button, we get taken to the product page for whichever product it is 00:07.680 --> 00:09.570 that we have just clicked on. 00:09.570 --> 00:14.940 So first of all, let's add a link so that when we do click on this view button, then we get taken 00:14.940 --> 00:16.350 to the product details page. 00:16.350 --> 00:19.620 And we're going to do that in our product details card. 00:19.650 --> 00:23.970 So let's open up the product card dot TSX. 00:23.970 --> 00:31.950 And inside the actions the card actions where we've got our button to view the components. 00:31.980 --> 00:38.400 Let's turn this button into a link component that we get from React Router Dom. 00:38.400 --> 00:44.130 And it's not coming up on the intellisense, but I'm pretty sure that we can use the component property 00:44.130 --> 00:46.410 inside a material UI button. 00:46.410 --> 00:49.710 And we want this to function as a link. 00:49.710 --> 00:52.650 So I'm going to specify a link from React Router Dom. 00:52.650 --> 00:54.180 And we get the warning here. 00:54.180 --> 00:59.190 Because when we do use a link we are required to supply the two property. 00:59.190 --> 01:05.010 And if we take a look at the giant TypeScript warning for this, and these are pretty nasty. 01:05.040 --> 01:11.370 These ones that we do get from material UI and it's telling us the property component does not exist 01:11.400 --> 01:12.750 on this. 01:12.750 --> 01:14.910 I remain unconvinced about that. 01:14.910 --> 01:19.170 I think it does, and I'm pretty sure the warning we're getting here is because I haven't supplied the 01:19.170 --> 01:20.610 two property yet. 01:20.610 --> 01:24.720 And sure enough, as soon as I do supply this, the TypeScript warning has gone away. 01:24.720 --> 01:30.960 So a bit weird that one, because we can use this, although it doesn't seem to acknowledge the fact 01:30.960 --> 01:32.280 that we can use it. 01:32.280 --> 01:33.930 So we'll see anyway. 01:33.930 --> 01:42.030 And what we want to do here is we need to go to the catalog forward slash product ID is going to be 01:42.030 --> 01:48.750 the route we're going to now in order to use or in order to concatenate some JavaScript effectively 01:48.780 --> 01:55.080 onto a string, we can use the Backticks not normal apostrophes here, use Backticks. 01:55.080 --> 02:01.330 And then we specify a forward slash catalog forward slash, and then to use JavaScript code inside Here 02:01.330 --> 02:04.210 we specify dollar, then open curly brackets. 02:04.210 --> 02:10.150 And now we can specify the product ID as to where we're going to go to when we click on the button. 02:10.570 --> 02:14.290 So if we go across to the browser and test this functionality. 02:14.290 --> 02:17.050 And by the way I did have it on dark mode I believe. 02:17.080 --> 02:22.420 But because the components refreshed, we go back to its default value which is light mode. 02:22.420 --> 02:27.430 And a bit later I'll show you how we can persist that, but we're not going to get to that until we 02:27.430 --> 02:32.710 start looking at state management, where we can track state across multiple components. 02:32.740 --> 02:36.790 So for the time being, every time we refresh, it's going to go back to its default. 02:36.790 --> 02:38.890 But you can set that in the app component if you wish. 02:38.890 --> 02:44.890 If you prefer to stick with dark mode, you can always change the false property to true so that you 02:44.920 --> 02:48.100 start on dark mode even after refreshing. 02:48.130 --> 02:52.690 I'm not particularly bothered about it, so I'm just going to keep it as it is for the time being. 02:52.690 --> 02:56.200 So I'm going to click on view and notice the URL at the top. 02:56.200 --> 03:01.240 I've gone to catalog two when I clicked on products with the ID of two, and if I click on the third 03:01.250 --> 03:01.730 one. 03:01.730 --> 03:04.640 Then I go to Catalog Forward slash three. 03:04.670 --> 03:05.330 Great. 03:05.330 --> 03:06.200 So far so good. 03:06.230 --> 03:11.480 But obviously we want the product details for a specific product that we've just clicked on. 03:11.480 --> 03:13.400 So let's see how we can achieve that. 03:13.400 --> 03:17.690 And to do that we need to go to our product details component. 03:17.690 --> 03:19.280 So let's open that. 03:19.280 --> 03:25.010 And what we can use here is we need to get the route parameter that matches the ID. 03:25.010 --> 03:33.140 So inside the product details just before the return statement, let's use a hook that we get from React 03:33.140 --> 03:33.980 Router Dom. 03:33.980 --> 03:36.710 Now the hook is called use params. 03:36.710 --> 03:40.100 And what this gives us access to. 03:40.130 --> 03:45.800 It's an object of key value pairs of the dynamic params from the current URL that were matched by the 03:45.800 --> 03:47.300 route path. 03:47.630 --> 03:49.520 So we're interested. 03:49.520 --> 03:52.280 And the route path if we go back to our routes. 03:52.310 --> 03:54.650 We're interested in this. 03:54.650 --> 04:02.980 The ID that we provided when we set up our product details route inside there so we can specify that 04:02.980 --> 04:06.700 we want to get the id from use params. 04:06.730 --> 04:12.430 Now we're going to store the product inside state inside this component. 04:12.550 --> 04:17.740 So I'm also going to set up the states inside here I'm going to say const product in square brackets. 04:17.740 --> 04:21.370 And set product equals use state. 04:21.610 --> 04:26.770 As we're going to go out and make a fetch request to our API to go and get the individual products that 04:26.770 --> 04:28.210 matches this ID. 04:28.750 --> 04:31.240 Now for our use states, let's give it a type. 04:31.240 --> 04:36.070 And we're going to say that this could be or is a type of product. 04:36.460 --> 04:43.360 But we cannot guarantee that our API is going to return us a product at the stage. 04:43.360 --> 04:47.230 We're writing this code, so we don't know if that product is going to exist. 04:47.230 --> 04:54.820 So we'll specify inside here this is referred to as a union type where it can be one type of thing or 04:54.820 --> 04:56.230 it can be another type of thing. 04:56.230 --> 05:01.910 So I'm going to specify products at the pipe and then say it could be the product or it could be null. 05:01.910 --> 05:03.830 We just don't know at this stage. 05:03.830 --> 05:09.350 And well, at this stage, before the component has fetched the data, then the product is definitely 05:09.350 --> 05:10.760 going to be null. 05:10.760 --> 05:13.910 So we'll give that its initial value as well. 05:14.570 --> 05:19.310 Now we've used it before and we'll use it again when this component mounts. 05:19.370 --> 05:21.230 Then we're going to use a side effect. 05:21.230 --> 05:24.650 And the side effect we're going to use is the use effect. 05:24.980 --> 05:32.660 And as before we're going to add the callback function inside here and as before so that this doesn't 05:32.660 --> 05:39.590 continuously execute every time our component rerenders we give it its dependencies. 05:39.590 --> 05:41.840 So we'll add the dependency array. 05:41.840 --> 05:46.340 And inside here once again we'll make use of the JavaScript fetch for now. 05:46.370 --> 05:50.960 Not my favorite tool, but it does work and it will do the job that we need it to do. 05:50.960 --> 05:53.750 So we're going to say fetch and then specify the URL. 05:53.750 --> 05:56.390 And I'll just continue to hard code this in for the time being. 05:56.390 --> 05:59.540 Not best practice list by the way, but we will adjust it soon. 05:59.720 --> 06:02.760 I'm really just using this approach for convenience right now. 06:02.760 --> 06:12.390 And we'll specify localhost 5001 forward slash API, forward slash products forward slash and then dollar 06:12.960 --> 06:13.560 ID. 06:13.590 --> 06:21.450 So please make sure you're using Backticks here so that we can specify the id parameter inside there 06:21.450 --> 06:24.840 and concatenate it onto the URL. 06:25.110 --> 06:28.980 So because this is a fetch we need to use Len because this returns a promise to us. 06:28.980 --> 06:30.060 And we'll get the response. 06:30.060 --> 06:35.160 And then the first Len we need to say response goes to response dot JSON. 06:35.160 --> 06:37.560 And then we can use the second Len. 06:37.560 --> 06:40.860 And at this point we get our data back from the API. 06:40.890 --> 06:46.470 So I'm going to specify or we get the data outside of the JSON response that we're using in the previous 06:46.470 --> 06:47.370 line of code. 06:47.370 --> 06:53.520 And we'll specify set products and set it to be product or data as I've called it there. 06:53.520 --> 06:55.860 So that's going to be data I should say. 06:55.860 --> 07:00.060 And we'll also do a tiny bit of error handling at this point. 07:00.060 --> 07:01.440 And we'll use the catch. 07:01.440 --> 07:09.340 So if something goes wrong and we do not get a 200 type response back from our API server, then we 07:09.340 --> 07:13.750 can catch the error in this line of code and do something with the error. 07:13.780 --> 07:16.510 So I'm going to specify the error if we have one. 07:16.510 --> 07:20.320 And all I'm going to do for the time being is just console dot log the error. 07:20.350 --> 07:23.860 We'll take a look at error handling in a bit more depth a bit later. 07:23.860 --> 07:28.360 But if we do get an error from the API, then we're just going to log it out to the console. 07:28.570 --> 07:31.090 And that's our Chrome Developer Tools console. 07:31.090 --> 07:34.330 So we can go and take a look at that to see what the problem was. 07:34.360 --> 07:36.520 Now we've got a warning here. 07:36.520 --> 07:38.170 And this is coming from our linter. 07:38.170 --> 07:41.860 And it tells us that react hook use effect has a missing dependency. 07:41.890 --> 07:46.240 The ID either include it or remove the dependency array. 07:46.270 --> 07:51.610 Now we definitely do not want to remove the dependency array, because if I did remove the dependency 07:51.610 --> 07:55.000 array, then what would happen? 07:55.000 --> 08:00.430 And I don't know if I'd want to demonstrate this because it's going to cause an infinite loop. 08:00.430 --> 08:04.710 But I'll explain what's going to happen if I remove that dependency array. 08:05.100 --> 08:09.270 What happens is our component mounts, the useeffect gets called. 08:09.300 --> 08:11.280 We go and fetch data from the API. 08:11.280 --> 08:17.370 And then we call inside here the set product method which updates the state inside this component, 08:17.400 --> 08:20.190 which then causes the component to rerender. 08:20.580 --> 08:27.030 If we don't have this dependency array, or we forget to include it because the component's Rerendering, 08:27.030 --> 08:33.090 the Useeffect is called again, it goes out to the API sets the products component Rerenders. 08:33.120 --> 08:36.630 Useeffect is called again, so that happens continuously. 08:36.660 --> 08:39.300 So that's why we need this dependency array. 08:39.300 --> 08:46.350 And because we're depending on the ID here, then we need to supply that as the dependency for this 08:46.350 --> 08:47.370 useeffect. 08:47.370 --> 08:55.320 And what this means is if the ID changes, then the useeffect gets executed again and it will attempt 08:55.320 --> 08:59.220 to synchronize effectively with our API server. 08:59.580 --> 09:04.000 I say synchronize, that's the terminology that reacts users, but it means it's going to go out and 09:04.000 --> 09:08.830 fetch the data from the API and set the product again inside this component. 09:08.830 --> 09:14.230 And then to make sure this is working, let's inside this div instead of product details let's just 09:14.230 --> 09:17.380 specify product dot name. 09:17.380 --> 09:20.740 Now it's given us the automatically the optional chaining. 09:20.740 --> 09:21.970 Why has it done this. 09:21.970 --> 09:24.580 Why is it specified question mark there. 09:24.580 --> 09:31.540 Well if we hover over the products at the time at this point, then it could be a product or it could 09:31.540 --> 09:32.260 be null. 09:32.410 --> 09:39.310 So what this means is that if we do not have the product, let's come back then it's simply not going 09:39.340 --> 09:40.180 to display anything. 09:40.180 --> 09:41.590 It's not going to crash your application. 09:41.590 --> 09:44.440 But we won't see anything inside this div. 09:44.440 --> 09:47.770 If we do have the product name, then that's going to be displayed. 09:47.950 --> 09:50.200 Now that should be enough to see this in action. 09:50.200 --> 09:51.610 So let's go across to our browser. 09:51.610 --> 09:53.110 Let's go back to the catalog. 09:53.320 --> 09:56.260 Let's just refresh the page, make sure everything looks fine. 09:56.260 --> 10:01.330 And if I click on a product and I can see the product name appearing in my browser, and if I go to 10:01.360 --> 10:02.450 a different product. 10:02.480 --> 10:07.790 I see the updated name and if I go to another different product, I keep seeing the updated name of 10:07.790 --> 10:09.950 the products that I have clicked on. 10:10.430 --> 10:14.360 And before we move forward, I just want to do double check the console, make sure there's no errors 10:14.360 --> 10:17.750 in here because we do have some errors. 10:17.750 --> 10:24.920 And if I refresh the page this is a little bit annoying actually, and I'm not entirely sure what their 10:24.920 --> 10:32.960 thinking was by flooding the dev tools with their warnings that don't affect what we're doing with version 10:32.960 --> 10:36.140 six, but they're telling us, hey, we might want to do something. 10:36.140 --> 10:40.760 I don't know if I like the way they've done this, but anyway, we'll take a look at these flags and 10:40.760 --> 10:44.960 we're just going to add some noise into our code to get rid of these warnings. 10:44.960 --> 10:46.280 And let's take a look at that. 10:46.280 --> 10:49.490 So this one what does it say V7 star transition. 10:49.490 --> 10:54.140 We need to use this flag to disable the warning whenever we enable it to. 10:54.170 --> 10:58.700 True or false I guess it doesn't really matter with what we're doing, but we're using a router provider 10:58.700 --> 11:02.670 so we can set the future flag and set that to whatever we want. 11:02.700 --> 11:03.990 So let's go and do that. 11:03.990 --> 11:06.900 And this is going to be a bit annoying I think. 11:06.900 --> 11:11.430 So we'll go to our main points and we've got our router provider here. 11:11.430 --> 11:13.950 And what did we need the future flag. 11:13.950 --> 11:15.720 So I'm going to specify future. 11:15.720 --> 11:19.020 And then we've got the V7 start transition. 11:19.050 --> 11:24.150 I'm just going to set that to false so it retains its React Router six behavior. 11:24.150 --> 11:30.810 And if I just refresh then oh apparently we still get the warning. 11:30.810 --> 11:35.640 Even if we enable that perhaps I do need to set it to true to turn off that warning. 11:35.640 --> 11:37.170 This is all brand new by the way. 11:37.170 --> 11:38.580 So yeah. 11:38.610 --> 11:43.530 So if we don't set it, if we don't use it, we get the warning persisting in our console. 11:43.530 --> 11:46.050 That's um that's interesting. 11:46.500 --> 11:52.350 And then we've got this relative splat path changes the relative path matching and linking for multisegment 11:52.380 --> 11:54.270 splat paths like dashboard. 11:54.300 --> 12:02.650 Not something we're using in our code, but it looks like we need to specify this in our create browser 12:02.650 --> 12:03.370 router. 12:03.370 --> 12:08.320 So after the routes we add a comma and then we get access to this future property. 12:08.350 --> 12:11.620 So let's go back to our roots for list one. 12:11.620 --> 12:13.480 And let's see. 12:13.570 --> 12:18.280 So this square bracket here this is our routes that we're providing. 12:18.310 --> 12:22.930 So after this we should get access to I think I need to do this in curly brackets. 12:22.930 --> 12:25.120 And then we've got access to future. 12:25.330 --> 12:28.690 And then we can start using the different options. 12:28.690 --> 12:35.530 So okay inside here let's see V7 relative splat path I'll set that to false. 12:35.800 --> 12:38.260 And let's take a look and see if that fixed anything. 12:38.260 --> 12:41.050 Or if we do need to set this one to true as well. 12:41.080 --> 12:44.260 And yep sure enough let's set that to true. 12:44.860 --> 12:47.050 It shouldn't really impact our functionality. 12:47.080 --> 12:49.720 We're only using basic router functionality here. 12:49.720 --> 12:52.300 So this is a bit annoying. 12:52.300 --> 12:53.740 And let's keep going on. 12:53.740 --> 12:58.900 So now we're down to for the persistence behavior of Fetchers is changing. 12:58.930 --> 13:00.460 We're not using that either. 13:00.460 --> 13:03.590 But I guess we're going to need to enable the flag. 13:03.590 --> 13:07.430 So let's add a comma and say V7 fetcher persist. 13:07.580 --> 13:09.440 I'll guess I'll say true to that one as well. 13:09.440 --> 13:10.970 It won't make any difference. 13:10.970 --> 13:16.130 And then we've got the V7 normalized form method. 13:16.130 --> 13:17.600 Something else we're not using. 13:17.720 --> 13:19.370 So let's set that to true. 13:19.370 --> 13:24.920 And just to get rid of the flag then we've got the hydration behavior. 13:24.920 --> 13:29.210 So V7 partial hydration we'll set that to true as well. 13:29.210 --> 13:31.250 And then we're down to one warning. 13:31.250 --> 13:35.330 Revalidation behavior is changing in V7. 13:35.330 --> 13:37.790 Skip action error revalidation. 13:37.790 --> 13:40.100 So let's just set this flag as well. 13:40.130 --> 13:46.430 Maybe you won't need to deal with this because I imagine developers are complaining about the warnings 13:46.430 --> 13:48.200 that this provides in the console. 13:48.230 --> 13:53.060 No developers like to see these kind of warnings, and I'm surprised to see it actually. 13:53.060 --> 13:53.960 But never mind. 13:53.990 --> 13:56.690 Now our console is clean and we can move forward. 13:56.690 --> 14:02.330 And what we'll take a look at next is providing the contents for our product details page, which we'll 14:02.330 --> 14:03.560 look at next.