1 00:00:02,100 --> 00:00:03,100 Now at the moment, 2 00:00:03,100 --> 00:00:05,420 I'm sending this Http request 3 00:00:05,420 --> 00:00:07,800 and I'm not doing anything with the response 4 00:00:07,800 --> 00:00:11,060 and I'm also not handling potential errors. 5 00:00:11,060 --> 00:00:14,750 That's of course something which we might wanna avoid. 6 00:00:14,750 --> 00:00:17,910 Now, to handle the response and potential errors, 7 00:00:17,910 --> 00:00:19,510 I edit a new component, 8 00:00:19,510 --> 00:00:21,840 which you'll find attached in a zip file, 9 00:00:21,840 --> 00:00:23,170 the notification component 10 00:00:23,170 --> 00:00:25,653 which you should put into your UI folder. 11 00:00:26,640 --> 00:00:28,130 It's a simple component 12 00:00:28,130 --> 00:00:30,440 that displays a title and the message 13 00:00:30,440 --> 00:00:33,210 and that can assume different CSS classes 14 00:00:33,210 --> 00:00:35,220 based on a status prop. 15 00:00:35,220 --> 00:00:37,980 And then it's simply a little a bar at the top 16 00:00:37,980 --> 00:00:39,180 which will show up, 17 00:00:39,180 --> 00:00:42,020 which can either say something like sending request, 18 00:00:42,020 --> 00:00:45,280 or once it's done it can tell us if it was a success 19 00:00:45,280 --> 00:00:47,410 or if we have an error. 20 00:00:47,410 --> 00:00:51,170 Now, to use it with our current approach in App.js, 21 00:00:51,170 --> 00:00:55,760 here on fetch, we can simply add then or we use async await. 22 00:00:55,760 --> 00:00:57,560 Since we were in use effect though, 23 00:00:57,560 --> 00:01:00,140 we should not add async here, 24 00:01:00,140 --> 00:01:02,890 but instead wrapped us in a separate fetch then 25 00:01:02,890 --> 00:01:04,730 and that's actually what I'll do here 26 00:01:04,730 --> 00:01:06,310 so I'll add a new function here. 27 00:01:06,310 --> 00:01:10,860 Instead of user fact send cart data. 28 00:01:10,860 --> 00:01:15,760 It's a simple function which will hold this code 29 00:01:15,760 --> 00:01:18,250 but it's now asynchronous. 30 00:01:18,250 --> 00:01:21,930 So we can await this to get our response. 31 00:01:21,930 --> 00:01:24,050 And then when we get the response here 32 00:01:24,050 --> 00:01:28,860 we can get our response data 33 00:01:28,860 --> 00:01:33,763 by waiting response dot Jason like this. 34 00:01:34,900 --> 00:01:39,200 And we can also check if the response maybe not okay. 35 00:01:39,200 --> 00:01:41,440 And if it's not okay, we have an errors. 36 00:01:41,440 --> 00:01:45,830 So then we might want to throw a new error here. 37 00:01:45,830 --> 00:01:50,250 Where we say, sending cart data failed 38 00:01:50,250 --> 00:01:51,513 or anything like this. 39 00:01:52,550 --> 00:01:54,560 If we make it past this line 40 00:01:54,560 --> 00:01:56,880 however we know that we were successful. 41 00:01:56,880 --> 00:01:58,550 And then we know that we, 42 00:01:58,550 --> 00:02:02,990 well should show that success notification. 43 00:02:02,990 --> 00:02:04,840 And actually we also want to show 44 00:02:04,840 --> 00:02:06,840 the notification right from the start 45 00:02:06,840 --> 00:02:08,870 when we start sending. 46 00:02:08,870 --> 00:02:11,650 Now for this we could import use state 47 00:02:11,650 --> 00:02:15,160 and set up some local state and this component, 48 00:02:15,160 --> 00:02:19,340 some is loading state and maybe an error state. 49 00:02:19,340 --> 00:02:21,710 And we set dose States 50 00:02:21,710 --> 00:02:25,540 as part of our Http requests cycle here. 51 00:02:25,540 --> 00:02:28,430 And we then use those states to conditionally 52 00:02:28,430 --> 00:02:30,550 rendered the notification component 53 00:02:30,550 --> 00:02:33,300 with the appropriate content. 54 00:02:33,300 --> 00:02:34,700 We could do all of that, 55 00:02:34,700 --> 00:02:36,370 there would be nothing wrong with that 56 00:02:36,370 --> 00:02:39,470 and it would be a good way of handling this. 57 00:02:39,470 --> 00:02:43,980 But since we already have a UI slice here in Redux 58 00:02:43,980 --> 00:02:46,030 why not use that? 59 00:02:46,030 --> 00:02:48,300 Why don't we add more to the state 60 00:02:48,300 --> 00:02:50,350 we're managing here with Redux 61 00:02:50,350 --> 00:02:52,440 and we managed the notification, 62 00:02:52,440 --> 00:02:55,920 which we're showing with help of Redux now. 63 00:02:55,920 --> 00:02:58,830 For this I'll add a notification property 64 00:02:58,830 --> 00:03:02,250 to initial state and I'll set it to null initially, 65 00:03:02,250 --> 00:03:04,943 so that initially we have no notification. 66 00:03:05,850 --> 00:03:08,730 But then we can add a new reducer 67 00:03:08,730 --> 00:03:11,740 which we could call set notification 68 00:03:11,740 --> 00:03:14,600 or show notification maybe, 69 00:03:14,600 --> 00:03:16,610 where we get our state 70 00:03:16,610 --> 00:03:18,780 and where we also use the action 71 00:03:18,780 --> 00:03:21,600 because I expect some action payload here 72 00:03:21,600 --> 00:03:25,050 because the kind of notification that should be shown 73 00:03:25,050 --> 00:03:27,913 should be encoded in the action as a payload. 74 00:03:28,820 --> 00:03:31,440 And we then there for a set state notification equal 75 00:03:31,440 --> 00:03:33,120 to an object let's say, 76 00:03:33,120 --> 00:03:34,640 of course the exact structure 77 00:03:34,640 --> 00:03:37,010 is up to you since it's your code. 78 00:03:37,010 --> 00:03:38,840 But also to an object 79 00:03:38,840 --> 00:03:41,060 where I have a status key 80 00:03:41,060 --> 00:03:43,560 which I expect to get from my action payload. 81 00:03:43,560 --> 00:03:47,050 Let's say dear, we all expect the status property 82 00:03:47,050 --> 00:03:48,610 and status could be something 83 00:03:48,610 --> 00:03:51,653 like pending error and success. 84 00:03:52,490 --> 00:03:55,330 And then we also expect a title let's say 85 00:03:55,330 --> 00:04:00,020 which we also get from the action payload and a message 86 00:04:00,020 --> 00:04:01,600 which we all know I expect 87 00:04:01,600 --> 00:04:04,240 as a property on the action payload. 88 00:04:04,240 --> 00:04:07,123 So we set our notification to such an object. 89 00:04:08,450 --> 00:04:12,400 Now we want to dispatch does show notification action 90 00:04:12,400 --> 00:04:14,740 when we start sending the data 91 00:04:14,740 --> 00:04:18,053 when we're done with the data and if we have an error. 92 00:04:19,050 --> 00:04:24,050 So therefore we can import use dispatch from React Redux 93 00:04:24,410 --> 00:04:27,190 to get access to that dispatch function 94 00:04:27,190 --> 00:04:29,910 by executing use dispatch. 95 00:04:29,910 --> 00:04:34,910 And we import our UI actions from store, UI slice. 96 00:04:40,310 --> 00:04:44,550 And then, and here in user fact, when we sent the card data 97 00:04:44,550 --> 00:04:49,550 we initially dispatch UI action start show notification 98 00:04:50,270 --> 00:04:53,140 and pass an object to show notification 99 00:04:53,140 --> 00:04:56,060 where we set the status to pending let's say, 100 00:04:56,060 --> 00:04:57,340 because we're currently saying 101 00:04:57,340 --> 00:05:01,520 sending the request, the title to sending maybe 102 00:05:02,940 --> 00:05:07,940 and let's say the message to sending cart data. 103 00:05:09,260 --> 00:05:13,173 That could be the, the notification we wanna set now. 104 00:05:14,150 --> 00:05:17,510 Now I also want to dispatch an action once we're done. 105 00:05:17,510 --> 00:05:19,900 So once we got the response data. 106 00:05:19,900 --> 00:05:23,480 I actually don't care about the response data in this case, 107 00:05:23,480 --> 00:05:25,060 because for sending the card 108 00:05:25,060 --> 00:05:27,220 I'm not interested in any response. 109 00:05:27,220 --> 00:05:30,170 So we don't even need to get to the response data 110 00:05:30,170 --> 00:05:33,520 instead knowing that we don't have an error is enough. 111 00:05:33,520 --> 00:05:36,630 So then I want to dispatch a new notification 112 00:05:36,630 --> 00:05:38,930 where the status is success 113 00:05:38,930 --> 00:05:41,350 and it should be success because I'm using 114 00:05:41,350 --> 00:05:43,650 that instead of the notification component 115 00:05:43,650 --> 00:05:47,310 then to adjust the CSS classes. 116 00:05:47,310 --> 00:05:49,400 So I'll set it to success, 117 00:05:49,400 --> 00:05:51,970 have a title of success maybe. 118 00:05:51,970 --> 00:05:56,003 And then we could say sent cart data successfully. 119 00:05:57,680 --> 00:06:00,560 Now, if we have an error, I also wanna dispatch 120 00:06:00,560 --> 00:06:03,810 and I'll do that instead of throwing an error 121 00:06:03,810 --> 00:06:08,320 I'll instead dispatch a new action where I say error 122 00:06:09,370 --> 00:06:11,630 and then have error here as well. 123 00:06:11,630 --> 00:06:16,630 And here we could say, sending cart data failed, like this. 124 00:06:17,310 --> 00:06:20,560 Now this will not handle all kinds of errors though 125 00:06:20,560 --> 00:06:22,520 because we could also have an error 126 00:06:22,520 --> 00:06:24,600 from some other part in this code 127 00:06:24,600 --> 00:06:28,120 instead of just having an invalid response status. 128 00:06:28,120 --> 00:06:30,320 And therefore I'll actually cut this 129 00:06:30,320 --> 00:06:32,600 and go back to throw new error 130 00:06:33,760 --> 00:06:37,750 and simply go below this send cart data function 131 00:06:37,750 --> 00:06:40,683 which we defined, executed here, 132 00:06:42,180 --> 00:06:46,190 and then call catchier to catch any errors 133 00:06:46,190 --> 00:06:49,720 that might be thrown from inside this function. 134 00:06:49,720 --> 00:06:51,570 Since it's an async function, 135 00:06:51,570 --> 00:06:54,980 this send cart data function returns a promise, 136 00:06:54,980 --> 00:06:56,990 so we can call catch on it. 137 00:06:56,990 --> 00:07:00,060 We catch any errors we might be getting here. 138 00:07:00,060 --> 00:07:05,060 And I then dispatch my show notification action 139 00:07:05,210 --> 00:07:07,880 with the error in here. 140 00:07:07,880 --> 00:07:11,523 And that then handles all kinds of errors that could occur. 141 00:07:12,870 --> 00:07:15,790 Now I'm getting some yellow squiggly lines here 142 00:07:15,790 --> 00:07:19,300 because cart is no longer the only dependency year. 143 00:07:19,300 --> 00:07:24,160 The dispatch function is actually also a dependency now. 144 00:07:24,160 --> 00:07:28,350 The dispatch function created by use dispatch. 145 00:07:28,350 --> 00:07:31,410 We can safely add it to the dependencies array 146 00:07:31,410 --> 00:07:33,870 because React Redux will ensure 147 00:07:33,870 --> 00:07:36,880 that this is a function which will never change. 148 00:07:36,880 --> 00:07:40,460 So this patch will never trigger this effect 149 00:07:40,460 --> 00:07:44,050 to rerun only card changes will. 150 00:07:44,050 --> 00:07:46,810 Nonetheless for completeness sake we should add it 151 00:07:46,810 --> 00:07:49,380 to get rid of these yellow squiggly lines. 152 00:07:49,380 --> 00:07:53,020 And now we are dispatching different notification states 153 00:07:53,020 --> 00:07:55,993 depending on the current status we have. 154 00:07:57,110 --> 00:08:00,070 With all those changes made, we can save this 155 00:08:00,070 --> 00:08:05,070 and we now just need to use this new notification UI state. 156 00:08:05,330 --> 00:08:07,890 And I also want to use data and app JS. 157 00:08:07,890 --> 00:08:10,320 I already import you as selector. 158 00:08:10,320 --> 00:08:15,320 And now I just want to also select my notification status 159 00:08:16,630 --> 00:08:19,360 with use selector from the state. 160 00:08:19,360 --> 00:08:23,160 So we're drilling into state dot UI dot notification. 161 00:08:23,160 --> 00:08:26,090 I get that notification property. 162 00:08:26,090 --> 00:08:29,050 And that's either null initially, 163 00:08:29,050 --> 00:08:33,480 or it's an object as set by us as this patched by us 164 00:08:33,480 --> 00:08:36,090 and therefore now we can use notification 165 00:08:36,090 --> 00:08:39,420 to conditionally rendered a notification component 166 00:08:39,420 --> 00:08:41,800 and to then provide extra data 167 00:08:41,800 --> 00:08:43,443 to the notification component. 168 00:08:44,800 --> 00:08:46,960 Now for rendering the notification component, 169 00:08:46,960 --> 00:08:50,130 I'll start by importing fragment from React 170 00:08:50,130 --> 00:08:52,480 because I want to render the notification components 171 00:08:52,480 --> 00:08:55,080 side-by-side to layout 172 00:08:55,080 --> 00:08:59,930 since adjacent JSX isn't allowed I'll use fragment 173 00:08:59,930 --> 00:09:01,910 and wrap that around layout 174 00:09:01,910 --> 00:09:05,600 so that here we can then add notification. 175 00:09:05,600 --> 00:09:08,380 And of course they offer import the notification 176 00:09:08,380 --> 00:09:10,570 component import notification 177 00:09:10,570 --> 00:09:14,280 from slash components, UI notification 178 00:09:15,720 --> 00:09:19,110 and only render notification if we have a notification. 179 00:09:19,110 --> 00:09:21,970 So now I'll check if notification is truthy 180 00:09:21,970 --> 00:09:24,720 and only if it is I render notification. 181 00:09:24,720 --> 00:09:28,810 And then I set the status equal to notification dot status. 182 00:09:28,810 --> 00:09:32,820 I set the title equal to notification dot title 183 00:09:32,820 --> 00:09:34,240 and I'll set the message equal 184 00:09:34,240 --> 00:09:35,693 to notification dot message. 185 00:09:38,690 --> 00:09:42,170 With all that's done if we now save that code, 186 00:09:42,170 --> 00:09:46,290 I get an error, cannot read property UI of undefined. 187 00:09:46,290 --> 00:09:48,910 Yeah, because here I'm using use states. 188 00:09:48,910 --> 00:09:51,670 I auto completed that incorrectly. 189 00:09:51,670 --> 00:09:54,040 That would be used selector. 190 00:09:54,040 --> 00:09:56,123 We don't need use state here. 191 00:09:57,240 --> 00:10:00,223 So let's switch this to use selectors save again. 192 00:10:01,070 --> 00:10:03,680 And now we have the notification right 193 00:10:03,680 --> 00:10:05,890 from the start when I reload. 194 00:10:05,890 --> 00:10:08,040 The reason for this is that initially 195 00:10:08,040 --> 00:10:10,480 sends a cart to request 196 00:10:10,480 --> 00:10:12,700 if I reload and I have the network tab open 197 00:10:12,700 --> 00:10:16,730 we see there's a cart request being sent to firebase. 198 00:10:16,730 --> 00:10:20,650 So the good thing is we see the pending state briefly 199 00:10:20,650 --> 00:10:21,890 and then the success States. 200 00:10:21,890 --> 00:10:23,540 So that works. 201 00:10:23,540 --> 00:10:25,180 But of course we don't want to send 202 00:10:25,180 --> 00:10:27,350 the cart stayed right at the beginning 203 00:10:27,350 --> 00:10:30,380 because dead will then always override our existing cart 204 00:10:30,380 --> 00:10:34,270 on the backend with an empty cart when the app loads. 205 00:10:34,270 --> 00:10:36,900 Working around that as simple in app JS 206 00:10:36,900 --> 00:10:38,740 I just want to make sure 207 00:10:38,740 --> 00:10:40,500 that we don't send the cart 208 00:10:40,500 --> 00:10:42,683 when this runs for the first time. 209 00:10:43,700 --> 00:10:45,400 And for implementing this 210 00:10:45,400 --> 00:10:49,850 we could add a variable here outside of our function 211 00:10:50,840 --> 00:10:54,563 maybe name it is initial and set it to true. 212 00:10:56,090 --> 00:10:58,530 And I define it outside of my component function 213 00:10:58,530 --> 00:11:00,450 so that this does not change. 214 00:11:00,450 --> 00:11:02,130 And it's not re initialized 215 00:11:02,130 --> 00:11:04,150 if the component renders again, 216 00:11:04,150 --> 00:11:05,660 instead this will be initialized 217 00:11:05,660 --> 00:11:08,373 when this file is parsed for the first time. 218 00:11:09,460 --> 00:11:11,820 So when my application started therefore 219 00:11:11,820 --> 00:11:13,520 and that's exactly what I want 220 00:11:13,520 --> 00:11:16,160 and we can use his initial here 221 00:11:16,160 --> 00:11:20,150 to check if his initial 222 00:11:20,150 --> 00:11:22,470 and if that's the case I'll return. 223 00:11:22,470 --> 00:11:26,170 I'll not continue so I'll not send my cart data. 224 00:11:26,170 --> 00:11:28,080 However, I don't just want to do that 225 00:11:28,080 --> 00:11:31,030 but I now also want to set his initial two false 226 00:11:31,970 --> 00:11:34,030 so that this will never happen again 227 00:11:34,030 --> 00:11:36,450 but it only blocks this cart data 228 00:11:36,450 --> 00:11:40,020 from being sent the first time this effect executes 229 00:11:40,020 --> 00:11:41,933 so when the application started. 230 00:11:43,030 --> 00:11:45,350 With that addition made here, 231 00:11:45,350 --> 00:11:48,170 if I reload we don't see the notification. 232 00:11:48,170 --> 00:11:50,520 We're not sending that cart request 233 00:11:50,520 --> 00:11:52,270 but if I add something to my cart, 234 00:11:52,270 --> 00:11:53,770 we have the pending state 235 00:11:53,770 --> 00:11:58,020 and then the success state, and that works just fine. 236 00:11:58,020 --> 00:12:00,660 Now let's also test the error state 237 00:12:00,660 --> 00:12:05,660 by removing dot Jason and therefore breaking that. 238 00:12:05,740 --> 00:12:08,040 If we now save this and reload 239 00:12:08,040 --> 00:12:10,823 if I add to cart, we see the error state. 240 00:12:11,780 --> 00:12:14,290 So that is working exactly as it should. 241 00:12:14,290 --> 00:12:16,883 And therefore let's bring back dot Jason. 242 00:12:18,090 --> 00:12:22,003 Now, if we reload, we can send data to the cart again. 243 00:12:23,080 --> 00:12:25,200 So that is working, but of course we're never 244 00:12:25,200 --> 00:12:27,370 fetching that card from firebase 245 00:12:27,370 --> 00:12:28,970 and therefore after a reload 246 00:12:28,970 --> 00:12:31,570 we still start with an empty cart again 247 00:12:31,570 --> 00:12:34,270 because we're not using that firebase data. 248 00:12:34,270 --> 00:12:37,450 And of course, that's only one way of handling it 249 00:12:37,450 --> 00:12:41,560 putting all that side-effect logic into our component 250 00:12:41,560 --> 00:12:45,120 and that's perfectly fine, but there is an alternative. 251 00:12:45,120 --> 00:12:47,543 And of course we also want to fetch data.