1 00:00:00,150 --> 00:00:06,840 All right, and we already know the drill, so I'll open up localhost three thousand just so we can 2 00:00:06,840 --> 00:00:11,970 have the big screen as well, and then we're navigating back to our project. 3 00:00:12,210 --> 00:00:13,680 We would want to stop the server. 4 00:00:13,710 --> 00:00:17,240 Of course, that's number one and navigate back to the road. 5 00:00:17,700 --> 00:00:20,400 And then I'll clear my terminal. 6 00:00:20,880 --> 00:00:28,080 And I'm just going to say that I would want to navigate to the setup folder now of this particular set 7 00:00:28,080 --> 00:00:34,350 of folder in here is going to be a bit different than the previous ones just because I already prepared 8 00:00:34,500 --> 00:00:36,580 somewhat a lot of stuff for you. 9 00:00:37,050 --> 00:00:46,140 Now, the reason why I did that is because I exclusively wanted to focus on the use of a user, how 10 00:00:46,200 --> 00:00:50,180 to data, how to set up functionality and all of that stuff. 11 00:00:50,580 --> 00:00:56,520 And I didn't see the point of creating everything from scratch because then, of course, we would spend 12 00:00:57,300 --> 00:00:59,210 way more time on the project. 13 00:00:59,220 --> 00:01:02,070 And I didn't want this project to be three hours long. 14 00:01:02,370 --> 00:01:09,360 Well, that's why when you spin up the set up, you'll notice that a lot of UI is already prepared for 15 00:01:09,360 --> 00:01:09,510 you. 16 00:01:09,750 --> 00:01:12,720 Now, don't worry, of course, we will work on the functionality. 17 00:01:12,990 --> 00:01:17,900 But as far as the look, yes, I prepared a lot of stuff already for you. 18 00:01:18,420 --> 00:01:26,330 So the first video we're going to spend going over the setup, just so we all are on the same page. 19 00:01:26,670 --> 00:01:32,940 And then of course, we'll start working with users user not not on the functionality work so you can 20 00:01:32,940 --> 00:01:36,750 click on all the buttons and nothing is going to happen. 21 00:01:37,170 --> 00:01:41,490 And if we take a look at the project, we'll start with Contact Jass. 22 00:01:41,880 --> 00:01:48,510 So I'll close the terminal and we should be already familiar with the context since we have created 23 00:01:48,510 --> 00:01:49,310 quite a few times. 24 00:01:49,620 --> 00:01:55,200 So we have the app provider that of course returns the app context and then that provider. 25 00:01:55,620 --> 00:02:00,290 And then of course I have the value prop where I'm returning the card. 26 00:02:00,690 --> 00:02:05,960 Now, at the moment, card is a state value using use state. 27 00:02:06,360 --> 00:02:13,050 So essentially it is an array and I'm just passing in hard coded items from the file called data. 28 00:02:13,320 --> 00:02:18,210 And if you take a look at the data, it is just going to be an array of items. 29 00:02:18,510 --> 00:02:26,130 And yes, don't worry, eventually when we set up user user, we will fetch this data from the API. 30 00:02:26,400 --> 00:02:32,440 But for the time being it is just an array of items where we have the array, we have the title price 31 00:02:32,700 --> 00:02:35,070 as well as the image and then the amount. 32 00:02:35,550 --> 00:02:40,200 So what is the amount of items in the car? 33 00:02:40,680 --> 00:02:41,790 OK, good. 34 00:02:42,120 --> 00:02:49,080 Then of course in the context, eventually we set up the huge global context or however you want to 35 00:02:49,080 --> 00:02:50,370 call your custom hook. 36 00:02:50,720 --> 00:02:53,070 So my guess of course, is use global context. 37 00:02:53,360 --> 00:02:59,910 Then I return to use context and pass in the app context, and then I export the app context as well 38 00:02:59,910 --> 00:03:01,320 as app provider. 39 00:03:01,800 --> 00:03:09,960 And of course, in the index jass, you'll notice that we import a provider and then I wrap my whole 40 00:03:09,960 --> 00:03:17,370 up my app component in the app provider, and then we can take a look at the app Jazz, where of course 41 00:03:17,370 --> 00:03:18,390 we have two components. 42 00:03:18,390 --> 00:03:24,090 We have the number as well as card container and we import that use global context. 43 00:03:24,360 --> 00:03:28,220 So eventually there will be a loading as well. 44 00:03:28,500 --> 00:03:35,310 So that's why I have commented out, because eventually we will grab the loading value from the context. 45 00:03:35,520 --> 00:03:40,380 And then if we're loading, essentially if we're fetching better, then of course we'll display loading. 46 00:03:40,590 --> 00:03:46,080 And then once we've got there, then of course we return our app, which is going to be the main element 47 00:03:46,080 --> 00:03:49,510 with our two component number and card container. 48 00:03:49,800 --> 00:03:55,770 So let me refresh so we can see our current application in a smaller browser window. 49 00:03:56,100 --> 00:04:02,730 And then if we take a look at the number, essentially we're going to have some kind of return, which 50 00:04:02,730 --> 00:04:06,720 is going to be now and then a little bit of stalling on everything else. 51 00:04:07,080 --> 00:04:12,990 And then in here, you'll notice that for the icon in this case, I'm using the SPG. 52 00:04:13,290 --> 00:04:19,950 So this is just the showcase that, of course, you don't need to always use the react icons if you 53 00:04:19,950 --> 00:04:20,480 don't want to. 54 00:04:20,730 --> 00:04:24,880 If, for example, you prefer using an SPG, you can definitely do that. 55 00:04:25,050 --> 00:04:26,700 So can I just out of the second. 56 00:04:26,940 --> 00:04:30,190 So now of course it is displayed on screen. 57 00:04:30,400 --> 00:04:30,800 All right. 58 00:04:31,050 --> 00:04:36,030 And then in here, eventually this will be dynamic where at the moment it is hard coded volume. 59 00:04:36,750 --> 00:04:39,840 So we have the paragraph with some kind of amount. 60 00:04:40,200 --> 00:04:42,650 I just hard coded to be three dimensional. 61 00:04:42,690 --> 00:04:43,940 Of course, this will be dynamic. 62 00:04:43,950 --> 00:04:50,160 So as we're changing the amount of items in the cart or removing the cart or we're clearing the cart, 63 00:04:50,490 --> 00:04:52,140 of course this will also change. 64 00:04:52,510 --> 00:04:55,260 That's why we write or import use global context. 65 00:04:55,650 --> 00:04:59,460 So we'll hook it up to the global context and then that way it will always be. 66 00:04:59,660 --> 00:05:08,480 Sync with our data that we have the card container where we import the car currently, so we're grabbing 67 00:05:08,750 --> 00:05:14,510 the EU's global context and then I say, yeah, I would want to get the cart because remember, in the 68 00:05:14,510 --> 00:05:16,100 context, we're sharing the cart. 69 00:05:16,340 --> 00:05:23,510 And then if the cart length is zero, then which is display that, you know what, your cart is currently 70 00:05:23,720 --> 00:05:30,890 empty, which we will see later when we set up the actual functionality and then if the court has some 71 00:05:30,890 --> 00:05:31,220 length. 72 00:05:31,580 --> 00:05:36,740 So essentially, if there are some items in the court, of course, we have the section with a cart 73 00:05:36,920 --> 00:05:43,550 and then we have some kind of title and then we have the define where we iterate over the items and 74 00:05:43,550 --> 00:05:44,980 then we display the cart item. 75 00:05:45,290 --> 00:05:47,390 So I'll show you the cart item in a second. 76 00:05:47,690 --> 00:05:54,680 But just to complete this particular component, we also have the footer where we have the total, which 77 00:05:54,680 --> 00:05:56,810 again is just hardcoded for now. 78 00:05:57,170 --> 00:06:00,860 Eventually it will be in sync with our context. 79 00:06:01,130 --> 00:06:08,300 And then, of course, we have the clear button at the moment, just logs clearcut and you can probably 80 00:06:08,300 --> 00:06:13,520 already guess that, yes, eventually there will be functionality where we can clear out the cart. 81 00:06:13,850 --> 00:06:20,740 And the last component that I want to show is the cart item when essentially we iterate over our cart. 82 00:06:20,750 --> 00:06:21,190 All right. 83 00:06:21,200 --> 00:06:25,760 And then for every item, we return the cart item and then, of course, we need to have a key. 84 00:06:25,970 --> 00:06:29,540 And then I spread out the properties that I have in the item. 85 00:06:29,900 --> 00:06:34,790 Again, if you want to double check those properties, you can find them in data and it has title price 86 00:06:34,860 --> 00:06:38,930 image on them up again, something we have done already quite a few times. 87 00:06:39,200 --> 00:06:45,350 So I just thought that I can save you some time on setting up the boilerplate sern here. 88 00:06:45,350 --> 00:06:46,670 I'm grabbing those values. 89 00:06:46,670 --> 00:06:47,840 I would like to get the image. 90 00:06:47,840 --> 00:06:49,940 I would like to get the title price animal. 91 00:06:50,270 --> 00:06:55,340 I also would want to get the idea because we will use that idea for our functionality. 92 00:06:55,700 --> 00:06:59,720 And then I'm returning the article inside the article to have the image. 93 00:06:59,960 --> 00:07:01,340 I have some kind of title. 94 00:07:01,550 --> 00:07:03,080 I have the price. 95 00:07:03,350 --> 00:07:04,490 Of course, there it is. 96 00:07:04,730 --> 00:07:10,910 And then we have removed button, which at the moment just console logs, remove again functionalities 97 00:07:10,910 --> 00:07:11,390 coming up. 98 00:07:11,720 --> 00:07:17,660 And then of course we have the amount button here and then we have again the SPG. 99 00:07:17,750 --> 00:07:22,790 So instead of setting up the icons, I just went with inline SPG again. 100 00:07:23,120 --> 00:07:28,040 Then we have the actual amount, which of course eventually will change the moment. 101 00:07:28,040 --> 00:07:32,270 It is just one and then we have the button as well. 102 00:07:32,690 --> 00:07:35,710 That should conclude the overview of our setup. 103 00:07:35,990 --> 00:07:40,610 And of course we can start setting up use a reduced functionality.