1 00:00:00,330 --> 00:00:07,540 OK, so now that we are done with everything, we can check everything in the browser, but right now 2 00:00:07,560 --> 00:00:10,140 the things will not work because this was just the logic. 3 00:00:10,290 --> 00:00:13,650 But we have not yet connected it to ask you why. 4 00:00:14,250 --> 00:00:15,900 So so just the logic part. 5 00:00:16,290 --> 00:00:23,820 And even if you go to the browser and let me take you so the things will not work because the buttons 6 00:00:23,820 --> 00:00:29,960 are not yet been like provided on key functions and also let us just go around into. 7 00:00:31,360 --> 00:00:33,570 And you will understand what I'm trying to say. 8 00:00:34,670 --> 00:00:38,810 OK, so first of all, let us go to the cart item component and let us. 9 00:00:40,560 --> 00:00:43,560 See if things are proper here or. 10 00:00:44,710 --> 00:00:52,600 What, as far as I can see, there are all there are like already things here. 11 00:00:53,500 --> 00:00:57,750 OK, so the thing is we have not yet completed our context, not just here. 12 00:00:57,760 --> 00:01:03,210 We have not yet created any dispatch or actions from here which we will be taking from there to reduce 13 00:01:03,220 --> 00:01:03,370 it. 14 00:01:04,060 --> 00:01:06,070 So let's go ahead and do it first. 15 00:01:06,100 --> 00:01:10,470 So we already have some coordinate and we have imported you stayed. 16 00:01:10,480 --> 00:01:15,940 You have to do serious contact and text and create context from the app. 17 00:01:15,940 --> 00:01:19,330 And we also input the data and the producer everything. 18 00:01:19,990 --> 00:01:28,530 And we have also created the context, and the loading also have been set to next in the app provider. 19 00:01:28,540 --> 00:01:34,000 We are passing the children and the constant state dispatch and we will do producer and the initial 20 00:01:34,000 --> 00:01:34,950 state are also here. 21 00:01:34,960 --> 00:01:44,020 But now let us go ahead and create each function, which we have like tied in the reducer like we need 22 00:01:44,020 --> 00:01:47,230 to call that function from here for. 23 00:01:48,760 --> 00:01:49,770 Always also. 24 00:01:50,350 --> 00:01:53,480 So first of all, we cleared the cons to clear God. 25 00:01:54,660 --> 00:01:58,960 Oh my God. 26 00:02:01,370 --> 00:02:06,050 This is a federal function, no arguments, nothing at all. 27 00:02:09,030 --> 00:02:15,770 And what I tried to do was to make a lot of IPOs, OK, next inside this function will. 28 00:02:17,430 --> 00:02:21,320 Will dispatch now dispatch is what the. 29 00:02:22,310 --> 00:02:25,340 Action, which needs to be dispelled on that particular type. 30 00:02:25,430 --> 00:02:30,890 OK, so despite what dispatch the type, when when the tide? 31 00:02:32,740 --> 00:02:33,640 And the type. 32 00:02:35,140 --> 00:02:42,640 Is clear, card Mia, remember what we told that same thing, clear card. 33 00:02:42,760 --> 00:02:46,270 So to this action, simple, simple, simple. 34 00:02:46,510 --> 00:02:49,840 Next, let's create four remove. 35 00:02:51,820 --> 00:02:57,070 I'm going a little faster here because this is just calling the functions nothing at all. 36 00:02:57,670 --> 00:02:58,540 Simple as that. 37 00:02:58,820 --> 00:03:01,540 Now remove the function with the particular ID. 38 00:03:01,660 --> 00:03:08,880 That is why I'm providing ID in it for dispatch dispatch and why. 39 00:03:08,890 --> 00:03:13,690 Yeah, dispatch what dispatch I. 40 00:03:17,420 --> 00:03:19,630 The bags should be removed. 41 00:03:22,450 --> 00:03:23,620 That that should be. 42 00:03:25,420 --> 00:03:30,280 Remove and payload lowered, should we I.D.. 43 00:03:31,590 --> 00:03:33,240 Below should be it. 44 00:03:34,110 --> 00:03:38,190 And next, we'll have the increase in the degrees. 45 00:03:39,330 --> 00:03:41,670 Those simple bonds. 46 00:03:43,670 --> 00:03:52,400 Increase is equal to a fair total function, and it will expect an I.D. like which product you want 47 00:03:52,400 --> 00:03:55,100 to increase or decrease, so. 48 00:03:56,990 --> 00:03:57,470 Why? 49 00:04:01,870 --> 00:04:02,120 OK. 50 00:04:02,530 --> 00:04:05,590 Inside this inside, Chris will add another dispatch. 51 00:04:06,430 --> 00:04:11,440 Maybe we can just copy this line because we are repeating it for so, so many times. 52 00:04:12,370 --> 00:04:15,000 It will copy and paste this particular line here. 53 00:04:15,030 --> 00:04:22,850 So dispatch type is an order to move is increase increase and the payload, it should be the ready. 54 00:04:23,200 --> 00:04:25,730 Same goes with the decrease. 55 00:04:26,200 --> 00:04:28,000 We'll just change the name. 56 00:04:28,840 --> 00:04:33,070 And that will be decrease. 57 00:04:34,980 --> 00:04:43,680 It is paused dispatch I would with degrees the spring, which will be degrees and the payload will be 58 00:04:43,680 --> 00:04:48,990 sent alight next after the degrees will fetch the data from the API. 59 00:04:49,020 --> 00:04:54,120 Now what we were doing so far is we were getting the data from a local system. 60 00:04:54,630 --> 00:04:56,280 I created the media folder. 61 00:04:56,280 --> 00:05:00,360 I provided the images, the title, the price to the product. 62 00:05:00,360 --> 00:05:01,530 Everything was local. 63 00:05:01,950 --> 00:05:05,470 But now let me just grab the data from an external API. 64 00:05:05,510 --> 00:05:10,320 OK, before that, I need to provide you all, or you can call it an end point. 65 00:05:10,720 --> 00:05:16,680 Basically, whatever the data which we grab from you all so that you are known as the end point or the 66 00:05:16,680 --> 00:05:17,670 API endpoint. 67 00:05:17,790 --> 00:05:20,550 So we'll create that contest. 68 00:05:21,300 --> 00:05:30,390 You are all is equal to oh, let me just copy and paste this URL because they're just so big and that 69 00:05:30,390 --> 00:05:32,250 is this right here is. 70 00:05:36,010 --> 00:05:36,390 Okay. 71 00:05:37,180 --> 00:05:43,810 So, yeah, this one right here and we were already going into the African context and all. 72 00:05:43,990 --> 00:05:46,270 So after the decrees. 73 00:05:47,710 --> 00:05:54,880 Now will create will further data using the async function, not async function, if you don't have 74 00:05:54,880 --> 00:05:56,210 any idea, let me just tell you. 75 00:05:57,460 --> 00:06:04,120 Well, I've already discussed about async function in one of the products solid projects, not products, 76 00:06:04,810 --> 00:06:07,960 products, project products, async. 77 00:06:09,450 --> 00:06:10,470 Like async and await. 78 00:06:11,570 --> 00:06:12,590 These are. 79 00:06:14,030 --> 00:06:20,600 The soul of the script when it comes to grabbing the data from an API dispatch. 80 00:06:21,980 --> 00:06:24,890 And that would be the type. 81 00:06:27,320 --> 00:06:33,740 And it will be said to loading when the total, when the data is being grabbed from the API is the date 82 00:06:33,980 --> 00:06:38,150 for the state in the state, looting will be set to true. 83 00:06:38,220 --> 00:06:38,540 Right. 84 00:06:39,080 --> 00:06:45,110 So now concrete response on this response. 85 00:06:46,330 --> 00:06:47,960 Now this is a it now. 86 00:06:50,070 --> 00:06:51,330 But you are telling. 87 00:06:56,730 --> 00:06:57,450 Bad enough. 88 00:06:58,430 --> 00:07:01,500 OK, I made a typo that was not a notability. 89 00:07:03,150 --> 00:07:05,100 Yeah, now we'll. 90 00:07:06,270 --> 00:07:12,960 Creates another concern that the guard and, of course, will given away to it. 91 00:07:15,480 --> 00:07:21,180 It means what I want is just simple, like whenever the execution comes from the top and it's coming 92 00:07:21,180 --> 00:07:24,990 and it's coming and it's coming and when the dollar collapses, oh, he has given away. 93 00:07:25,200 --> 00:07:31,040 So that means I'm telling the script, Hey, I was going, I've given you, wait, wait, you guys, 94 00:07:31,290 --> 00:07:34,890 I'm grabbing this data from an external Libya or I'm doing whatever. 95 00:07:35,130 --> 00:07:38,310 You can just go for there and you can just check if we have any other work. 96 00:07:38,550 --> 00:07:43,410 And until then, I will grab the data and I will finish my operation and then you can come back to me 97 00:07:43,410 --> 00:07:45,870 and see if my work is done or not. 98 00:07:46,090 --> 00:07:48,640 Either way, it means simple that isn't going away. 99 00:07:48,670 --> 00:07:54,270 It is all about that, like giving the telling the script that, Hey, wait, I'm doing something, 100 00:07:54,270 --> 00:07:56,100 I'm grabbing the data from another source. 101 00:07:56,430 --> 00:07:58,170 And then, can you just do another work? 102 00:07:58,410 --> 00:08:00,300 Assemble in the simple language. 103 00:08:00,510 --> 00:08:05,740 Now, if you go to the documentation and if you see that it would be in more detail, you can just google 104 00:08:05,740 --> 00:08:07,260 it async and it in Dallas could. 105 00:08:07,470 --> 00:08:08,800 But the basic principle is this. 106 00:08:08,820 --> 00:08:12,030 OK, so that's all you need to know for this project, OK? 107 00:08:12,900 --> 00:08:19,620 So after this, the court will await the response and we'll provide dart juice. 108 00:08:19,620 --> 00:08:26,100 And now the response which we have grab from the PatchWall can be in any format. 109 00:08:26,370 --> 00:08:33,060 So now we want to create that response into the adjacent format because the API, because the data which 110 00:08:33,060 --> 00:08:37,140 we fetch from the API generally should be in the JSON format. 111 00:08:37,140 --> 00:08:42,270 And if it's not, we can convert it by giving the dart JSON dysfunction. 112 00:08:42,300 --> 00:08:43,470 OK, so Dodgson. 113 00:08:43,980 --> 00:08:46,260 So now the data will be created in the different format. 114 00:08:46,870 --> 00:08:47,340 Simple. 115 00:08:48,520 --> 00:08:52,510 Now, the dispatch dispatch. 116 00:08:55,360 --> 00:08:58,780 Now, this expert's argument that the type. 117 00:09:00,010 --> 00:09:04,240 I would be display items. 118 00:09:10,720 --> 00:09:12,460 And the payload will be caught. 119 00:09:17,530 --> 00:09:17,980 Got. 120 00:09:21,920 --> 00:09:22,460 Who? 121 00:09:26,470 --> 00:09:27,610 After this. 122 00:09:28,610 --> 00:09:31,190 We'll provide a semicolon and. 123 00:09:33,340 --> 00:09:39,670 Now will create the toggle amount like whenever we. 124 00:09:41,190 --> 00:09:45,480 But it is something or we add something to a card, so that time. 125 00:09:47,180 --> 00:09:50,510 The amount should be affected by our actions, right? 126 00:09:51,720 --> 00:09:54,930 So that is what I'm doing here. 127 00:09:58,730 --> 00:09:59,150 Simple. 128 00:10:01,390 --> 00:10:02,620 Now we'll dispatch. 129 00:10:04,260 --> 00:10:05,070 And. 130 00:10:07,960 --> 00:10:12,940 The Typekit withdrawal among I will be. 131 00:10:15,830 --> 00:10:16,670 Toggle. 132 00:10:18,100 --> 00:10:22,030 Amount and there will be a payload. 133 00:10:23,790 --> 00:10:25,020 So that would be. 134 00:10:26,520 --> 00:10:27,450 Best type. 135 00:10:29,130 --> 00:10:29,870 OK. 136 00:10:30,300 --> 00:10:31,530 That's it for this. 137 00:10:31,560 --> 00:10:36,270 Now let us create a use effect. 138 00:10:38,150 --> 00:10:44,000 Use effect for providing this data on loading the page. 139 00:10:45,930 --> 00:10:48,690 OK, so here. 140 00:10:50,590 --> 00:10:54,310 Scientists will call the fatty data. 141 00:10:57,100 --> 00:11:03,760 But data and will provide an empty area. 142 00:11:05,710 --> 00:11:10,510 Now I've already once I explained the what is the use effect now? 143 00:11:10,770 --> 00:11:15,640 It simply means that whenever we load the day, we whenever we load the page. 144 00:11:15,880 --> 00:11:20,080 So this data functions should be executed as simple as that. 145 00:11:20,470 --> 00:11:23,380 Now the dependency array is empty here. 146 00:11:23,380 --> 00:11:26,980 That means this will load for the very first time and that is some date. 147 00:11:27,100 --> 00:11:33,100 That is some variable inside their dependency, and that means that the function is dependent on their 148 00:11:33,100 --> 00:11:33,790 dependency. 149 00:11:34,270 --> 00:11:39,520 Like, whenever the whenever the variable will change, so then the then the function will be executed. 150 00:11:39,520 --> 00:11:39,730 OK? 151 00:11:39,970 --> 00:11:41,550 So fetch data and. 152 00:11:43,220 --> 00:11:52,190 That search for the youth affected will create one more after this, and that will be used a fact and 153 00:11:53,310 --> 00:11:56,030 the fact, of course, there will be a function. 154 00:11:57,030 --> 00:11:57,600 What? 155 00:11:58,130 --> 00:11:58,550 Yes. 156 00:11:59,650 --> 00:12:01,630 So use effect and. 157 00:12:03,800 --> 00:12:05,780 Inside this will dispatch. 158 00:12:08,130 --> 00:12:08,970 Dispatch. 159 00:12:10,600 --> 00:12:15,550 And the type would be type get total. 160 00:12:20,030 --> 00:12:21,740 That totals and. 161 00:12:22,940 --> 00:12:27,200 The dependency area will be the third dot cart. 162 00:12:27,500 --> 00:12:34,940 Now what dependency array will do like whatever is present inside this dependency, whatever the variable 163 00:12:34,940 --> 00:12:37,490 is present now, whenever this variable will change. 164 00:12:37,700 --> 00:12:39,770 So this dispatch will be executed. 165 00:12:39,780 --> 00:12:42,860 OK, who will write state? 166 00:12:44,410 --> 00:12:46,930 The state will. 167 00:12:48,340 --> 00:12:48,710 God. 168 00:12:49,610 --> 00:12:58,880 OK, so we are done with the use effect and inside that is done now instead of this date. 169 00:12:59,750 --> 00:13:05,440 We'll provide some other variables like like along the street. 170 00:13:05,450 --> 00:13:13,100 There should be some other value that needs to be passed as a prop, as a prop inside this Waterloo 171 00:13:13,730 --> 00:13:21,890 bill passed the clear whatever we have created so far, all that just passes up Bossert as a prop inside 172 00:13:21,890 --> 00:13:22,880 this component. 173 00:13:22,880 --> 00:13:24,740 As simple as that regard. 174 00:13:26,270 --> 00:13:27,500 Next, I remove. 175 00:13:29,090 --> 00:13:31,940 Don't make any type of that's very important. 176 00:13:33,440 --> 00:13:35,720 Increase decrease. 177 00:13:39,520 --> 00:13:41,500 And the total amount. 178 00:13:43,580 --> 00:13:48,440 Boggles the amount, you know, let's save it, and I hope we don't see any error. 179 00:13:48,770 --> 00:13:51,110 OK, so would we have not seen any other? 180 00:13:51,650 --> 00:13:54,170 Let me go here and let me rephrase the page. 181 00:13:54,770 --> 00:13:56,830 OK, the loading is being displayed. 182 00:13:56,840 --> 00:13:58,760 OK, guys, so here we are. 183 00:13:59,240 --> 00:14:02,390 We are seeing all of the changes which we make. 184 00:14:02,390 --> 00:14:04,970 We are getting the data from the external API we are getting. 185 00:14:04,970 --> 00:14:11,700 They made this title and the price and and but we can't see the quantity. 186 00:14:11,720 --> 00:14:14,210 So let me just go ahead and tune this. 187 00:14:14,990 --> 00:14:21,050 First of all, let me change this for a moment because the amount is being shown to us in the US dollars 188 00:14:21,050 --> 00:14:26,720 and above to create converted into the Indian rupees. 189 00:14:27,190 --> 00:14:35,300 So just now, one of my friend told me that the amount of one point seventy five rupees for I will multiply 190 00:14:35,300 --> 00:14:38,740 that value from seventy five and that will be converted. 191 00:14:38,750 --> 00:14:46,460 So let me first find out where that is being an index, of course, that will be in the guide item and 192 00:14:47,870 --> 00:14:50,180 where is the amount? 193 00:14:52,160 --> 00:14:53,060 Okay. 194 00:14:53,090 --> 00:14:54,560 Okay, so. 195 00:14:58,550 --> 00:14:59,180 Come on. 196 00:15:00,360 --> 00:15:01,090 Our container. 197 00:15:03,260 --> 00:15:05,210 Your wish list is a long. 198 00:15:05,420 --> 00:15:13,280 So I'll multiply it by by what, seventy five, because one, one point seventy five it'll be. 199 00:15:13,280 --> 00:15:17,450 So when I save it, I guess the changes will be reflected. 200 00:15:18,630 --> 00:15:21,240 And look, no. 201 00:15:22,730 --> 00:15:24,180 OK, I think the screen was dark. 202 00:15:24,200 --> 00:15:25,100 Let me repeat it again. 203 00:15:25,280 --> 00:15:30,650 I've just multiplied seventy five here with the total amount so that we see are. 204 00:15:32,260 --> 00:15:34,020 The currency in Indian rupee is that. 205 00:15:34,870 --> 00:15:35,470 And. 206 00:15:38,180 --> 00:15:40,910 When refresh, nothing happens. 207 00:15:42,100 --> 00:15:44,230 Why, why is that happening? 208 00:15:46,790 --> 00:15:48,740 OK, so that was the total amount. 209 00:15:49,310 --> 00:15:54,830 But we want to show it individually so that this inside the card item, so we'll multiply that here 210 00:15:54,830 --> 00:15:57,320 in the price seventy five. 211 00:15:57,920 --> 00:16:06,710 And one more thing that was missing is that in between the increase in degrees, there was no there 212 00:16:06,710 --> 00:16:09,980 was no like the number, the quantity was not there. 213 00:16:10,550 --> 00:16:15,590 So that we'll see when in between this increase and decrease. 214 00:16:16,130 --> 00:16:20,060 So that is the two that should be the amount. 215 00:16:21,050 --> 00:16:24,560 That is so simple, so I'll just add one line here. 216 00:16:26,160 --> 00:16:27,150 And we'll save it. 217 00:16:28,950 --> 00:16:31,860 And now when we go to the browser and see, yeah. 218 00:16:32,910 --> 00:16:37,530 Who certainly fresh again to see if things are going on. 219 00:16:38,010 --> 00:16:41,940 Yeah, let me see the total, yeah, total is also going on. 220 00:16:42,750 --> 00:16:45,900 OK, guys, let me see you remove if I can remove ya. 221 00:16:45,930 --> 00:16:47,790 Let me see if we can clear the card. 222 00:16:48,690 --> 00:16:50,310 OK, the clear card is not working. 223 00:16:51,360 --> 00:16:53,370 Let me ask why it's not working. 224 00:16:54,500 --> 00:16:56,600 So that is a clear card. 225 00:16:58,490 --> 00:16:59,140 Maybe he'll. 226 00:17:00,730 --> 00:17:03,860 OK, because we have not added the functionality to the clear card. 227 00:17:03,910 --> 00:17:06,880 OK, so inside the card container, that is. 228 00:17:08,650 --> 00:17:15,430 Your card, so will, first of all, will import the global, we've already put the global stage, so 229 00:17:15,430 --> 00:17:17,740 here will be for the clear car. 230 00:17:19,090 --> 00:17:22,210 Earlier, but I hope this is the spelling. 231 00:17:25,480 --> 00:17:27,250 We believe this. 232 00:17:28,540 --> 00:17:30,580 And we just try to clear the card. 233 00:17:32,710 --> 00:17:34,060 Here and let me see if. 234 00:17:36,300 --> 00:17:42,330 And let me just go to the browser and see how things are being cleared. 235 00:17:42,600 --> 00:17:45,750 OK, guys, we have completed the project, so this was the project. 236 00:17:45,750 --> 00:17:47,550 I hope you guys learned a lot. 237 00:17:47,970 --> 00:17:53,790 You know, you might have learned thought you said you state use context, how to create global context, 238 00:17:53,790 --> 00:17:59,250 how to fetch data from the external API, and how to map the data within different, different components. 239 00:17:59,250 --> 00:18:01,110 How to share data within the components. 240 00:18:01,470 --> 00:18:03,270 And that was it for the video. 241 00:18:03,510 --> 00:18:06,030 Thank you so much, and I hope you've learned a lot. 242 00:18:06,300 --> 00:18:06,680 Thank you.