1 00:00:00,180 --> 00:00:07,200 Excellent work, we set up everything for a single product in our context as well as the producer. 2 00:00:07,680 --> 00:00:14,610 So now I think I'm going to close all the files as well as the folders, and we'll simply go back to 3 00:00:14,610 --> 00:00:20,430 the context and in the context, in the product context, I would want to pass that function down. 4 00:00:20,730 --> 00:00:23,840 So for a single product, I would want to pass it down. 5 00:00:23,850 --> 00:00:30,850 That's why I'll pass it in to the value so say here for each single product. 6 00:00:31,200 --> 00:00:37,800 So now of course, I can access that function and now I would want to navigate to the pages and I'm 7 00:00:37,800 --> 00:00:40,840 looking for that single product page. 8 00:00:41,250 --> 00:00:42,690 Now we do have a bunch of reports. 9 00:00:42,990 --> 00:00:50,850 We have years of since, like I said, will invoke this single product when we load the single page 10 00:00:50,850 --> 00:00:54,780 product page and then we've got some use problems in your history. 11 00:00:55,020 --> 00:00:57,990 Don't worry, I'll cover these hooks once we get there. 12 00:00:58,020 --> 00:01:00,570 And they're both are coming from reactor down. 13 00:01:01,700 --> 00:01:06,690 Then also, I would want to get the link from reactor number as well as style components. 14 00:01:06,710 --> 00:01:10,100 That's why we have styled we have this single product. 15 00:01:10,100 --> 00:01:17,870 You are because remember in the constants in the utils for store and then in the constants, I had that 16 00:01:17,870 --> 00:01:20,200 single product, YORO. 17 00:01:20,510 --> 00:01:25,090 So this is the URL, the root Yoro all the way up to the idea. 18 00:01:25,580 --> 00:01:30,340 And then what we're doing each and every time we navigate a single product, we'll just grab Darity 19 00:01:30,800 --> 00:01:37,700 and then add it to the zero and then we'll be able to fetch the product again. 20 00:01:38,030 --> 00:01:43,670 We now get here for some reason I closed my single product that also I have for my price. 21 00:01:44,060 --> 00:01:50,430 Since we already covered that, we're getting pricing sense and then we have quite a few components. 22 00:01:50,450 --> 00:01:54,800 So some of them are going to be while we're loading, one is going to be for the error. 23 00:01:55,070 --> 00:01:58,910 But then if we navigate to a complete project, notice. 24 00:01:59,910 --> 00:02:07,500 The single product page is somewhat big and complicated, so I would want to set up separate component 25 00:02:07,500 --> 00:02:08,450 for these images. 26 00:02:08,880 --> 00:02:17,880 I would want to set up a separate component for the stars as well as the colors and add to cart functionality. 27 00:02:18,270 --> 00:02:23,460 So this is going to be the case where I really want to split it up in multiple components. 28 00:02:23,820 --> 00:02:32,810 And we'll also have to redo a little bit of our page here, because if you pay attention to yourself 29 00:02:32,880 --> 00:02:36,360 for the product or about or whatever, we have only two. 30 00:02:36,690 --> 00:02:42,990 But then if we navigate to that single product, we have two links, the home and products and then 31 00:02:43,230 --> 00:02:45,070 the name of the product. 32 00:02:45,570 --> 00:02:53,610 So let's first start by setting up the loading, by setting up the Furrer as well as the user. 33 00:02:54,090 --> 00:02:56,370 So we're going to navigate back. 34 00:02:56,730 --> 00:03:02,450 We have all the components, like I said, that we're going to use and we have styled we have link and 35 00:03:02,450 --> 00:03:04,740 now I'm going to go inside of the component. 36 00:03:05,070 --> 00:03:07,400 And I first start by getting the idea. 37 00:03:07,740 --> 00:03:14,760 And remember, we react rather dumb in order to access the URL parameters we need to correct. 38 00:03:15,060 --> 00:03:17,700 And the name of the hook was used per. 39 00:03:18,660 --> 00:03:24,270 So if you want, you can log the whole thing and you'll see that there's going to be an object with 40 00:03:24,270 --> 00:03:29,280 a property of offsite just because in the app that's how I named it. 41 00:03:29,820 --> 00:03:32,720 So I'm going to go to the console and there it is. 42 00:03:32,730 --> 00:03:33,480 I have my object. 43 00:03:33,480 --> 00:03:36,830 And then in the object I have a problem with this value. 44 00:03:37,410 --> 00:03:44,220 So of course I would want to attach this one to my you are correct and then I'll be able to fetch the 45 00:03:44,220 --> 00:03:44,580 product. 46 00:03:45,060 --> 00:03:47,970 So I'll set up my ID here in seconds. 47 00:03:48,330 --> 00:03:50,130 Heidi is equal to use. 48 00:03:50,640 --> 00:03:52,830 Now I do need to structure it. 49 00:03:53,210 --> 00:03:56,780 That's why I'll close it in the bushes. 50 00:03:57,270 --> 00:04:04,140 So now what I'm saying is get me the ID property out of this object, the one that we can see in the 51 00:04:04,140 --> 00:04:04,590 console. 52 00:04:05,010 --> 00:04:10,600 And then I also would want to grab some things from use product complex. 53 00:04:11,040 --> 00:04:15,750 So first of all, I would want to get the loading her as well as the product. 54 00:04:16,640 --> 00:04:22,880 Whatever it is, remember, initially, it's going to be just an empty object and then the function 55 00:04:23,090 --> 00:04:24,130 for each single product. 56 00:04:24,470 --> 00:04:32,450 So we're going to go const and let's say single product single on this core product and then remember 57 00:04:32,450 --> 00:04:36,950 loading and all right away again, give it analagous of just loading. 58 00:04:37,370 --> 00:04:46,010 Then we're going to look for a single underscore product error and we're going to give it a Alia's of 59 00:04:46,010 --> 00:04:46,370 error. 60 00:04:46,820 --> 00:04:53,120 And then, of course, we have a single core product is equal to a product. 61 00:04:53,780 --> 00:04:55,880 So, again, we have some kind of Ellers. 62 00:04:56,240 --> 00:04:58,670 And lastly, let's just get that fetch. 63 00:04:59,840 --> 00:05:08,990 Single and then product, now all of this is coming from my hook, so I just invoke it and now let's 64 00:05:08,990 --> 00:05:10,780 set up the use of it first. 65 00:05:11,330 --> 00:05:18,440 So what I would want is when I load this component, when I load this page, I would want to invoke 66 00:05:18,440 --> 00:05:22,500 usufruct and set up my single product. 67 00:05:22,850 --> 00:05:28,880 Now, of course, I'll have to pass in this URL that is coming from my content, plus the idea. 68 00:05:29,460 --> 00:05:32,500 Then I'll be able to access the product. 69 00:05:32,510 --> 00:05:32,940 Correct. 70 00:05:33,350 --> 00:05:41,210 So we're going to set up over here and say use fact and then we will want to invoke it when the component 71 00:05:41,210 --> 00:05:41,560 mounts. 72 00:05:41,870 --> 00:05:48,410 So that's why I just pass an empty dependency array and if you want, we can add it or here. 73 00:05:48,410 --> 00:05:52,870 So has the added changes, then we will just fetch that new product. 74 00:05:53,060 --> 00:05:54,100 That's also an option. 75 00:05:54,410 --> 00:05:59,090 So I'm going to go with a single product and two things that I would want to pass in. 76 00:05:59,390 --> 00:06:02,540 I'll pass in the URL that is coming from my constants. 77 00:06:02,750 --> 00:06:06,390 And the second thing is the ID like so. 78 00:06:07,130 --> 00:06:10,600 So now of course if I want I can counsel the product. 79 00:06:11,030 --> 00:06:14,240 So first of all, remember, product should be empty. 80 00:06:14,390 --> 00:06:23,060 Notice I have two empty objects, meaning is just once or twice and then eventually of course I get 81 00:06:23,060 --> 00:06:24,170 my single product. 82 00:06:24,560 --> 00:06:31,160 So in this case, I will navigate to the bigger package because I would want you to see all the properties 83 00:06:31,160 --> 00:06:31,660 look like. 84 00:06:32,330 --> 00:06:39,160 So let's go over here now to theory and notice the council where of course, this is my object. 85 00:06:39,290 --> 00:06:44,650 So of course, we'll have to pull out these properties in order to showcase something. 86 00:06:45,020 --> 00:06:50,950 But if you can see the object with these properties, we are already in good shape. 87 00:06:51,470 --> 00:06:53,900 So I have my product some now. 88 00:06:54,410 --> 00:06:59,390 Well, now I also want to check for loading as well as the error. 89 00:06:59,570 --> 00:07:00,080 Correct. 90 00:07:01,290 --> 00:07:06,930 So let's go with simple if loading is true, then we have the loading component. 91 00:07:07,100 --> 00:07:12,600 Remember, we set it up when we worked on the feature product, so say loading. 92 00:07:12,840 --> 00:07:15,810 So that's going to be, of course, displayed when we're loading. 93 00:07:15,810 --> 00:07:20,680 Then also there's going to be forever and I'm going to show you error in the second. 94 00:07:21,120 --> 00:07:31,080 So let's go with return and error and not to test out the error or we simply add ash in front of the 95 00:07:31,080 --> 00:07:31,550 euro. 96 00:07:32,040 --> 00:07:36,150 And what you should see is that there was a year. 97 00:07:36,420 --> 00:07:41,160 So that, of course, our component and technically we could leave it the way it is. 98 00:07:41,340 --> 00:07:43,850 If there is an error, we just display the error. 99 00:07:44,220 --> 00:07:51,480 But I think a better solution would be setting up the automatic navigation, meaning this is going to 100 00:07:51,480 --> 00:07:52,800 be done programmatically. 101 00:07:53,220 --> 00:07:57,720 Instead of just displaying the link, I would want to navigate back to the home page. 102 00:07:58,170 --> 00:08:01,680 If there is an error, let's say in three seconds. 103 00:08:01,890 --> 00:08:03,130 How do we set that one up? 104 00:08:03,450 --> 00:08:09,780 Well, we'll have to set up one more use effect where I'm going to go with usufruct and for the time 105 00:08:09,780 --> 00:08:11,670 being is just going to be empty dependency. 106 00:08:11,710 --> 00:08:11,930 Right. 107 00:08:11,940 --> 00:08:14,520 But eventually we will pass in the error. 108 00:08:15,030 --> 00:08:17,850 And I'm going to check if the error is true. 109 00:08:18,090 --> 00:08:19,410 Summerset if error. 110 00:08:19,890 --> 00:08:26,610 So if the error is true, then I would want to set time since I would want to happen in three seconds. 111 00:08:26,820 --> 00:08:30,510 And then I remember in September we passed in callback function. 112 00:08:30,750 --> 00:08:36,360 And then the second thing is in how long we would want to navigate, meaning in how long we would want 113 00:08:36,360 --> 00:08:37,520 to run the callback function. 114 00:08:37,890 --> 00:08:42,390 So we have three thousand milliseconds, which of course is three seconds. 115 00:08:42,690 --> 00:08:47,150 And then in those three seconds, how we can programmatically navigate away from the page. 116 00:08:47,580 --> 00:08:52,940 Well we can use use history hook from react Rotterdam. 117 00:08:53,190 --> 00:08:59,580 Now there's another way how we can navigate away from the page and I'll show you that when we work with 118 00:08:59,580 --> 00:09:00,500 are zero. 119 00:09:00,720 --> 00:09:05,880 Keep in mind there's two, there's one with redirect and one with use history. 120 00:09:05,920 --> 00:09:10,710 OK, so in this case we'll take a look at the history and the other one will be redirect. 121 00:09:10,950 --> 00:09:16,770 And we simply set up the history is equal to the U.S. history. 122 00:09:16,800 --> 00:09:25,220 OK, so now we get the history back from the reactor down and the method we're looking on this is the 123 00:09:25,230 --> 00:09:26,680 object is push. 124 00:09:27,180 --> 00:09:34,060 So this will set up the programatic navigation and I'm going to look for my use of fact. 125 00:09:34,260 --> 00:09:37,920 And in the set time, I'll just go with history. 126 00:09:38,380 --> 00:09:44,590 And like I said, the method name was push and now we just need to come up with a destination. 127 00:09:44,910 --> 00:09:51,480 So in this case, in three seconds, I would want to programmatically navigate to the homepage. 128 00:09:51,750 --> 00:09:55,970 So I'll save and you'll notice that it doesn't happen. 129 00:09:56,280 --> 00:09:56,700 Why? 130 00:09:57,000 --> 00:10:02,250 Well, because we need to understand that by default, this error, I remember, will be false. 131 00:10:02,400 --> 00:10:06,580 By the way, if you want, you can cancel it and say that error is false. 132 00:10:07,020 --> 00:10:14,010 That's why I said that we would need to add that error in dependency, because remember, when we start 133 00:10:14,010 --> 00:10:15,710 patching error is false. 134 00:10:16,470 --> 00:10:22,320 But then once we're done loading and then once we can see that there's an error, then of course we 135 00:10:22,320 --> 00:10:23,940 set up error to be true. 136 00:10:24,300 --> 00:10:31,380 So once I add it here, known as the initial value will be, of course, false, but then eventually 137 00:10:31,380 --> 00:10:32,140 it's going to be true. 138 00:10:32,580 --> 00:10:36,030 So then in three seconds, we nicely navigate away. 139 00:10:36,330 --> 00:10:39,030 So we nicely navigate to the homepage again. 140 00:10:39,360 --> 00:10:40,190 It is optional. 141 00:10:40,240 --> 00:10:42,540 You want to leave the error, you can definitely do so. 142 00:10:42,780 --> 00:10:48,120 But you also have an option of programmatically navigating using a reactor. 143 00:10:48,190 --> 00:10:55,710 Now, remember, there's two cases how we can do that, one using history and then the other one is 144 00:10:55,710 --> 00:10:58,070 redirect, which will cover a bit later. 145 00:10:58,410 --> 00:11:03,100 So now, of course, we're at the point where we can successfully get the product. 146 00:11:03,120 --> 00:11:07,940 I just need to remove this and now we need to focus on our return. 147 00:11:08,100 --> 00:11:12,110 So I'm going to, I guess, set it up on a small screen as well. 148 00:11:12,510 --> 00:11:13,650 So I'm going to sit here. 149 00:11:13,650 --> 00:11:19,770 I wouldn't want to navigate and we should see this single product page because now we're at the point 150 00:11:19,770 --> 00:11:22,320 where we would need to set up our return.