1 00:00:00,500 --> 00:00:04,220 And while we're still on a roll let's complete our single product. 2 00:00:04,670 --> 00:00:09,560 So let me head over again back to finished project and let's take a look at what we're gonna have. 3 00:00:09,560 --> 00:00:15,680 If we click on details again please keep in mind the same is going to work for feature products as well 4 00:00:15,680 --> 00:00:21,230 as all the products because we're rendering our product component and the component is the one that 5 00:00:21,230 --> 00:00:22,080 has the link. 6 00:00:22,130 --> 00:00:27,050 So regardless whether you're going to navigate from feature product or all the products from the product 7 00:00:27,050 --> 00:00:33,590 page you're going to end up in a single product page where I believe the page name most product details. 8 00:00:33,590 --> 00:00:35,910 But regardless the same functionality. 9 00:00:36,020 --> 00:00:41,660 And then we're going to display info about that specific product let's say title. 10 00:00:41,660 --> 00:00:46,680 We're going to also have the price some kind of info coming from hipster up some. 11 00:00:46,760 --> 00:00:49,670 And then we're gonna have an option of adding to our car. 12 00:00:49,700 --> 00:00:54,110 I think the card is gonna be interesting because there's gonna be two functionalities. 13 00:00:54,110 --> 00:00:59,390 First of all we're going to add that I am to the card which obviously we don't have the functionality 14 00:00:59,390 --> 00:00:59,850 for. 15 00:00:59,990 --> 00:01:03,060 But then also we're going to navigate to a card page. 16 00:01:03,200 --> 00:01:10,690 So we're gonna see how we can use react rather dumb in order to programmatically navigate to let's say 17 00:01:10,700 --> 00:01:12,950 different page in our case that is going to be card. 18 00:01:13,370 --> 00:01:16,870 So I notice the moment I had the item to the card. 19 00:01:16,880 --> 00:01:19,730 I'm also going to navigate to a card page. 20 00:01:19,820 --> 00:01:26,400 So now that we know what we're going to build on start working on it again we're going to close out 21 00:01:26,400 --> 00:01:28,810 all the tabs as well as these ones. 22 00:01:28,950 --> 00:01:32,840 Then we didn't the source and let's look for our pages. 23 00:01:33,030 --> 00:01:38,100 So we're going to look for products details page and we're going to start by getting bunch and bunch 24 00:01:38,100 --> 00:01:39,460 of imports first. 25 00:01:39,470 --> 00:01:40,540 We have the parameters. 26 00:01:40,560 --> 00:01:41,230 Awesome. 27 00:01:41,250 --> 00:01:44,580 So that way we're going to access each and every I.D.. 28 00:01:44,910 --> 00:01:48,210 So we're going to access each and every specific product. 29 00:01:48,210 --> 00:01:51,520 And then also we're gonna get eventually a card context. 30 00:01:51,540 --> 00:01:56,180 But before we do that we're gonna get a product context so there's gonna be two contexts. 31 00:01:56,250 --> 00:01:59,280 And from card context we're gonna get add to cart. 32 00:01:59,280 --> 00:02:01,170 But again we haven't set up that context yet. 33 00:02:01,170 --> 00:02:05,290 So I'm just going to add as an import that we're gonna comment this out. 34 00:02:05,610 --> 00:02:13,350 So let's do import then first let's grab product context because we would want to access all the products 35 00:02:13,620 --> 00:02:16,950 since we're gonna get a specific product using the idea. 36 00:02:17,580 --> 00:02:21,170 So from then it is coming from our context folder. 37 00:02:21,630 --> 00:02:28,030 So let's do that that then context and then we're looking for these products. 38 00:02:28,230 --> 00:02:33,480 Now like I said I'm going to copy and paste and this is gonna be a car context but for the time being 39 00:02:33,840 --> 00:02:34,730 we're just gonna comment. 40 00:02:34,750 --> 00:02:41,880 So it is coming again from the car context but let's just comment this up because we're not gonna use 41 00:02:41,880 --> 00:02:42,640 it right now. 42 00:02:42,750 --> 00:02:49,530 And then also we would want to get use history Cook which is gonna allow us to programmatically navigate 43 00:02:49,530 --> 00:02:58,710 to a different page and that is coming from the reactor down and it is a named import or use story from 44 00:02:58,800 --> 00:03:05,940 and we're looking for react product down once we have all our imports we have the I.D. course we're 45 00:03:05,940 --> 00:03:13,640 using use primes hook to get our ready and let's right away get a history similar say concept dance 46 00:03:13,710 --> 00:03:18,320 history and then in this case we're using use historical. 47 00:03:18,320 --> 00:03:24,150 So we say use historical and we're not going to do anything with it for the time being this is just 48 00:03:24,150 --> 00:03:29,570 gonna be our variable and now let's get our product from the product context. 49 00:03:29,610 --> 00:03:35,940 So what I would like to do right now is get all my products and then grab the product that has the same 50 00:03:35,940 --> 00:03:42,240 matching the idea because I would want of course to get more info about that product not just the idea 51 00:03:42,540 --> 00:03:47,280 is currently the only thing we're displaying is the 80 but we would want of course way more. 52 00:03:47,280 --> 00:03:49,430 So we're gonna set up our products. 53 00:03:49,440 --> 00:03:57,750 We know we can do structured from product context and we can access by using react use context and then 54 00:03:57,750 --> 00:03:59,750 we have a product context. 55 00:03:59,940 --> 00:04:01,950 And then once I have access to the product. 56 00:04:02,100 --> 00:04:05,290 Now I would want to get a specific product. 57 00:04:05,370 --> 00:04:07,340 How can I get a specific product. 58 00:04:07,350 --> 00:04:10,430 Well I can just set up a variable by the name of product. 59 00:04:10,630 --> 00:04:12,450 And now I'm going to use a fine method. 60 00:04:12,870 --> 00:04:18,680 So I have access to all the products that are coming from the context then I can use a find method. 61 00:04:18,810 --> 00:04:24,090 And then again we get a callback function then within the combat function as a parameter we access each 62 00:04:24,090 --> 00:04:29,610 and every item and I'm going to say only return the item if the I.D. matches. 63 00:04:29,680 --> 00:04:32,160 To say loop over my array. 64 00:04:32,160 --> 00:04:38,810 And then if the item I.D. is exactly the same as my D then assign it to a product. 65 00:04:39,150 --> 00:04:44,340 However there is a catch and the catch is that remember I.D. was a string. 66 00:04:44,340 --> 00:04:47,260 So our ideas are not strings fact. 67 00:04:47,520 --> 00:04:48,840 They are numbers. 68 00:04:49,140 --> 00:04:56,370 So in order to get that particularity I would want to run pass and then I'm looking for integer and 69 00:04:56,370 --> 00:04:58,050 then I'm gonna grab the idea. 70 00:04:58,140 --> 00:05:02,420 Otherwise you're just not gonna get any values within the product. 71 00:05:02,430 --> 00:05:05,950 And once I have a variable then I can just start rendering. 72 00:05:06,000 --> 00:05:12,790 How are you going to remember there's gonna be cases where initially we're not gonna have all our product. 73 00:05:12,930 --> 00:05:15,970 So we're not gonna be able to right away get our product. 74 00:05:15,990 --> 00:05:18,850 So again we would need to set up a if statement. 75 00:05:18,920 --> 00:05:28,380 I'm going to say if product length and length like so and length has always been a terrible terrible 76 00:05:28,380 --> 00:05:33,340 property for me because I always misspell it and then let's say length is equal to zero. 77 00:05:33,360 --> 00:05:39,840 So if my array is empty what I would want to do well I would want to show the loading some gold import 78 00:05:40,590 --> 00:05:46,710 loading wrong and then let's look for components and within the components we're gonna have the loading 79 00:05:47,250 --> 00:05:56,520 so let's run the first loading if our array is empty let's do loading like so and then if of course 80 00:05:56,520 --> 00:06:00,210 everything is correct then we're gonna hello from product details. 81 00:06:00,330 --> 00:06:05,960 Now if you're going to admit this you're going to see in a second how everything breaks. 82 00:06:05,980 --> 00:06:06,270 All right. 83 00:06:06,510 --> 00:06:11,010 So you're probably thinking Well I mean even if the product like the zero. 84 00:06:11,070 --> 00:06:16,650 We shouldn't have no numbers and you shouldn't initially if you're navigating right away from homepage 85 00:06:17,040 --> 00:06:21,720 but if you're refreshing the page you're going to see that there is gonna be an error if you're not 86 00:06:21,990 --> 00:06:24,530 doing in fact as a sketch. 87 00:06:24,570 --> 00:06:30,090 So let me change this around a bit and let's say that instead of just accessing the idea I'm going to 88 00:06:30,090 --> 00:06:35,700 look for product ideas because remember that properties should be still there on a product. 89 00:06:36,000 --> 00:06:38,350 And let's admit this F block all right. 90 00:06:38,820 --> 00:06:42,440 And if you're going say if we refresh the page we're gonna get an error. 91 00:06:42,480 --> 00:06:46,960 Now I can tell you right away we're not gonna get an error if we navigate from the product. 92 00:06:46,980 --> 00:06:51,220 So if I'm gonna navigate to the product of course my products have been loaded. 93 00:06:51,540 --> 00:06:55,320 So product length is not going to be equal to zero. 94 00:06:55,320 --> 00:07:00,930 But if I'm going to try to refresh then my product length is in fact equal to zero and then I'm accessing 95 00:07:00,930 --> 00:07:06,360 the product that is just essentially not there because my error is empty and that's the reason why if 96 00:07:06,360 --> 00:07:11,010 I'm accessing product that I.D. will react is gonna complain. 97 00:07:11,010 --> 00:07:14,160 He's gonna say well I kind of get D of undefined. 98 00:07:14,350 --> 00:07:19,710 That's the reason why we set up this flag here where if let's say we just refresh the page then we're 99 00:07:19,710 --> 00:07:24,990 still going to render something by the time we get our product into our right. 100 00:07:25,350 --> 00:07:33,180 So we set up our if not let's write right away else and then with the nails we're gonna structure some 101 00:07:33,180 --> 00:07:34,530 things out of the product. 102 00:07:34,740 --> 00:07:38,260 Some say const concert. 103 00:07:38,480 --> 00:07:41,740 I'm going to the structure image title. 104 00:07:41,850 --> 00:07:45,280 And by the way just to show that of course we have multiple options. 105 00:07:45,440 --> 00:07:50,810 If you would want to you can do the structuring right here and there instead of assigning it like we 106 00:07:50,810 --> 00:07:51,560 previously did. 107 00:07:51,920 --> 00:07:59,140 So if I know that image is in fact an object I can just say Get me the You are all property. 108 00:07:59,210 --> 00:08:05,090 So instead of assigning it to a different variable we can use the six syntax where when I'm the structuring 109 00:08:05,150 --> 00:08:12,470 in if I know that the property is object itself I can just get a specific property from that object. 110 00:08:12,740 --> 00:08:17,250 And by the way if you really wanted to you can also assign a different name. 111 00:08:17,420 --> 00:08:23,120 So that way if you have the URL and then if you add here and colon you can add whatever name you would 112 00:08:23,120 --> 00:08:23,690 want. 113 00:08:23,690 --> 00:08:28,990 So in my case I'm going to keep the URL but just keep in mind that that is also your option that I'm 114 00:08:29,000 --> 00:08:36,560 looking for a price description like so and that is all coming from my product variable. 115 00:08:36,740 --> 00:08:42,110 And once we have the structure all the properties from the product variable. 116 00:08:42,110 --> 00:08:48,640 Now let's do our return so let's write a return and then we're just gonna return a section. 117 00:08:48,770 --> 00:08:54,860 Section is going to have a class name of single product. 118 00:08:54,880 --> 00:08:57,440 Now let's start I guess with an image. 119 00:08:57,440 --> 00:08:59,740 So we're gonna go with image as a.. 120 00:08:59,740 --> 00:09:05,060 We're gonna have a you are all property of course because that's what we do structured and then where 121 00:09:05,060 --> 00:09:06,860 we have alternative. 122 00:09:06,890 --> 00:09:08,650 Just gonna go with title. 123 00:09:08,820 --> 00:09:17,690 Let's go title and also let's add a class names or the class name is going to be single product image 124 00:09:18,370 --> 00:09:19,320 image. 125 00:09:19,340 --> 00:09:22,100 Now let's save it and we should have the image. 126 00:09:22,100 --> 00:09:27,050 So if I'm gonna head over let's say to our product and if I'm gonna navigate to a different product 127 00:09:27,410 --> 00:09:34,760 of course then I'm gonna have that specific image for that product and then within a section right after 128 00:09:34,760 --> 00:09:36,770 the image we're also gonna have the article. 129 00:09:37,030 --> 00:09:43,470 So let's write article and then one by one we would want to display first a title I guess. 130 00:09:43,550 --> 00:09:47,270 So title prop then we're going to look for the price. 131 00:09:47,330 --> 00:09:49,950 So having two is gonna be our price. 132 00:09:49,950 --> 00:09:55,890 Cause those are all the variables that we do structured price and then we have a description. 133 00:09:56,060 --> 00:10:00,720 So paragraph with a description description. 134 00:10:00,840 --> 00:10:07,080 And now this is where things get interesting where we're going to have a button that is gonna do two 135 00:10:07,290 --> 00:10:07,880 things. 136 00:10:08,040 --> 00:10:09,730 It's gonna add the item to the cart. 137 00:10:09,840 --> 00:10:12,080 Again the function we haven't created yet. 138 00:10:12,270 --> 00:10:16,800 And then the second one is going to be navigating to a cart page. 139 00:10:16,800 --> 00:10:18,520 So first let's set up a button. 140 00:10:18,690 --> 00:10:21,730 Then let's add add to cart. 141 00:10:21,870 --> 00:10:24,380 Let's also add maybe some classes here. 142 00:10:24,580 --> 00:10:26,800 It's a class name. 143 00:10:26,920 --> 00:10:33,290 And then in this case we're gonna have B10 between primary and Beatty and block. 144 00:10:33,470 --> 00:10:38,150 And once we have added our classes let's set up on click event listener. 145 00:10:38,150 --> 00:10:41,910 And then in here we're gonna pass in first anonymous function. 146 00:10:42,140 --> 00:10:44,700 So we're going to start by setting up anonymous function. 147 00:10:44,810 --> 00:10:50,050 And then there's gonna be two functionalities add to cart which currently doesn't exist. 148 00:10:50,150 --> 00:10:53,150 And the second one is gonna be our history. 149 00:10:53,150 --> 00:11:00,060 And remember we used use this theory hook to get back our history to assign to a variable. 150 00:11:00,200 --> 00:11:06,980 And now within the history object we have a method called Push where we write history that is of course 151 00:11:06,980 --> 00:11:07,850 a variable. 152 00:11:07,850 --> 00:11:09,900 And the method name is push. 153 00:11:10,040 --> 00:11:12,560 And now we just need to say where we would want to navigate. 154 00:11:12,560 --> 00:11:17,460 So in our case working said if we would want to navigate to a cart page let's save it. 155 00:11:17,600 --> 00:11:23,060 We're gonna head over to a bigger browser window first of all let's open up our product and then we're 156 00:11:23,060 --> 00:11:24,810 gonna navigate to a bigger browser window. 157 00:11:25,080 --> 00:11:29,340 And this is gonna be the title the price as well as the description. 158 00:11:29,450 --> 00:11:34,010 And then of course if we would want to add item to the cart currently we're just gonna navigate to a 159 00:11:34,010 --> 00:11:34,580 cart page.