‫Welcome to the last video
‫in this section where we will now finish
‫up the application that we have been building.
‫So, in the last lecture, we already made
‫all our elements here controlled elements.
‫And so now all we have to do is to listen
‫for the submit event here on this form
‫and then handle it accordingly.
‫So that's easy enough.
‫It's always in the same way.
‫So onSubmit.
‫Then, typically, we write a handleSubmit function
‫right here.
‫So function, handleSubmit,
‫which will receive the event.
‫And then, as always, we need to do preventDefault.
‫Alright? And let's start by adding some guard clauses here,
‫so basically preventing this form from being submitted
‫if there is no bill
‫or if there is no value paid by the user.
‫So in this case, just return and do nothing now, okay?
‫But if there is a bill or a value paid for the user,
‫well then now it's time to actually split the bill.
‫Now in practice, that means basically
‫that the balance of the user in question will be updated.
‫So of the friend here in question, I mean.
‫So whenever we split a bill,
‫it means that this value right here will be updated, right?
‫So something is clearly happening on the screen.
‫However, does that mean
‫that we now need a new piece of state?
‫Well, actually no, because we already
‫have these friends here in our state
‫and all we're doing is to update them, right?
‫So basically all we will do is to update this balance value
‫that is displayed here.
‫So let's come again to the component
‫where that state is living,
‫so this state right here,
‫and then let's write yet another handler function.
‫So function, handleSplitBill.
‫And this one will simply receive a value.
‫So in this case, there is no need
‫to pass in the entire friend
‫because we already know which friend is going to be updated.
‫And so that's exactly the current friend, right?
‫But for now, let's actually just lock this value here
‫to the console.
‫So we will take care of this more complex updating logic
‫at the end.
‫So for now, let's just pass this handle function here
‫into the component.
‫So right into this component here.
‫So onSplitBill
‫will be handled by handleSplitBill.
‫Okay?
‫Then let's come down here again
‫and let's then receive onSplitBill.
‫And then finally we can use that here
‫in order to update this state.
‫Well, for now, we will only lock something to the console,
‫but we will take care of updating in a minute.
‫For now, we first need to figure out exactly
‫with which value we will update different balance
‫and this is actually the most confusing part
‫of this whole application,
‫even more confusing than all the React stuff itself.
‫So remember that the bill can basically be paid either
‫by you, so the user,
‫or by the friend,
‫and so based on that, we now need to set a value.
‫So we will use the ternary operator here for that.
‫And so we say who is paying is equal to the user,
‫which is basically you.
‫So remember that negative numbers
‫in the balance are owed by you, so by the user,
‫and positive numbers means that your friend is owing you.
‫Therefore, if this here is the situation,
‫so if you are paying,
‫then they will be owing you their part.
‫And so therefore, this is a positive number.
‫So the value here will be paidByFriend.
‫And in the opposite case, so if your friend is paying,
‫then you will actually owe your part,
‫so the paid by user part,
‫and it's going to be a negative value,
‫again because the negative values are the ones owed by you.
‫So minus
‫paidByUser.
‫And so then, inside this function here later,
‫we will add that value that we just returned here
‫onto the balance.
‫So once we're done with all that,
‫I promise this will be a lot easier to understand.
‫But anyway. Let's now come here to our console.
‫Let's just quickly reload here
‫and then let's just try any of these.
‫So let's say the bill is 200 euros
‫and your part is 50
‫and Sarah's part is 150 and you are paying the bill.
‫And so the result is then a positive 150,
‫which will be added on top of the balance.
‫So it's plus 150 because it's your friend who is owing you.
‫And so, yeah, those are the positive numbers.
‫If we change this here to Sarah,
‫then it'll become minus 50,
‫so that is your part which you are then owing
‫to your friend.
‫And so then it becomes minus and your part.
‫So minus 50.
‫Alright?
‫So our function here is now receiving that value.
‫And so now let's update our friend's state.
‫So setFriends.
‫And once again, the new array
‫that we will return here will be based
‫on the current friends array.
‫And so here we need that callback.
‫And then what we're going to do is friends.map
‫because we want to return a new array
‫with the exact same length as the current one.
‫So that's how we always do it when we update an object
‫in an array.
‫So we have done that many, many times before.
‫And so if the code I'm gonna write next
‫is a bit strange to you,
‫then just feel free to go back to one of those lectures.
‫But anyway, let's now loop actually over this array
‫in which each of the objects is, of course, a friend.
‫And so let's then update the friend whenever
‫the current friend.id is equal
‫to the selectedFriend.id.
‫And so here's what I mentioned earlier,
‫which is that we already know which of the friends
‫is getting updated, right?
‫Because we already hold that in the state.
‫So if this is the case,
‫so if the current friend is the one that we want to update,
‫then, well, here we are going to return an object,
‫which will contain all the elements,
‫so all the properties of the current friend,
‫but we want to override the balance property,
‫and we will override it with
‫friend.balance.
‫So the current value plus the value that we received,
‫and that's it.
‫So I just saved here by accident
‫and so immediately we get an error
‫because we are missing the second part
‫of the ternary operator.
‫So here in the second branch of the ternary operator,
‫in case that the current friend is not the one
‫that we want to update,
‫we simply return that friend unchanged.
‫And with this, we should now have a working application.
‫So let's again use the values that we already know,
‫so that we used before,
‫and let's actually still lock the value here to console just
‫so we can better understand what is happening here.
‫All right.
‫So remember that, before,
‫Sarah was owing us 20 euros.
‫And so now let's see what happens.
‫Now she owes us 170,
‫so that's the 150 that we got now
‫on top of the 20 euros that she was already owing us before.
‫And again, that's because I am paying the entire bill here.
‫So it's like I'm lending her, so I'm paying her 150 euros,
‫which is her expense, so her part of the bill.
‫So if we had now a 100 euro bill,
‫where my expense is 90 and then she pays it,
‫then she pays my 90 part of the bill.
‫And so then this should become, here, 100
‫and or, actually, it should become 80.
‫So let's wait for it.
‫And, indeed, now it's 80.
‫And the same logic can be applied here.
‫We just need to now reset these values here.
‫So let's say we have a bill of 20
‫and since Clark is owing me seven,
‫or, actually, you owe Clark those seven euros,
‫let's now use that here.
‫So here I'm using 13 so that Clark's expense is zero.
‫And then if I pay, we should be even after this.
‫And, indeed, now we are even.
‫Great.
‫So this can be a bit confusing,
‫but this is also not really what matters.
‫What matters is all the knowledge,
‫or at least all the practice that we just gained
‫from building this amazing project.
‫There's just one small thing missing,
‫which is that here the state is not clearing.
‫So we have two options now.
‫It's to clear the state here in the form,
‫but even better, and which is what I actually do here,
‫is after this is done,
‫so after the bill is split,
‫it'll automatically close the form again.
‫And so that's very easy to do, right?
‫Let's just get rid of this.
‫And then here, thanks to the power of state,
‫once again we can just say set the selected friend to null,
‫and that's going to be it.
‫So once again, very, very easy to do
‫with the power of state.
‫Imagine doing this kind of stuff with Vanilla JavaScript.
‫You would probably become crazy at some point.
‫So with this, it's super straightforward.
‫Let's just reload here.
‫Now let's use Anthony here.
‫Let's say 150.
‫Our part was like this,
‫and it doesn't really matter,
‫but as I click here, you see that the form disappeared,
‫and this value here, of course, has changed.
‫Great.
‫And with this, our application is feature complete,
‫and you just added one more small React up
‫to your portfolio.
‫So very, very well done.
‫You're doing great progress here.
‫Now, in order to become even better as we finish
‫this first part of the course,
‫it's very, very important that you build a lot
‫of similar and small projects just like this one.
‫So it can be something like a shopping list
‫or a simple goal tracker
‫or something like a conference speaker list
‫where users can select which talks they want to go to.
‫So just some small app like this.
‫It doesn't have to be super fancy or original, of course.
‫All that matters is that you practice the skills
‫by writing the code without following a tutorial.
‫So without following anyone writing the code for you.
‫So I really advise you to not move on to part two
‫before having built something small completely on your own.
‫And then, once you are done with that,
‫no matter how long that takes,
‫I hope to see you very soon
‫in that part two of this course.