1 00:00:00,640 --> 00:00:01,120 Excellent. 2 00:00:01,120 --> 00:00:07,870 Once we have set up our products context which allow us to access products in the products page as well 3 00:00:07,870 --> 00:00:11,260 as the homepage on the single product page. 4 00:00:11,260 --> 00:00:11,950 Next one up. 5 00:00:11,950 --> 00:00:18,280 We have the cart and first thing we're gonna do is set up our cart context and since it is not our first 6 00:00:18,280 --> 00:00:18,740 rodeo. 7 00:00:19,120 --> 00:00:25,350 We already set up the product context together and since there is gonna be quite a few repetition I'm 8 00:00:25,350 --> 00:00:30,670 going to try to move a bit faster and we're going to head over back to our project then we're going 9 00:00:30,670 --> 00:00:36,920 to look for the car J.S. within the context folder and of course we're going to start by importing deer 10 00:00:36,920 --> 00:00:37,700 react. 11 00:00:37,960 --> 00:00:45,130 We're going to go with import import react and we're looking from react and I'm gonna also close the 12 00:00:45,130 --> 00:00:45,780 sidebar. 13 00:00:45,970 --> 00:00:51,640 Then we're going to import the local cart because initially I would want to use some kind of dummy data 14 00:00:51,640 --> 00:00:52,630 for my cart. 15 00:00:52,750 --> 00:00:54,070 Why would I want to do that. 16 00:00:54,320 --> 00:00:57,300 Well because it's just gonna be easier to set up our methods that way. 17 00:00:57,340 --> 00:00:58,320 So we're going to import. 18 00:00:58,780 --> 00:01:00,780 Then we have a local cart. 19 00:01:00,940 --> 00:01:02,760 Again variables really up to you. 20 00:01:02,760 --> 00:01:05,730 Because I'm importing it as a default. 21 00:01:05,860 --> 00:01:08,080 Essentially I'm also exporting of course as a default. 22 00:01:08,080 --> 00:01:09,830 So you can name this cart. 23 00:01:09,850 --> 00:01:14,230 You can name just wherever you'd want and it is coming from the utilise folder. 24 00:01:14,230 --> 00:01:18,190 So we're going to look in a utility folder and then the file that we're looking for. 25 00:01:18,220 --> 00:01:19,190 He is local card. 26 00:01:19,390 --> 00:01:21,460 So those are gonna be our to import. 27 00:01:21,460 --> 00:01:23,920 Then we're going to set up our context. 28 00:01:23,920 --> 00:01:28,570 So we're gonna go with cart context that is equal to react. 29 00:01:28,570 --> 00:01:32,200 Then we have a create context create context. 30 00:01:32,200 --> 00:01:38,900 Then again we get back our provider our consumer as well as the option of using used context hook. 31 00:01:38,920 --> 00:01:46,360 And now they want to set up a function that again is just gonna use a cart context provider as a return. 32 00:01:46,360 --> 00:01:47,440 And then we're gonna wrap. 33 00:01:47,470 --> 00:01:51,880 Again our application in our component that we're creating right now. 34 00:01:51,940 --> 00:01:59,140 So let's set up a function then let's call this part cart provider. 35 00:01:59,150 --> 00:02:02,120 Now it is going to get a children right away. 36 00:02:02,120 --> 00:02:06,920 So children from since we are going to be wrapping our whole application and then of course we would 37 00:02:06,920 --> 00:02:12,570 want to return then we are returning the cart context then provider. 38 00:02:12,740 --> 00:02:17,030 It has a value for the time being I'm just going to set this equal to Hello. 39 00:02:17,180 --> 00:02:20,200 And then I'm also want to render the children of course. 40 00:02:20,690 --> 00:02:25,310 Otherwise I'm not going to display my application and then eventually I would want to export to things 41 00:02:25,730 --> 00:02:32,340 and export we're going to export cart context as well as cart provider notice are previously we use 42 00:02:32,330 --> 00:02:34,600 the default one and then the name one. 43 00:02:34,610 --> 00:02:41,150 So now in this case both of them are going to be named exports and that's why when we import them we're 44 00:02:41,150 --> 00:02:43,670 also gonna have used to proper name. 45 00:02:43,670 --> 00:02:50,030 Now I'm gonna head over back to my index Jess and then the same way how we work with product provider 46 00:02:50,450 --> 00:02:52,330 we're gonna work with a card provider. 47 00:02:52,600 --> 00:02:58,300 And once I'm in index jury us we're going to copy and paste our import and then instead of looking for 48 00:02:58,300 --> 00:03:04,400 a cart or I'm sorry instead of looking for the product we're gonna be looking for carp provider that 49 00:03:04,400 --> 00:03:09,980 is coming from the cart but of course since I didn't use the default one order so I need to use the 50 00:03:09,990 --> 00:03:16,310 named import in this case again just to show the differences that we can have and then we have a product 51 00:03:16,310 --> 00:03:17,050 provider. 52 00:03:17,140 --> 00:03:23,150 And in this case sequence doesn't matter I just need to make sure that my card provider wraps around 53 00:03:23,150 --> 00:03:24,670 the app which you could wrap. 54 00:03:24,710 --> 00:03:30,860 Also not only the app but also the product provider and in my case I'm going to place it within the 55 00:03:30,860 --> 00:03:31,920 product provider. 56 00:03:31,970 --> 00:03:37,820 Just please remember the most important thing that is you need to make sure that you essentially wrap 57 00:03:38,120 --> 00:03:40,910 your app in the car provider. 58 00:03:40,910 --> 00:03:46,850 I'm gonna save that and then we're gonna head over back to country now we're going to set up some variables 59 00:03:46,940 --> 00:03:52,180 some state variables and we're going to do that again by using the use state. 60 00:03:52,230 --> 00:03:58,070 OK so what variables are we're gonna set up we're going to have cart de total. 61 00:03:58,070 --> 00:04:01,360 So what would be the total value of our cart. 62 00:04:01,400 --> 00:04:07,040 Money wise as well as how many items just to show you where we're gonna use that the card items we're 63 00:04:07,040 --> 00:04:13,470 going to use within the link so organs play how many items we have in a cart as well as the total we're 64 00:04:13,470 --> 00:04:15,890 going to display within the cartridge. 65 00:04:15,890 --> 00:04:21,170 That's the reason why we're setting up three state variables one for card one for total and one for 66 00:04:21,170 --> 00:04:26,840 card items and let's set it up again we're going to use you state so I know I'm gonna get back array 67 00:04:27,260 --> 00:04:33,470 I'm gonna get the card as well as set card since that's going to be the function that controls it and 68 00:04:33,470 --> 00:04:42,830 then we're gonna have a react then use state use state and then like I said before as my initial value 69 00:04:43,090 --> 00:04:48,110 I'm going to pass the local card later on we're going to change this because we're gonna be looking 70 00:04:48,110 --> 00:04:53,900 for the local storage again we're going to cover that later but for the time being let's just passing 71 00:04:53,910 --> 00:04:59,270 the local card if you are interested what is within the local card can just head over there and you 72 00:04:59,270 --> 00:05:04,230 can see that I'm exporting as a default the array and then I just have some dummy items that are going 73 00:05:04,230 --> 00:05:06,570 to help me to set up my methods in the card. 74 00:05:06,740 --> 00:05:11,570 Essentially I'm just going to have some data so that way we can delete we can increase amount decrease 75 00:05:11,570 --> 00:05:17,540 amount as well as added to the card and let's head over again back to card yes because we're not done 76 00:05:17,990 --> 00:05:25,580 let's copy and paste we have two more state values to go one is gonna be total and the method name or 77 00:05:25,580 --> 00:05:29,750 the function name is gonna be total so we're going to be setting total as well as we're going to have 78 00:05:29,750 --> 00:05:38,600 card items some write card items and then we're gonna have set card items set card items for both of 79 00:05:38,600 --> 00:05:41,700 them the initial value is just gonna be zero. 80 00:05:41,780 --> 00:05:47,970 So initially the total for the card is gonna be zero as well as the card items. 81 00:05:47,990 --> 00:05:55,160 So the amount of items I haven't a card is gonna be zero and now I'd like to change my value prop to 82 00:05:55,160 --> 00:06:01,100 in fact have it as a object somewhere said equal to an object and then within the object I would like 83 00:06:01,100 --> 00:06:08,230 to set up three properties card total and card items and again since I know that the value is gonna 84 00:06:08,240 --> 00:06:13,610 be equal to some kind of variable nine which is exactly the same as my property name I can just use 85 00:06:13,610 --> 00:06:18,680 the E6 shorthand where I say cards total and card items. 86 00:06:18,680 --> 00:06:26,210 And lastly just so we can check that everything works we're gonna head over to card page so within the 87 00:06:26,210 --> 00:06:33,650 pages we're looking for card areas then we need to import card context and start using at least use 88 00:06:33,680 --> 00:06:34,270 context. 89 00:06:34,850 --> 00:06:36,610 So let's import again. 90 00:06:36,650 --> 00:06:38,110 This is a named import. 91 00:06:38,150 --> 00:06:42,040 So card context coming from our contacts folder. 92 00:06:42,140 --> 00:06:48,350 So context then we look for the card and then remember in order to access it we need it to use the use 93 00:06:48,440 --> 00:06:49,400 context. 94 00:06:50,090 --> 00:06:52,240 And in this case what values I would like to get out. 95 00:06:52,610 --> 00:06:57,060 Well I'm going to get a total as well as actual card. 96 00:06:57,260 --> 00:06:59,380 So let's see what we're gonna have as a response. 97 00:06:59,480 --> 00:07:00,270 So cost. 98 00:07:00,290 --> 00:07:05,750 I know I'm gonna get back the object I know I would want to get card and total not is gonna be equal 99 00:07:05,750 --> 00:07:13,290 to react use context and we just need to pass in our card context so card context. 100 00:07:13,490 --> 00:07:15,950 And for the time being legit console log. 101 00:07:16,220 --> 00:07:21,210 Let's just say that I would want to console log card as well as total. 102 00:07:21,260 --> 00:07:28,220 Now we're gonna head over to a card page and then in our console we should have an object which we do 103 00:07:28,580 --> 00:07:34,880 and then as far as card items we have three dummy items and then also have a total that is equal to 104 00:07:34,880 --> 00:07:35,470 zero. 105 00:07:35,470 --> 00:07:41,900 So now I can clearly see that our functionally work and now we can expand in the card context. 106 00:07:41,900 --> 00:07:48,020 So add more functionality as well as work on displaying it properly within the cartridge.