1 00:00:00,150 --> 00:00:00,690 All right. 2 00:00:00,690 --> 00:00:02,040 We have two functions left. 3 00:00:02,230 --> 00:00:05,020 We have had to cart as well as clear cut. 4 00:00:05,290 --> 00:00:10,350 I think we're going to start with clear cut because it is going to have by far the easiest functionality 5 00:00:10,740 --> 00:00:14,870 where if we would like to clear the cart we're just going to use said cart. 6 00:00:14,880 --> 00:00:21,190 Remember that was the function given to us by use state and then we're just going to set car to an empty 7 00:00:21,180 --> 00:00:23,150 array and that's all we have to do. 8 00:00:23,150 --> 00:00:27,640 And then for the add to cart it's gonna be a bit more complicated. 9 00:00:27,810 --> 00:00:33,390 But first we're just going to console log the product and then we're gonna head over to product details 10 00:00:33,870 --> 00:00:39,780 because we would want to in fact right now import our current context remember previously we had this 11 00:00:39,780 --> 00:00:40,720 comment dealt. 12 00:00:40,800 --> 00:00:46,710 So now we're going to uncommon the court context and now I'd like to access my data and the data that 13 00:00:46,710 --> 00:00:54,150 I'm looking for is my add to cart function because if I have my button to navigating to a cart or adding 14 00:00:54,150 --> 00:00:59,460 to the cart and then obviously we're also navigating then we would want to add our function there. 15 00:00:59,580 --> 00:01:03,620 So if I'm gonna head over to the product I'm going to click on details. 16 00:01:03,630 --> 00:01:08,370 Remember we have this add to cart but so now I would want to add that functionality. 17 00:01:08,850 --> 00:01:11,120 So first let me get my function. 18 00:01:11,220 --> 00:01:14,790 Add to cart that is coming from. 19 00:01:14,850 --> 00:01:16,220 React. 20 00:01:16,350 --> 00:01:22,170 Again we're looking for use context use context and we're looking for the court context. 21 00:01:22,350 --> 00:01:26,460 Once we have our add to cart then we need to pass in the product. 22 00:01:26,520 --> 00:01:32,020 Remember we get the product because we run find method on all the product. 23 00:01:32,160 --> 00:01:36,370 And of course we can get the correct one because we have have access to the. 24 00:01:36,600 --> 00:01:37,920 Then we get the product. 25 00:01:37,920 --> 00:01:39,710 We do the structuring. 26 00:01:39,810 --> 00:01:44,160 However in our case we're just going to pass the whole product into our add to cart. 27 00:01:44,160 --> 00:01:45,920 So we have history push. 28 00:01:46,050 --> 00:01:51,360 We are in fact navigating to our cart page and right before we do that we're gonna have add to cart 29 00:01:51,870 --> 00:01:54,110 and we're just going to pass the product. 30 00:01:54,120 --> 00:01:55,400 Let me save it. 31 00:01:55,680 --> 00:02:01,290 And then the moment I click it in a console Of course I'm going to have my product and I can head over 32 00:02:01,290 --> 00:02:06,450 back to cart jurors our context and we're gonna do a bit of logic. 33 00:02:06,630 --> 00:02:11,700 First of all I would want to the structure some properties out of my object because I don't want to 34 00:02:11,790 --> 00:02:13,570 parse the whole thing into the cart. 35 00:02:13,680 --> 00:02:18,720 There's no point for me to have the property of let's say I created that as well as description. 36 00:02:18,720 --> 00:02:21,030 So let's just look for the properties we're looking for. 37 00:02:21,180 --> 00:02:26,640 And by the way if you're looking for suggestion the properties you're going to need you can look no 38 00:02:26,640 --> 00:02:33,740 further than local cart or you're gonna see that we need daddy title price image as well as the amount. 39 00:02:34,200 --> 00:02:39,870 So the basin properties we're going to structure we're going gonna head over back to car Jess and we're 40 00:02:39,870 --> 00:02:41,430 just gonna set it equal to our product. 41 00:02:41,790 --> 00:02:53,280 So cost I.D. image title and price and all that is coming from the product mark so land we would want 42 00:02:53,280 --> 00:02:57,520 to check whether the item is already in the cart if it isn't a cart. 43 00:02:57,720 --> 00:03:01,670 We would just want to increase the amount of items it has. 44 00:03:01,710 --> 00:03:08,100 So let's say if I click on the computer and in vintage one instead of adding as a new car item I would 45 00:03:08,100 --> 00:03:10,080 just want to increase the amount. 46 00:03:10,080 --> 00:03:13,380 So first we're going to check is the item in a cart or not. 47 00:03:13,380 --> 00:03:18,540 So let's look for the item I'm going to say item and then again I just like using the spread operator 48 00:03:18,570 --> 00:03:22,830 but you don't have to technically you can just access the cart but I must say that I'm just going to 49 00:03:22,830 --> 00:03:28,470 copy all the values that I have in a cart and then I'm going to run the final method and then I'm going 50 00:03:28,470 --> 00:03:35,250 to look for the item that has the same idea and I'm either going to have that item or that item is not 51 00:03:35,250 --> 00:03:35,910 going to be in a car. 52 00:03:36,360 --> 00:03:38,890 So item my D is equal to it. 53 00:03:39,090 --> 00:03:43,240 So that's how we're looking again using the fine method instead of filter. 54 00:03:43,260 --> 00:03:47,360 So this is going to either return undefined or we're going to have. 55 00:03:47,370 --> 00:03:47,830 All right. 56 00:03:48,360 --> 00:03:53,970 And since we have that piece of logic already in place I can just up might if statement and then I'm 57 00:03:53,970 --> 00:03:57,000 going to say if the item is already in the cart. 58 00:03:57,390 --> 00:03:59,730 Well I would just want to increase the item. 59 00:03:59,870 --> 00:04:05,280 So I'm going to say increase the amount because obviously that is the method that we already have. 60 00:04:05,520 --> 00:04:11,340 And then I'm just going to pass immediately remember we had already increase amount function. 61 00:04:11,520 --> 00:04:18,450 So if the item is already in the cart if it is equal to something because you're not going to be able 62 00:04:18,450 --> 00:04:21,540 to find that item in a cart then this is gonna be undefined. 63 00:04:21,660 --> 00:04:26,820 So we're right away we're going to go to else and if that is true then we're just increased the amount 64 00:04:27,300 --> 00:04:29,280 and then we're going to return from the function. 65 00:04:29,280 --> 00:04:34,320 However we also have another option where the item is not in the cart yet. 66 00:04:34,860 --> 00:04:41,640 So in that case we're going to create a new item somewhere a new item and in this case again we're going 67 00:04:41,640 --> 00:04:49,920 to use the yes 6 shorthand where I'm gonna be setting up a d property and since my value is equal to 68 00:04:49,950 --> 00:04:54,930 a variable that I already have again I can just use a shorthand where I'm going to say I'm going to 69 00:04:54,930 --> 00:04:56,000 have the D. 70 00:04:56,250 --> 00:05:02,620 In this particular product or new item that I'm going to have the title which is equal to the title 71 00:05:02,620 --> 00:05:06,050 in passing that I'm gonna have also a price. 72 00:05:06,070 --> 00:05:07,280 And lastly a month. 73 00:05:07,390 --> 00:05:11,890 Now the amount I'm gonna heart code and I'm going to say that amount initially is going to be equal 74 00:05:11,890 --> 00:05:12,470 to 1. 75 00:05:12,700 --> 00:05:17,280 Because of course the moment we add some kind of item to the cart while the amount is just going be 76 00:05:17,280 --> 00:05:17,830 one. 77 00:05:17,890 --> 00:05:21,460 And then of course we would want to have that item to our cart. 78 00:05:21,490 --> 00:05:25,930 Someone say cost new cart is equal to again. 79 00:05:25,930 --> 00:05:31,300 We're going to use a race port operator where I'm gonna add all the items that I have currently in a 80 00:05:31,300 --> 00:05:31,630 cart. 81 00:05:31,930 --> 00:05:33,330 So dot dot dot cart. 82 00:05:33,460 --> 00:05:37,450 So we're copying here and then we're just going to use new item. 83 00:05:37,450 --> 00:05:40,380 So now we're just adding a new item like so. 84 00:05:40,380 --> 00:05:42,700 So we spread out all the properties that we have. 85 00:05:42,700 --> 00:05:49,100 We assign it of course to this new array and then we'll just add our last item that we just created. 86 00:05:49,300 --> 00:05:55,680 And then eventually we can just use again set the cart and then we can add our new cart value. 87 00:05:56,230 --> 00:06:00,190 Let's say it I think I'm gonna close my console. 88 00:06:00,190 --> 00:06:05,260 I don't think there is need for it then I'm going to head over to a project that we're currently working 89 00:06:05,260 --> 00:06:05,840 on. 90 00:06:05,890 --> 00:06:09,820 So we have our product and let's say I'm going to try this one. 91 00:06:09,820 --> 00:06:12,160 Hopefully I didn't have this one already in a cart. 92 00:06:12,190 --> 00:06:15,810 The moment I click on it it doesn't show the image. 93 00:06:15,810 --> 00:06:17,390 OK interesting. 94 00:06:17,410 --> 00:06:21,650 Let's head over back and let's decide why we don't have the correct image. 95 00:06:21,820 --> 00:06:23,490 So I'm gonna head back to my project. 96 00:06:23,530 --> 00:06:30,130 I have the image and as always it's gonna be much more easier if we're just going to console log it 97 00:06:30,840 --> 00:06:32,410 and let's see what we're gonna have. 98 00:06:32,410 --> 00:06:34,590 So let's head over back to products. 99 00:06:34,840 --> 00:06:37,730 Let's again click on this guy Mary. 100 00:06:38,010 --> 00:06:39,090 Let's add the products. 101 00:06:39,100 --> 00:06:41,740 And again we don't have that particular image. 102 00:06:41,950 --> 00:06:48,260 So let's look in a console we have the object and ask for image of course we do need to use the url. 103 00:06:48,370 --> 00:06:53,020 So that was my mistake where remember we're passing in the whole object. 104 00:06:53,020 --> 00:06:59,560 So let me head over back and once I know that I need to access the RL property instead of the whole 105 00:06:59,560 --> 00:07:00,310 image. 106 00:07:00,310 --> 00:07:04,310 Well again we have two options either we can the structure right away. 107 00:07:04,420 --> 00:07:07,150 Are you are well or in fact we can. 108 00:07:07,180 --> 00:07:07,840 I don't know. 109 00:07:07,840 --> 00:07:09,810 Set it up has a separate variable. 110 00:07:09,820 --> 00:07:11,890 Now I'm gonna get her off the console log. 111 00:07:11,890 --> 00:07:12,950 We're not going to cancel a log. 112 00:07:13,210 --> 00:07:18,670 And also as a side note I purposely show you if I'm troubleshooting something because a lot of times 113 00:07:18,670 --> 00:07:24,310 I see where people are asking questions but in order to get those answers it's just a simple console 114 00:07:24,310 --> 00:07:27,840 log where will you just check where your data is coming from. 115 00:07:27,850 --> 00:07:33,940 So if I know that I'm passing my product into my ad card just check whatever data you have. 116 00:07:34,150 --> 00:07:38,620 And the moment you can check your data well then you can start looking for answers because I can clearly 117 00:07:38,620 --> 00:07:44,890 see that I'm passing image right now as an object and that's the reason why my image is not displayed 118 00:07:44,920 --> 00:07:45,360 properly. 119 00:07:45,760 --> 00:07:50,200 So in my case what I'm going to do is I'm going to do a bit more to structuring where I'm going to say 120 00:07:50,200 --> 00:07:52,540 image is gonna be an object of course. 121 00:07:52,540 --> 00:08:00,430 And then what I'm looking for is this you are all property and then in this case since my item does 122 00:08:00,430 --> 00:08:07,180 not match exactly the variable since I have the property by the name of image but the variable that 123 00:08:07,180 --> 00:08:09,280 holds the value is the URL. 124 00:08:09,340 --> 00:08:11,470 Well we're just going to rewrite a little bit. 125 00:08:11,470 --> 00:08:16,060 We're going to say we're going to have the image property and the value is going to be coming from our 126 00:08:16,300 --> 00:08:17,740 you are all variable. 127 00:08:17,950 --> 00:08:19,280 Let's save it. 128 00:08:19,520 --> 00:08:22,780 Now we should finally see the item in the cart. 129 00:08:23,200 --> 00:08:26,020 So let's head or again back to product. 130 00:08:26,020 --> 00:08:28,160 Let's try it one more time. 131 00:08:28,220 --> 00:08:29,080 Let's try to add it. 132 00:08:29,110 --> 00:08:31,370 And of course I have my item in a cart. 133 00:08:31,510 --> 00:08:32,730 I can increase the value. 134 00:08:32,750 --> 00:08:33,730 I'll be careful though. 135 00:08:33,760 --> 00:08:39,310 If you're going to be trying out the functionality of increasing the amount if you're going to do it 136 00:08:39,310 --> 00:08:44,500 let's say to one of the products one of the temporary products that we have in a cart we are going to 137 00:08:44,500 --> 00:08:46,680 keep on adding these new items. 138 00:08:46,720 --> 00:08:51,040 The reason for that is very simple because their ideas are different. 139 00:08:51,100 --> 00:08:57,700 So whatever ideas we have within the product in my local cart you know the dummy data that we have the 140 00:08:57,700 --> 00:08:58,890 ideas are different. 141 00:08:58,900 --> 00:09:04,840 So if let's say I'm going to add Mac vintage computer you're going to probably wonder well why the functionality 142 00:09:04,840 --> 00:09:05,380 doesn't work. 143 00:09:05,390 --> 00:09:10,860 The item is already in cart why we're adding Well again we're adding it because the ideas don't match. 144 00:09:11,170 --> 00:09:15,670 But let's say if I'm going to do this to the item that I already have in a cart. 145 00:09:15,670 --> 00:09:16,660 Well then it's going to work. 146 00:09:16,660 --> 00:09:20,650 So in this case the spectrum computer there's four items. 147 00:09:20,800 --> 00:09:26,560 If I'm going to head over to the product and if I'm going to add to cart notice how spectrum now has 148 00:09:26,560 --> 00:09:28,150 the amount of five. 149 00:09:28,300 --> 00:09:32,830 And we can always test that by just removing our local cart. 150 00:09:32,830 --> 00:09:38,530 So we're gonna head on up and instead of the local cart we're just gonna set this equal to an empty 151 00:09:38,530 --> 00:09:39,370 array. 152 00:09:39,370 --> 00:09:40,060 Don't worry. 153 00:09:40,180 --> 00:09:46,120 In the following videos we're going to set up the local storage so that way we can persist data in between 154 00:09:46,270 --> 00:09:48,750 the Loggins and in between the sessions. 155 00:09:48,820 --> 00:09:52,220 But in this case we're just going to set it as a empty array. 156 00:09:52,240 --> 00:09:56,170 Now of course we're always going to have initially an empty cart. 157 00:09:56,170 --> 00:10:01,170 But let's say if we would want to add it and head over to our products and our product. 158 00:10:01,180 --> 00:10:03,180 Let's just try one more time. 159 00:10:03,320 --> 00:10:06,670 Let's add the product now my amount is of course too. 160 00:10:06,800 --> 00:10:08,200 And then let's add one more. 161 00:10:08,210 --> 00:10:10,300 So this guy again add to cart. 162 00:10:10,310 --> 00:10:11,870 And now we have two of them. 163 00:10:11,870 --> 00:10:17,600 And if I would want to add the amount then of course I can do that if I would want to decrease the amount. 164 00:10:17,600 --> 00:10:21,410 The moment I'm going to go below 1 then we're going to remove the item. 165 00:10:21,500 --> 00:10:24,630 And as always we can just remove the item altogether. 166 00:10:24,710 --> 00:10:26,310 So our functionality works. 167 00:10:26,390 --> 00:10:29,420 And now we just need to start working on the local storage.