1 00:00:01,050 --> 00:00:03,450 ‫Let's continue our tradition 2 00:00:03,450 --> 00:00:06,573 ‫of finishing a section with a challenge. 3 00:00:07,560 --> 00:00:10,290 ‫And in this one I want you to build a very 4 00:00:10,290 --> 00:00:13,530 ‫simplified bank account like this one. 5 00:00:13,530 --> 00:00:15,900 ‫So this is similar to the analogy 6 00:00:15,900 --> 00:00:17,470 ‫that I gave you when we first talked 7 00:00:17,470 --> 00:00:19,570 ‫about the use Reducer hook. 8 00:00:19,570 --> 00:00:21,150 ‫The difference is that here 9 00:00:21,150 --> 00:00:23,250 ‫we don't have any account numbers 10 00:00:23,250 --> 00:00:25,923 ‫to just keep it really, really simple. 11 00:00:26,850 --> 00:00:28,110 ‫So in the beginning here, 12 00:00:28,110 --> 00:00:30,150 ‫we can only take one action 13 00:00:30,150 --> 00:00:32,160 ‫which is to open an account. 14 00:00:32,160 --> 00:00:35,490 ‫And so then immediately we get $500 15 00:00:35,490 --> 00:00:38,340 ‫or euros here into our bank account. 16 00:00:38,340 --> 00:00:41,370 ‫And from there on we can then take these different actions. 17 00:00:41,370 --> 00:00:44,400 ‫For example, we can deposit some money. 18 00:00:44,400 --> 00:00:48,780 ‫And so you see that now our balance went up by 150, 19 00:00:48,780 --> 00:00:50,700 ‫but of course if you want you can later 20 00:00:50,700 --> 00:00:54,480 ‫also use an input field and then deposit something else 21 00:00:54,480 --> 00:00:56,640 ‫which is not just 50. 22 00:00:56,640 --> 00:00:59,010 ‫So we can withdraw money of course 23 00:00:59,010 --> 00:01:01,380 ‫and we can request a loan. 24 00:01:01,380 --> 00:01:03,990 ‫So then our account also goes up 25 00:01:03,990 --> 00:01:06,990 ‫and we see that our loan here also goes up. 26 00:01:06,990 --> 00:01:08,869 ‫So that's the $5,000. 27 00:01:08,869 --> 00:01:10,740 ‫But if we click here again, 28 00:01:10,740 --> 00:01:12,780 ‫then that doesn't work again. 29 00:01:12,780 --> 00:01:15,840 ‫So there can only be one active loan at a time. 30 00:01:15,840 --> 00:01:19,890 ‫Then we can also pay the loan back at some point. 31 00:01:19,890 --> 00:01:21,330 ‫So clicking here again 32 00:01:21,330 --> 00:01:24,270 ‫and finally we can also close the account 33 00:01:24,270 --> 00:01:27,270 ‫but for that to work there can be no loan 34 00:01:27,270 --> 00:01:29,790 ‫and the balance needs to be at zero. 35 00:01:29,790 --> 00:01:32,070 ‫So if I click now, that's not going to work, 36 00:01:32,070 --> 00:01:34,560 ‫but if we withdraw all our money, 37 00:01:34,560 --> 00:01:36,237 ‫then we can close the account. 38 00:01:36,237 --> 00:01:39,723 ‫And so then basically it goes back to the initial state. 39 00:01:40,620 --> 00:01:43,260 ‫So as always, I have all of this year 40 00:01:43,260 --> 00:01:45,243 ‫in a starter file for you. 41 00:01:46,380 --> 00:01:49,780 ‫So down here I already wrote all the JSX 42 00:01:49,780 --> 00:01:53,220 ‫and this time I also wrote you some instructions 43 00:01:53,220 --> 00:01:56,250 ‫or considerations that you can follow. 44 00:01:56,250 --> 00:01:59,040 ‫So basically the rules that this bank account 45 00:01:59,040 --> 00:02:00,633 ‫here should follow. 46 00:02:02,580 --> 00:02:05,550 ‫All right, we also already have the initial state 47 00:02:05,550 --> 00:02:07,320 ‫here which you should use. 48 00:02:07,320 --> 00:02:09,870 ‫And so you'll see we have the balance and the loan 49 00:02:09,870 --> 00:02:12,840 ‫which are these two and then we have also 50 00:02:12,840 --> 00:02:14,670 ‫the is active state. 51 00:02:14,670 --> 00:02:16,650 ‫So in the beginning you see it's faults. 52 00:02:16,650 --> 00:02:20,280 ‫And so then all of these buttons here will be disabled. 53 00:02:20,280 --> 00:02:24,240 ‫So right now all the disabled here are just set to fault 54 00:02:24,240 --> 00:02:28,503 ‫but you'll probably then later use this is active. 55 00:02:29,370 --> 00:02:32,610 ‫And then here of course you will also write your own event 56 00:02:32,610 --> 00:02:34,520 ‫and/or functions. 57 00:02:34,520 --> 00:02:38,290 ‫Now, okay, so hopefully this isn't too difficult. 58 00:02:38,290 --> 00:02:41,352 ‫Just make sure to read these instructions here 59 00:02:41,352 --> 00:02:44,460 ‫and if you have any problem or any doubt, 60 00:02:44,460 --> 00:02:46,680 ‫then you can just move on a bit in the video 61 00:02:46,680 --> 00:02:49,410 ‫until you reach that part. 62 00:02:49,410 --> 00:02:50,250 ‫Okay? 63 00:02:50,250 --> 00:02:54,000 ‫So take a few minutes now to take this challenge 64 00:02:54,000 --> 00:02:57,813 ‫to practice the very important use Reducer hook on your own. 65 00:02:59,880 --> 00:03:03,030 ‫Okay, so let's get to work here. 66 00:03:03,030 --> 00:03:05,460 ‫And this time I will actually fork this 67 00:03:05,460 --> 00:03:08,313 ‫so I don't override the starter file. 68 00:03:09,690 --> 00:03:13,560 ‫And so hopefully you did something similar 69 00:03:13,560 --> 00:03:16,310 ‫to what I am going to implement here now. 70 00:03:16,310 --> 00:03:19,350 ‫So here we will have a Reducer function 71 00:03:19,350 --> 00:03:22,470 ‫and the initial state of course. 72 00:03:22,470 --> 00:03:26,380 ‫And so this will then return the state 73 00:03:26,380 --> 00:03:29,880 ‫which I will immediately destructure 74 00:03:29,880 --> 00:03:33,933 ‫into balance loan and is active. 75 00:03:35,220 --> 00:03:40,220 ‫And we will also get the dis patch function like this. 76 00:03:43,620 --> 00:03:44,453 ‫All right. 77 00:03:44,453 --> 00:03:47,160 ‫Next we need to create a Reducer, 78 00:03:47,160 --> 00:03:49,950 ‫which takes in the current state 79 00:03:49,950 --> 00:03:53,910 ‫and the action that was dispatched. 80 00:03:53,910 --> 00:03:55,413 ‫Here we have some problem. 81 00:03:58,590 --> 00:04:01,440 ‫And now let's do our typical switch here. 82 00:04:01,440 --> 00:04:06,440 ‫So over action type and let's already create all our cases 83 00:04:07,210 --> 00:04:12,030 ‫here at once so we already know which ones they are. 84 00:04:12,030 --> 00:04:17,030 ‫So we have open account deposit and all those other ones. 85 00:04:18,930 --> 00:04:21,633 ‫So open account. 86 00:04:25,200 --> 00:04:27,300 ‫For now, let's just return something here. 87 00:04:31,890 --> 00:04:34,077 ‫Then deposit, withdraw. 88 00:04:41,460 --> 00:04:43,410 ‫And here thanks to prior, 89 00:04:43,410 --> 00:04:45,660 ‫we don't have to take any care 90 00:04:45,660 --> 00:04:47,523 ‫of formatting this in any way. 91 00:04:49,260 --> 00:04:52,473 ‫So request loan. 92 00:04:56,550 --> 00:05:01,550 ‫Next up we have pay loan, so that's not load but loan. 93 00:05:07,230 --> 00:05:11,980 ‫And finally we also want the ability to close the account 94 00:05:11,980 --> 00:05:16,980 ‫and that's also as always 95 00:05:17,820 --> 00:05:22,820 ‫at a default case where we just throw a new error 96 00:05:27,090 --> 00:05:28,083 ‫Like this. 97 00:05:30,510 --> 00:05:33,060 ‫Now, okay, now let's go back here 98 00:05:33,060 --> 00:05:37,900 ‫to our JSX so we can use the variables that we got. 99 00:05:37,900 --> 00:05:42,900 ‫So here we want to display the balance and here the loan. 100 00:05:45,340 --> 00:05:49,360 ‫And so immediately we get our user interface 101 00:05:49,360 --> 00:05:50,660 ‫they're updated. 102 00:05:50,660 --> 00:05:52,890 ‫And now here what we want to do, 103 00:05:52,890 --> 00:05:57,090 ‫or first let's actually use also the is active 104 00:05:57,090 --> 00:05:58,577 ‫instead of these falses. 105 00:06:03,840 --> 00:06:04,980 ‫And actually here of course, 106 00:06:04,980 --> 00:06:08,580 ‫we want the buttons to be disabled 107 00:06:08,580 --> 00:06:10,660 ‫when the account is not active 108 00:06:11,550 --> 00:06:13,140 ‫except this one here actually. 109 00:06:13,140 --> 00:06:17,073 ‫So otherwise we couldn't open an account in the first place. 110 00:06:18,330 --> 00:06:19,163 ‫Okay? 111 00:06:19,163 --> 00:06:22,110 ‫So here what we are going to do to open the account 112 00:06:22,110 --> 00:06:27,110 ‫is to dispatch an event with the type of open account 113 00:06:31,560 --> 00:06:35,130 ‫and we need to close this guy right here. 114 00:06:35,130 --> 00:06:38,163 ‫And so let's see what should happen in this case. 115 00:06:39,280 --> 00:06:40,389 ‫Well as always, 116 00:06:40,389 --> 00:06:44,190 ‫we will want to return our entire state object 117 00:06:44,190 --> 00:06:47,030 ‫and to end the balance needs to be set 118 00:06:47,030 --> 00:06:50,470 ‫to 500 because that is the initial amount 119 00:06:50,470 --> 00:06:55,040 ‫and then is active will be set to true. 120 00:06:55,040 --> 00:06:58,200 ‫And so then all of these buttons here can get active. 121 00:06:58,200 --> 00:07:01,920 ‫And so let's see, yeah 122 00:07:01,920 --> 00:07:06,920 ‫nice that's already working and so let's keep going. 123 00:07:06,960 --> 00:07:11,133 ‫So let's implement the next two as they are pretty similar. 124 00:07:12,720 --> 00:07:17,720 ‫So the state and then the balance will simply 125 00:07:18,380 --> 00:07:23,380 ‫be the current balance plus whatever comes in in the action. 126 00:07:26,550 --> 00:07:30,030 ‫So action dot payload. 127 00:07:30,030 --> 00:07:33,410 ‫So again, the action payload is to pass in some data. 128 00:07:33,410 --> 00:07:36,850 ‫And so here we are going to pass in 150 129 00:07:37,920 --> 00:07:39,100 ‫but of course we don't want 130 00:07:39,100 --> 00:07:44,100 ‫that 150 hard coded right here in in our Reducer function. 131 00:07:45,410 --> 00:07:49,070 ‫So we need to pass that in as the action. 132 00:07:49,070 --> 00:07:50,040 ‫So then withdraw. 133 00:07:50,040 --> 00:07:52,800 ‫It's just the same but with the minus. 134 00:07:52,800 --> 00:07:57,060 ‫And then here, yeah, let's try that. 135 00:07:57,060 --> 00:08:01,637 ‫So dispatch with the type of deposit 136 00:08:06,230 --> 00:08:08,673 ‫enter payload of 150. 137 00:08:09,780 --> 00:08:11,310 ‫And as I was saying earlier, 138 00:08:11,310 --> 00:08:15,000 ‫you could of course also created an input field here 139 00:08:15,000 --> 00:08:18,990 ‫and then deposited the value that came from the input field. 140 00:08:18,990 --> 00:08:21,810 ‫So you could have or still can go really crazy 141 00:08:21,810 --> 00:08:25,500 ‫with this example here and make it a lot more complex 142 00:08:25,500 --> 00:08:28,050 ‫and more complete if you want. 143 00:08:28,050 --> 00:08:30,600 ‫So if you do that, make sure to post that 144 00:08:30,600 --> 00:08:34,520 ‫into the Q&A because I would be really curious to see that. 145 00:08:34,520 --> 00:08:37,470 ‫But anyway, as we click here now on this button 146 00:08:37,470 --> 00:08:42,400 ‫we each time deposit 150 into our bank account. 147 00:08:42,400 --> 00:08:45,810 ‫And then here, let's just copy this whole line. 148 00:08:45,810 --> 00:08:48,273 ‫No, actually that's not really going to work. 149 00:08:50,520 --> 00:08:51,633 ‫So nevermind. 150 00:08:54,479 --> 00:08:57,850 ‫So the type here is with draw 151 00:09:01,590 --> 00:09:05,823 ‫And then 50 and that works indeed. 152 00:09:07,110 --> 00:09:09,420 ‫So these were the easier ones. 153 00:09:09,420 --> 00:09:11,850 ‫Now let's take care of the harder ones. 154 00:09:11,850 --> 00:09:15,430 ‫But actually before we do that, we should do something else. 155 00:09:15,430 --> 00:09:19,510 ‫So let's actually reload this whole thing here 156 00:09:20,640 --> 00:09:23,730 ‫so that our balance is back to 500 157 00:09:23,730 --> 00:09:26,010 ‫and that our account is no longer open. 158 00:09:26,010 --> 00:09:29,130 ‫And then here, or actually here 159 00:09:29,130 --> 00:09:33,609 ‫let's set it back to faults now, right? 160 00:09:33,609 --> 00:09:34,979 ‫And so now if I click here 161 00:09:34,979 --> 00:09:38,340 ‫then we can actually already deposit something 162 00:09:38,340 --> 00:09:42,540 ‫in our account even though it is not even active. 163 00:09:42,540 --> 00:09:44,490 ‫And so we of course need to prevent 164 00:09:44,490 --> 00:09:47,450 ‫that also inside our Reducer function 165 00:09:47,450 --> 00:09:51,360 ‫we cannot rely only on the UI to block this 166 00:09:51,360 --> 00:09:54,420 ‫kind of thing because otherwise at a later point 167 00:09:54,420 --> 00:09:56,610 ‫somewhere else in our application 168 00:09:56,610 --> 00:09:59,240 ‫we might dispatch an action like this 169 00:09:59,240 --> 00:10:03,270 ‫maybe not from a button but from some effect for example. 170 00:10:03,270 --> 00:10:08,130 ‫And so we need to account for that case here in our Reducer. 171 00:10:08,130 --> 00:10:10,920 ‫So really blocking that action right here. 172 00:10:10,920 --> 00:10:15,920 ‫So we can say if the account is not active 173 00:10:20,100 --> 00:10:23,430 ‫Then just return the current state. 174 00:10:23,430 --> 00:10:25,623 ‫So in this case this wouldn't work. 175 00:10:27,480 --> 00:10:29,730 ‫So this right here then wouldn't work anymore. 176 00:10:29,730 --> 00:10:31,800 ‫So you see it doesn't work 177 00:10:31,800 --> 00:10:35,040 ‫but what also doesn't work is to open the account then. 178 00:10:35,040 --> 00:10:40,040 ‫And so we also then need to say if or actually end. 179 00:10:41,280 --> 00:10:43,980 ‫So if the account is not active 180 00:10:43,980 --> 00:10:48,980 ‫and the action type is different from open account 181 00:10:52,590 --> 00:10:54,940 ‫then simply return the state. 182 00:10:54,940 --> 00:10:57,700 ‫And so that's the case right now. 183 00:10:57,700 --> 00:10:59,620 ‫That's the case right now. 184 00:10:59,620 --> 00:11:02,700 ‫So when I click here, now the account is not active 185 00:11:02,700 --> 00:11:07,560 ‫and the type is not open account and so then nothing works. 186 00:11:07,560 --> 00:11:10,620 ‫But here of course the account is still not active 187 00:11:10,620 --> 00:11:14,420 ‫but the action type is actually open account. 188 00:11:14,420 --> 00:11:17,979 ‫And so then this one here will not get executed 189 00:11:17,979 --> 00:11:19,260 ‫and we can move on. 190 00:11:19,260 --> 00:11:22,713 ‫And so then our account can actually get opened. 191 00:11:24,250 --> 00:11:25,653 ‫All right. 192 00:11:28,740 --> 00:11:31,230 ‫So these are some very important things that you 193 00:11:31,230 --> 00:11:33,890 ‫need to keep in mind and that's also the reason 194 00:11:33,890 --> 00:11:36,940 ‫why it is so important to do these challenges 195 00:11:36,940 --> 00:11:41,130 ‫because it is impossible to cover all these things just 196 00:11:41,130 --> 00:11:42,690 ‫in the projects themselves. 197 00:11:42,690 --> 00:11:45,330 ‫So there are always some other edge cases like 198 00:11:45,330 --> 00:11:49,810 ‫this which can best be handled in more different situations. 199 00:11:49,810 --> 00:11:54,693 ‫But anyway, let's now hear dispatch some some other action. 200 00:11:55,920 --> 00:11:58,233 ‫So this one is to request the loan. 201 00:11:59,610 --> 00:12:01,750 ‫So request loan 202 00:12:03,630 --> 00:12:06,273 ‫and here it is for 5,000, 203 00:12:07,470 --> 00:12:10,470 ‫whatever, euros, dollars 204 00:12:10,470 --> 00:12:12,333 ‫some other currency, whatever. 205 00:12:13,290 --> 00:12:16,020 ‫So let's see our instruction, 206 00:12:16,020 --> 00:12:18,030 ‫what it says about the loan. 207 00:12:18,030 --> 00:12:21,720 ‫So the customer can only request if there is no loan yet. 208 00:12:21,720 --> 00:12:24,590 ‫And if that condition is met then it will be added 209 00:12:24,590 --> 00:12:27,843 ‫in the loan state and into the balance. 210 00:12:29,130 --> 00:12:30,720 ‫All right. 211 00:12:30,720 --> 00:12:35,720 ‫So that's again at a guard clause here basically saying 212 00:12:35,870 --> 00:12:39,600 ‫that if there is a loan already 213 00:12:39,600 --> 00:12:43,350 ‫so state.loan is equal then zero, 214 00:12:43,350 --> 00:12:44,700 ‫then do nothing 215 00:12:44,700 --> 00:12:47,370 ‫which means to return the current state. 216 00:12:47,370 --> 00:12:50,300 ‫So remember that this Reducer function always 217 00:12:50,300 --> 00:12:52,680 ‫needs to return some state, 218 00:12:52,680 --> 00:12:55,290 ‫we cannot just return nothing. 219 00:12:55,290 --> 00:12:57,783 ‫Let's actually see what happens if we do that. 220 00:12:59,820 --> 00:13:02,940 ‫So we will experiment what that does next 221 00:13:02,940 --> 00:13:06,300 ‫but in the other case, 222 00:13:06,300 --> 00:13:08,820 ‫so if there is no loan yet, 223 00:13:08,820 --> 00:13:13,820 ‫then the loan should be equal to the action payload. 224 00:13:17,080 --> 00:13:22,080 ‫And of course we first need the state itself 225 00:13:22,630 --> 00:13:25,740 ‫and then also the balance will be updated 226 00:13:25,740 --> 00:13:30,740 ‫to state.balance plus our payload here. 227 00:13:33,350 --> 00:13:35,943 ‫Alright, so let's try that. 228 00:13:36,859 --> 00:13:40,700 ‫So request alone and so beautiful 229 00:13:40,700 --> 00:13:42,870 ‫it was added to both of them, 230 00:13:42,870 --> 00:13:44,400 ‫but now if I click again 231 00:13:44,400 --> 00:13:48,690 ‫then here we will get null as a return. 232 00:13:48,690 --> 00:13:51,359 ‫And so that breaks our entire application 233 00:13:51,359 --> 00:13:55,609 ‫because now here basically this object 234 00:13:55,609 --> 00:14:00,300 ‫so the state that was returned from youth Reducer is null. 235 00:14:00,300 --> 00:14:02,400 ‫And so that cannot be, 236 00:14:02,400 --> 00:14:04,503 ‫it always needs to be some state. 237 00:14:05,640 --> 00:14:07,053 ‫So let's try that again. 238 00:14:08,270 --> 00:14:10,953 ‫Yeah, so now it works. 239 00:14:11,880 --> 00:14:14,110 ‫This one is of course not necessary 240 00:14:14,970 --> 00:14:17,700 ‫and so let's actually implement the next one 241 00:14:17,700 --> 00:14:18,903 ‫here right away. 242 00:14:22,620 --> 00:14:25,660 ‫So if the loan is paid, then it will go back to zero 243 00:14:25,660 --> 00:14:30,660 ‫and the balance will also go down. 244 00:14:31,920 --> 00:14:36,123 ‫So it will go down to state.balance, 245 00:14:37,170 --> 00:14:38,760 ‫balance like this. 246 00:14:38,760 --> 00:14:40,260 ‫And then here, do you think 247 00:14:40,260 --> 00:14:43,830 ‫that we need to pass in some value? 248 00:14:43,830 --> 00:14:46,650 ‫So having like action not payload 249 00:14:46,650 --> 00:14:49,370 ‫well that's not going to be necessary actually 250 00:14:49,370 --> 00:14:52,650 ‫because we already know what the loan was. 251 00:14:52,650 --> 00:14:55,460 ‫So that's at state.loan. 252 00:14:55,460 --> 00:14:58,470 ‫And so then that loan will simply be removed 253 00:14:58,470 --> 00:14:59,793 ‫from the bank account. 254 00:15:02,340 --> 00:15:05,673 ‫So let's dispatch that right here. 255 00:15:06,810 --> 00:15:09,670 ‫So this is not like a loan in the real world 256 00:15:09,670 --> 00:15:12,360 ‫which we pay over a period of time. 257 00:15:12,360 --> 00:15:16,230 ‫So it has to be paid all at once. 258 00:15:16,230 --> 00:15:20,730 ‫So very simplified, as I said in the beginning. 259 00:15:20,730 --> 00:15:23,070 ‫So pay loan. 260 00:15:23,070 --> 00:15:26,410 ‫Now, here we have some problem 261 00:15:28,620 --> 00:15:31,320 ‫and yeah, there it is. 262 00:15:31,320 --> 00:15:34,320 ‫Now here we can click multiple times 263 00:15:34,320 --> 00:15:39,150 ‫and then we actually are not preventing this function here 264 00:15:39,150 --> 00:15:42,570 ‫or this action from being called over and over again 265 00:15:42,570 --> 00:15:45,480 ‫but that will not do anything because the second 266 00:15:45,480 --> 00:15:48,460 ‫time we click the loan will already be zero. 267 00:15:48,460 --> 00:15:52,470 ‫And so then here simply zero gets subtracted 268 00:15:52,470 --> 00:15:54,390 ‫from the current balance. 269 00:15:54,390 --> 00:15:57,060 ‫So this is not going to be a problem at all. 270 00:15:57,060 --> 00:16:01,200 ‫The only thing that you might think is a problem is that 271 00:16:01,200 --> 00:16:05,733 ‫if we have here less money in the account then are alone. 272 00:16:06,780 --> 00:16:09,130 ‫So then we have a negative balance 273 00:16:09,130 --> 00:16:12,270 ‫which in theory shouldn't be allowed 274 00:16:12,270 --> 00:16:14,880 ‫but well in our bank it is allowed. 275 00:16:14,880 --> 00:16:17,010 ‫The only thing that you can do when you have 276 00:16:17,010 --> 00:16:20,000 ‫a negative balance is to close your account. 277 00:16:20,000 --> 00:16:24,400 ‫So I think that's what I say somewhere here. 278 00:16:24,400 --> 00:16:27,510 ‫Yeah, so then the users 279 00:16:27,510 --> 00:16:31,280 ‫or the customer can't close their account. 280 00:16:31,280 --> 00:16:33,630 ‫Okay, and so speaking of closing 281 00:16:33,630 --> 00:16:36,450 ‫let's implement our list action here. 282 00:16:36,450 --> 00:16:40,320 ‫And so this one says that the account can only be closed 283 00:16:40,320 --> 00:16:44,520 ‫if there is no loan and if the balance is zero. 284 00:16:44,520 --> 00:16:48,033 ‫And so let's do that right here. 285 00:16:49,180 --> 00:16:51,180 ‫So actually we don't need this. 286 00:16:51,180 --> 00:16:54,830 ‫We first need to check our conditions 287 00:16:54,830 --> 00:16:57,753 ‫and as always we will do a guard clause. 288 00:16:58,860 --> 00:17:00,530 ‫So one that returns to state 289 00:17:00,530 --> 00:17:03,300 ‫in case our conditions are not met. 290 00:17:03,300 --> 00:17:04,580 ‫So if the loan is greater 291 00:17:04,580 --> 00:17:09,580 ‫than zero and if there is a balance right now 292 00:17:09,879 --> 00:17:13,890 ‫so if the balance is different from zero 293 00:17:13,890 --> 00:17:18,570 ‫then once again just return the state. 294 00:17:18,570 --> 00:17:22,247 ‫But otherwise then we want to close the account 295 00:17:22,247 --> 00:17:25,050 ‫and so then it is no longer active. 296 00:17:25,050 --> 00:17:29,490 ‫So basically what we have then is the initial state. 297 00:17:29,490 --> 00:17:32,100 ‫So no balance, no loan, 298 00:17:32,100 --> 00:17:34,680 ‫and the account is not active. 299 00:17:34,680 --> 00:17:35,820 ‫So just to finish, 300 00:17:35,820 --> 00:17:38,733 ‫we need to now dis pat that action here. 301 00:17:47,310 --> 00:17:51,363 ‫So type close account. 302 00:17:52,650 --> 00:17:53,613 ‫So let's see. 303 00:17:54,690 --> 00:17:56,860 ‫Well that's some problem right there 304 00:17:56,860 --> 00:17:59,940 ‫because we shouldn't be allowed to close our account 305 00:17:59,940 --> 00:18:03,873 ‫with the balance that we had before in negative. 306 00:18:04,950 --> 00:18:07,110 ‫So let's see what we did here wrong. 307 00:18:07,110 --> 00:18:10,050 ‫And here it should be an 308 00:18:10,050 --> 00:18:13,860 ‫or so not an end of course at the same time. 309 00:18:13,860 --> 00:18:17,940 ‫So if there is a loan or if there is some balance 310 00:18:17,940 --> 00:18:20,223 ‫then we just want to do nothing. 311 00:18:21,420 --> 00:18:23,220 ‫So that's just returning this date. 312 00:18:23,220 --> 00:18:27,060 ‫And so this means that if there is no loan 313 00:18:27,060 --> 00:18:30,030 ‫and if the balance is zero, 314 00:18:30,030 --> 00:18:33,270 ‫then we can return the initial state 315 00:18:33,270 --> 00:18:35,370 ‫and the account is closed. 316 00:18:35,370 --> 00:18:37,290 ‫So let's try that again. 317 00:18:37,290 --> 00:18:40,083 ‫Open the account and now I cannot close it. 318 00:18:41,400 --> 00:18:43,950 ‫Let's withdraw a bunch of money. 319 00:18:43,950 --> 00:18:45,510 ‫Ah, that was too much. 320 00:18:45,510 --> 00:18:47,823 ‫So now I can also not close, 321 00:18:48,960 --> 00:18:50,870 ‫but yeah, now that works. 322 00:18:50,870 --> 00:18:55,230 ‫Amazing, so that actually finishes it. 323 00:18:55,230 --> 00:18:57,080 ‫And now as I said before 324 00:18:57,080 --> 00:18:59,890 ‫you can just go a bit crazy here if you want 325 00:18:59,890 --> 00:19:04,400 ‫with this exercise and maybe add some operations here 326 00:19:04,400 --> 00:19:06,440 ‫or include some input fields 327 00:19:06,440 --> 00:19:09,960 ‫or really to anything that you want. 328 00:19:09,960 --> 00:19:11,730 ‫You can also use an account number 329 00:19:11,730 --> 00:19:14,190 ‫like we did in that analogy. 330 00:19:14,190 --> 00:19:15,780 ‫And if you do any of that, 331 00:19:15,780 --> 00:19:18,030 ‫then just make sure to show it to me 332 00:19:18,030 --> 00:19:21,120 ‫so I can see your progress in the Q&A. 333 00:19:21,120 --> 00:19:24,650 ‫And also if you want more use Reducer challenges like this 334 00:19:24,650 --> 00:19:28,290 ‫because maybe you still find it a little bit difficult 335 00:19:28,290 --> 00:19:31,320 ‫then also let me know in the Q&A section. 336 00:19:31,320 --> 00:19:32,790 ‫And with that being said, 337 00:19:32,790 --> 00:19:35,730 ‫let's now move on right to our next section 338 00:19:35,730 --> 00:19:37,440 ‫where we are going to use 339 00:19:37,440 --> 00:19:40,394 ‫for the first time an external library 340 00:19:40,394 --> 00:19:42,630 ‫and that is React Router, 341 00:19:42,630 --> 00:19:45,030 ‫so that we can build our very first 342 00:19:45,030 --> 00:19:47,283 ‫real single page application.