1 00:00:01,290 --> 00:00:03,090 ‫Welcome to the last video 2 00:00:03,090 --> 00:00:05,700 ‫in this section where we will now finish 3 00:00:05,700 --> 00:00:08,283 ‫up the application that we have been building. 4 00:00:09,720 --> 00:00:12,360 ‫So, in the last lecture, we already made 5 00:00:12,360 --> 00:00:15,840 ‫all our elements here controlled elements. 6 00:00:15,840 --> 00:00:19,020 ‫And so now all we have to do is to listen 7 00:00:19,020 --> 00:00:21,810 ‫for the submit event here on this form 8 00:00:21,810 --> 00:00:23,553 ‫and then handle it accordingly. 9 00:00:24,660 --> 00:00:27,270 ‫So that's easy enough. 10 00:00:27,270 --> 00:00:29,940 ‫It's always in the same way. 11 00:00:29,940 --> 00:00:31,293 ‫So onSubmit. 12 00:00:32,580 --> 00:00:37,110 ‫Then, typically, we write a handleSubmit function 13 00:00:37,110 --> 00:00:38,640 ‫right here. 14 00:00:38,640 --> 00:00:42,150 ‫So function, handleSubmit, 15 00:00:42,150 --> 00:00:44,820 ‫which will receive the event. 16 00:00:44,820 --> 00:00:48,933 ‫And then, as always, we need to do preventDefault. 17 00:00:50,310 --> 00:00:54,630 ‫Alright? And let's start by adding some guard clauses here, 18 00:00:54,630 --> 00:00:57,840 ‫so basically preventing this form from being submitted 19 00:00:57,840 --> 00:01:00,150 ‫if there is no bill 20 00:01:00,150 --> 00:01:04,773 ‫or if there is no value paid by the user. 21 00:01:06,060 --> 00:01:10,920 ‫So in this case, just return and do nothing now, okay? 22 00:01:10,920 --> 00:01:15,120 ‫But if there is a bill or a value paid for the user, 23 00:01:15,120 --> 00:01:19,260 ‫well then now it's time to actually split the bill. 24 00:01:19,260 --> 00:01:21,150 ‫Now in practice, that means basically 25 00:01:21,150 --> 00:01:25,440 ‫that the balance of the user in question will be updated. 26 00:01:25,440 --> 00:01:28,260 ‫So of the friend here in question, I mean. 27 00:01:28,260 --> 00:01:30,450 ‫So whenever we split a bill, 28 00:01:30,450 --> 00:01:34,710 ‫it means that this value right here will be updated, right? 29 00:01:34,710 --> 00:01:38,070 ‫So something is clearly happening on the screen. 30 00:01:38,070 --> 00:01:39,420 ‫However, does that mean 31 00:01:39,420 --> 00:01:42,450 ‫that we now need a new piece of state? 32 00:01:42,450 --> 00:01:45,330 ‫Well, actually no, because we already 33 00:01:45,330 --> 00:01:48,030 ‫have these friends here in our state 34 00:01:48,030 --> 00:01:52,230 ‫and all we're doing is to update them, right? 35 00:01:52,230 --> 00:01:56,700 ‫So basically all we will do is to update this balance value 36 00:01:56,700 --> 00:01:58,083 ‫that is displayed here. 37 00:01:59,430 --> 00:02:03,180 ‫So let's come again to the component 38 00:02:03,180 --> 00:02:05,370 ‫where that state is living, 39 00:02:05,370 --> 00:02:06,930 ‫so this state right here, 40 00:02:06,930 --> 00:02:11,070 ‫and then let's write yet another handler function. 41 00:02:11,070 --> 00:02:13,083 ‫So function, handleSplitBill. 42 00:02:17,280 --> 00:02:20,700 ‫And this one will simply receive a value. 43 00:02:20,700 --> 00:02:22,740 ‫So in this case, there is no need 44 00:02:22,740 --> 00:02:24,870 ‫to pass in the entire friend 45 00:02:24,870 --> 00:02:28,740 ‫because we already know which friend is going to be updated. 46 00:02:28,740 --> 00:02:32,313 ‫And so that's exactly the current friend, right? 47 00:02:33,180 --> 00:02:36,900 ‫But for now, let's actually just lock this value here 48 00:02:36,900 --> 00:02:38,040 ‫to the console. 49 00:02:38,040 --> 00:02:41,760 ‫So we will take care of this more complex updating logic 50 00:02:41,760 --> 00:02:43,020 ‫at the end. 51 00:02:43,020 --> 00:02:45,960 ‫So for now, let's just pass this handle function here 52 00:02:45,960 --> 00:02:47,433 ‫into the component. 53 00:02:48,300 --> 00:02:51,720 ‫So right into this component here. 54 00:02:51,720 --> 00:02:53,030 ‫So onSplitBill 55 00:02:55,830 --> 00:02:58,143 ‫will be handled by handleSplitBill. 56 00:03:01,502 --> 00:03:03,990 ‫Okay? 57 00:03:03,990 --> 00:03:06,550 ‫Then let's come down here again 58 00:03:07,560 --> 00:03:10,593 ‫and let's then receive onSplitBill. 59 00:03:13,440 --> 00:03:16,110 ‫And then finally we can use that here 60 00:03:16,110 --> 00:03:18,120 ‫in order to update this state. 61 00:03:18,120 --> 00:03:21,270 ‫Well, for now, we will only lock something to the console, 62 00:03:21,270 --> 00:03:24,390 ‫but we will take care of updating in a minute. 63 00:03:24,390 --> 00:03:27,510 ‫For now, we first need to figure out exactly 64 00:03:27,510 --> 00:03:31,500 ‫with which value we will update different balance 65 00:03:31,500 --> 00:03:33,960 ‫and this is actually the most confusing part 66 00:03:33,960 --> 00:03:35,640 ‫of this whole application, 67 00:03:35,640 --> 00:03:39,840 ‫even more confusing than all the React stuff itself. 68 00:03:39,840 --> 00:03:44,190 ‫So remember that the bill can basically be paid either 69 00:03:44,190 --> 00:03:47,520 ‫by you, so the user, 70 00:03:47,520 --> 00:03:48,990 ‫or by the friend, 71 00:03:48,990 --> 00:03:52,653 ‫and so based on that, we now need to set a value. 72 00:03:54,570 --> 00:03:58,470 ‫So we will use the ternary operator here for that. 73 00:03:58,470 --> 00:04:03,470 ‫And so we say who is paying is equal to the user, 74 00:04:03,480 --> 00:04:05,103 ‫which is basically you. 75 00:04:06,240 --> 00:04:08,730 ‫So remember that negative numbers 76 00:04:08,730 --> 00:04:12,690 ‫in the balance are owed by you, so by the user, 77 00:04:12,690 --> 00:04:17,340 ‫and positive numbers means that your friend is owing you. 78 00:04:17,340 --> 00:04:20,220 ‫Therefore, if this here is the situation, 79 00:04:20,220 --> 00:04:21,990 ‫so if you are paying, 80 00:04:21,990 --> 00:04:24,810 ‫then they will be owing you their part. 81 00:04:24,810 --> 00:04:27,333 ‫And so therefore, this is a positive number. 82 00:04:28,650 --> 00:04:30,903 ‫So the value here will be paidByFriend. 83 00:04:33,570 --> 00:04:37,290 ‫And in the opposite case, so if your friend is paying, 84 00:04:37,290 --> 00:04:40,140 ‫then you will actually owe your part, 85 00:04:40,140 --> 00:04:42,180 ‫so the paid by user part, 86 00:04:42,180 --> 00:04:44,490 ‫and it's going to be a negative value, 87 00:04:44,490 --> 00:04:49,080 ‫again because the negative values are the ones owed by you. 88 00:04:49,080 --> 00:04:50,290 ‫So minus 89 00:04:51,480 --> 00:04:52,313 ‫paidByUser. 90 00:04:53,790 --> 00:04:56,520 ‫And so then, inside this function here later, 91 00:04:56,520 --> 00:04:59,370 ‫we will add that value that we just returned here 92 00:04:59,370 --> 00:05:00,783 ‫onto the balance. 93 00:05:02,340 --> 00:05:04,020 ‫So once we're done with all that, 94 00:05:04,020 --> 00:05:07,383 ‫I promise this will be a lot easier to understand. 95 00:05:09,720 --> 00:05:12,930 ‫But anyway. Let's now come here to our console. 96 00:05:12,930 --> 00:05:14,940 ‫Let's just quickly reload here 97 00:05:14,940 --> 00:05:18,330 ‫and then let's just try any of these. 98 00:05:18,330 --> 00:05:22,830 ‫So let's say the bill is 200 euros 99 00:05:22,830 --> 00:05:25,020 ‫and your part is 50 100 00:05:25,020 --> 00:05:29,100 ‫and Sarah's part is 150 and you are paying the bill. 101 00:05:29,100 --> 00:05:32,880 ‫And so the result is then a positive 150, 102 00:05:32,880 --> 00:05:35,880 ‫which will be added on top of the balance. 103 00:05:35,880 --> 00:05:40,880 ‫So it's plus 150 because it's your friend who is owing you. 104 00:05:41,310 --> 00:05:44,103 ‫And so, yeah, those are the positive numbers. 105 00:05:45,540 --> 00:05:48,030 ‫If we change this here to Sarah, 106 00:05:48,030 --> 00:05:50,730 ‫then it'll become minus 50, 107 00:05:50,730 --> 00:05:53,910 ‫so that is your part which you are then owing 108 00:05:53,910 --> 00:05:55,320 ‫to your friend. 109 00:05:55,320 --> 00:05:58,620 ‫And so then it becomes minus and your part. 110 00:05:58,620 --> 00:05:59,883 ‫So minus 50. 111 00:06:01,170 --> 00:06:02,003 ‫Alright? 112 00:06:02,970 --> 00:06:06,450 ‫So our function here is now receiving that value. 113 00:06:06,450 --> 00:06:10,440 ‫And so now let's update our friend's state. 114 00:06:10,440 --> 00:06:11,990 ‫So setFriends. 115 00:06:15,000 --> 00:06:17,340 ‫And once again, the new array 116 00:06:17,340 --> 00:06:19,560 ‫that we will return here will be based 117 00:06:19,560 --> 00:06:21,570 ‫on the current friends array. 118 00:06:21,570 --> 00:06:23,490 ‫And so here we need that callback. 119 00:06:23,490 --> 00:06:27,433 ‫And then what we're going to do is friends.map 120 00:06:30,390 --> 00:06:32,730 ‫because we want to return a new array 121 00:06:32,730 --> 00:06:35,700 ‫with the exact same length as the current one. 122 00:06:35,700 --> 00:06:38,760 ‫So that's how we always do it when we update an object 123 00:06:38,760 --> 00:06:39,780 ‫in an array. 124 00:06:39,780 --> 00:06:42,270 ‫So we have done that many, many times before. 125 00:06:42,270 --> 00:06:44,670 ‫And so if the code I'm gonna write next 126 00:06:44,670 --> 00:06:46,170 ‫is a bit strange to you, 127 00:06:46,170 --> 00:06:50,220 ‫then just feel free to go back to one of those lectures. 128 00:06:50,220 --> 00:06:53,640 ‫But anyway, let's now loop actually over this array 129 00:06:53,640 --> 00:06:57,513 ‫in which each of the objects is, of course, a friend. 130 00:06:58,620 --> 00:07:01,290 ‫And so let's then update the friend whenever 131 00:07:01,290 --> 00:07:04,860 ‫the current friend.id is equal 132 00:07:04,860 --> 00:07:08,130 ‫to the selectedFriend.id. 133 00:07:08,130 --> 00:07:10,230 ‫And so here's what I mentioned earlier, 134 00:07:10,230 --> 00:07:13,950 ‫which is that we already know which of the friends 135 00:07:13,950 --> 00:07:16,320 ‫is getting updated, right? 136 00:07:16,320 --> 00:07:18,783 ‫Because we already hold that in the state. 137 00:07:20,640 --> 00:07:22,470 ‫So if this is the case, 138 00:07:22,470 --> 00:07:26,580 ‫so if the current friend is the one that we want to update, 139 00:07:26,580 --> 00:07:30,990 ‫then, well, here we are going to return an object, 140 00:07:30,990 --> 00:07:34,410 ‫which will contain all the elements, 141 00:07:34,410 --> 00:07:37,260 ‫so all the properties of the current friend, 142 00:07:37,260 --> 00:07:41,370 ‫but we want to override the balance property, 143 00:07:41,370 --> 00:07:43,720 ‫and we will override it with 144 00:07:44,760 --> 00:07:46,920 ‫friend.balance. 145 00:07:46,920 --> 00:07:51,153 ‫So the current value plus the value that we received, 146 00:07:52,380 --> 00:07:53,610 ‫and that's it. 147 00:07:53,610 --> 00:07:56,010 ‫So I just saved here by accident 148 00:07:56,010 --> 00:07:58,800 ‫and so immediately we get an error 149 00:07:58,800 --> 00:08:00,720 ‫because we are missing the second part 150 00:08:00,720 --> 00:08:02,520 ‫of the ternary operator. 151 00:08:02,520 --> 00:08:06,450 ‫So here in the second branch of the ternary operator, 152 00:08:06,450 --> 00:08:09,600 ‫in case that the current friend is not the one 153 00:08:09,600 --> 00:08:11,070 ‫that we want to update, 154 00:08:11,070 --> 00:08:15,300 ‫we simply return that friend unchanged. 155 00:08:15,300 --> 00:08:19,593 ‫And with this, we should now have a working application. 156 00:08:21,240 --> 00:08:25,740 ‫So let's again use the values that we already know, 157 00:08:25,740 --> 00:08:27,093 ‫so that we used before, 158 00:08:27,930 --> 00:08:32,470 ‫and let's actually still lock the value here to console just 159 00:08:33,360 --> 00:08:36,603 ‫so we can better understand what is happening here. 160 00:08:38,610 --> 00:08:40,260 ‫All right. 161 00:08:40,260 --> 00:08:41,670 ‫So remember that, before, 162 00:08:41,670 --> 00:08:44,400 ‫Sarah was owing us 20 euros. 163 00:08:44,400 --> 00:08:46,143 ‫And so now let's see what happens. 164 00:08:46,980 --> 00:08:50,040 ‫Now she owes us 170, 165 00:08:50,040 --> 00:08:53,310 ‫so that's the 150 that we got now 166 00:08:53,310 --> 00:08:57,570 ‫on top of the 20 euros that she was already owing us before. 167 00:08:57,570 --> 00:09:01,440 ‫And again, that's because I am paying the entire bill here. 168 00:09:01,440 --> 00:09:06,440 ‫So it's like I'm lending her, so I'm paying her 150 euros, 169 00:09:06,510 --> 00:09:10,023 ‫which is her expense, so her part of the bill. 170 00:09:10,980 --> 00:09:13,530 ‫So if we had now a 100 euro bill, 171 00:09:13,530 --> 00:09:18,360 ‫where my expense is 90 and then she pays it, 172 00:09:18,360 --> 00:09:21,690 ‫then she pays my 90 part of the bill. 173 00:09:21,690 --> 00:09:24,450 ‫And so then this should become, here, 100 174 00:09:24,450 --> 00:09:27,420 ‫and or, actually, it should become 80. 175 00:09:27,420 --> 00:09:29,190 ‫So let's wait for it. 176 00:09:29,190 --> 00:09:31,890 ‫And, indeed, now it's 80. 177 00:09:31,890 --> 00:09:34,023 ‫And the same logic can be applied here. 178 00:09:34,950 --> 00:09:38,160 ‫We just need to now reset these values here. 179 00:09:38,160 --> 00:09:40,680 ‫So let's say we have a bill of 20 180 00:09:40,680 --> 00:09:44,550 ‫and since Clark is owing me seven, 181 00:09:44,550 --> 00:09:48,720 ‫or, actually, you owe Clark those seven euros, 182 00:09:48,720 --> 00:09:50,730 ‫let's now use that here. 183 00:09:50,730 --> 00:09:55,350 ‫So here I'm using 13 so that Clark's expense is zero. 184 00:09:55,350 --> 00:09:59,730 ‫And then if I pay, we should be even after this. 185 00:09:59,730 --> 00:10:01,893 ‫And, indeed, now we are even. 186 00:10:02,730 --> 00:10:03,563 ‫Great. 187 00:10:03,563 --> 00:10:05,280 ‫So this can be a bit confusing, 188 00:10:05,280 --> 00:10:07,680 ‫but this is also not really what matters. 189 00:10:07,680 --> 00:10:10,140 ‫What matters is all the knowledge, 190 00:10:10,140 --> 00:10:13,170 ‫or at least all the practice that we just gained 191 00:10:13,170 --> 00:10:15,960 ‫from building this amazing project. 192 00:10:15,960 --> 00:10:18,480 ‫There's just one small thing missing, 193 00:10:18,480 --> 00:10:22,290 ‫which is that here the state is not clearing. 194 00:10:22,290 --> 00:10:23,790 ‫So we have two options now. 195 00:10:23,790 --> 00:10:26,910 ‫It's to clear the state here in the form, 196 00:10:26,910 --> 00:10:31,230 ‫but even better, and which is what I actually do here, 197 00:10:31,230 --> 00:10:35,880 ‫is after this is done, 198 00:10:35,880 --> 00:10:37,890 ‫so after the bill is split, 199 00:10:37,890 --> 00:10:40,950 ‫it'll automatically close the form again. 200 00:10:40,950 --> 00:10:44,433 ‫And so that's very easy to do, right? 201 00:10:45,300 --> 00:10:46,710 ‫Let's just get rid of this. 202 00:10:46,710 --> 00:10:50,010 ‫And then here, thanks to the power of state, 203 00:10:50,010 --> 00:10:55,010 ‫once again we can just say set the selected friend to null, 204 00:10:57,630 --> 00:10:59,190 ‫and that's going to be it. 205 00:10:59,190 --> 00:11:02,310 ‫So once again, very, very easy to do 206 00:11:02,310 --> 00:11:03,930 ‫with the power of state. 207 00:11:03,930 --> 00:11:07,560 ‫Imagine doing this kind of stuff with Vanilla JavaScript. 208 00:11:07,560 --> 00:11:10,623 ‫You would probably become crazy at some point. 209 00:11:11,550 --> 00:11:14,880 ‫So with this, it's super straightforward. 210 00:11:14,880 --> 00:11:17,160 ‫Let's just reload here. 211 00:11:17,160 --> 00:11:19,170 ‫Now let's use Anthony here. 212 00:11:19,170 --> 00:11:20,373 ‫Let's say 150. 213 00:11:21,570 --> 00:11:23,760 ‫Our part was like this, 214 00:11:23,760 --> 00:11:25,290 ‫and it doesn't really matter, 215 00:11:25,290 --> 00:11:29,280 ‫but as I click here, you see that the form disappeared, 216 00:11:29,280 --> 00:11:31,893 ‫and this value here, of course, has changed. 217 00:11:32,760 --> 00:11:33,593 ‫Great. 218 00:11:33,593 --> 00:11:36,450 ‫And with this, our application is feature complete, 219 00:11:36,450 --> 00:11:39,930 ‫and you just added one more small React up 220 00:11:39,930 --> 00:11:41,400 ‫to your portfolio. 221 00:11:41,400 --> 00:11:43,500 ‫So very, very well done. 222 00:11:43,500 --> 00:11:46,470 ‫You're doing great progress here. 223 00:11:46,470 --> 00:11:49,590 ‫Now, in order to become even better as we finish 224 00:11:49,590 --> 00:11:51,540 ‫this first part of the course, 225 00:11:51,540 --> 00:11:55,110 ‫it's very, very important that you build a lot 226 00:11:55,110 --> 00:11:59,460 ‫of similar and small projects just like this one. 227 00:11:59,460 --> 00:12:02,130 ‫So it can be something like a shopping list 228 00:12:02,130 --> 00:12:04,230 ‫or a simple goal tracker 229 00:12:04,230 --> 00:12:07,590 ‫or something like a conference speaker list 230 00:12:07,590 --> 00:12:12,060 ‫where users can select which talks they want to go to. 231 00:12:12,060 --> 00:12:14,700 ‫So just some small app like this. 232 00:12:14,700 --> 00:12:18,330 ‫It doesn't have to be super fancy or original, of course. 233 00:12:18,330 --> 00:12:21,000 ‫All that matters is that you practice the skills 234 00:12:21,000 --> 00:12:25,200 ‫by writing the code without following a tutorial. 235 00:12:25,200 --> 00:12:29,100 ‫So without following anyone writing the code for you. 236 00:12:29,100 --> 00:12:32,790 ‫So I really advise you to not move on to part two 237 00:12:32,790 --> 00:12:36,810 ‫before having built something small completely on your own. 238 00:12:36,810 --> 00:12:38,970 ‫And then, once you are done with that, 239 00:12:38,970 --> 00:12:40,920 ‫no matter how long that takes, 240 00:12:40,920 --> 00:12:42,690 ‫I hope to see you very soon 241 00:12:42,690 --> 00:12:45,033 ‫in that part two of this course.