Event Handlers

[00:00:00]
>> So the next thing we're gonna do, is talk about something that is common in a lot of apps, particularly view. And so we're gonna talk about event handlers. And so, when we talk about event handlers as a brief recap, if we take a look at, actually, let's go to our new restaurant form.

[00:00:15]
This is probably the best place to take a look at this. Is that we have this thing down here when we're creating, and you'll notice that we're inlining this emit, right? And it says, emit new restaurant, add new restaurant, pass new restaurant. But again, one of the problems with this is that it's buried inside of our code.

[00:00:36]
And so, let's go on first off by refactoring this, so we can talk more about what we're gonna do with this. So personally, I tried to avoid inlining the dollar sign emit inside of the template whenever possible, just because oftentimes it's a bit of logic that you wanna be able to call multiple times.

[00:00:52]
So what I would typically do then, is let's go ahead and swap this over to setup. We're gonna delete these two, then we'll define our emits as such. And then let's just comment that out real quick. We'll cast it. So the first one is an event called add-new-restaurant, where we take a type of restaurant which should be of type restaurant.

[00:01:19]
Then basically we have the same thing for the second one, but this one it's canceled new restaurant, and actually it doesn't have a payload at all. And then we just need to define what's being returned. Nothing, so we just add void and there we go. Now we have that.

[00:01:36]
And then before we finish up, let's do this, const new restaurant is a ref, that is from view. Wrap all that, and then what's nice now is that because restaurant status list has been imported, I don't need to declare it a second time. So this is how this ends up shaking out once we've migrated it.

[00:01:57]
Okay, so let me go ahead and start by just committing this to the exercise branch. So you can see the progression, factor move new rest form to script setup. Great, all right. So what we'll notice here now, is we have this emit here happening, but I actually just probably wanna just call an addRestaurant function.

[00:02:22]
I think inlining it this way is the cleanest way to just be like, okay, there's gonna be a function that's run on click. No one has to worry about like, wait, what's the dollar sign, what's emit? No, there's a function called addRestaurant. Okay, then we'll how are we gonna define that.

[00:02:36]
Well, let's go ahead and do that. So actually I'm gonna add this below. So const addRestaurant is a function, and that function when clicked upon will emit, what will it emit? Well, we don't have our emits defined, so we just need to declare it here, and then we can say emit what?

[00:02:55]
Let's see, emit, CTRL + Space, add-new-restaurant, yes, that's what I want. I gotta love autocomplete cuz I just reduced the number of typos I have, and then newRestaurant.value. I think that should do it. Except, whoa, interesting. Look, it's yelling at us. Why, because it's saying, wait, what is this object you're passing me?

[00:03:17]
It's not really a restaurant. Well, we can fix that. We just pass it here and define it there. And voila, now you have everything very consistently typed as we've been learning so far. And so, now, if we go ahead and go inside of our app. Let's go the other way.

[00:03:33]
So inside of New, and then we'll be like Benget and the Jets, test.com, Create. For some reasons the title disappeared, but we'll figure that out in a second. I think I know why. I think I do know why. Okay, so clearly something is being added, because, okay, so actually let me explain this part because I forgot.

[00:03:58]
When we emit the restaurant, what's happening is that the parent component that it lives on, which is currently parent page, you'll notice that when we scroll down, The new restaurant form here, this is where we're actually calling, basically we're listening for the event. So, I'll just multi-line this just to make this a little bit easier to read.

[00:04:22]
But it's basically when you declare a custom event in view, like add new restaurant, it's basically saying we can listen to this thing called add new restaurant. When this event is triggered, run this function basically within the parent component. So this addRestaurant here is being triggered right here.

[00:04:40]
And so, this is where again now our work that we were doing before starts coming together, why? We know that the payload is supposed to be restaurant, and that's what's being defined at the emit. So we have consistency here. And then we know that, okay, restaurant.list.value.push, great, hideForm().

[00:04:55]
This is starting to come together really nicely. Okay, so that looks good, but we have a slight problem. So let me first start by, let's refactor this one real quick to cancel restaurant, new restaurant. And then now that we have that, we'll just copy this real quick and then we'll just say, cancelNewRestaurant, emit what?

[00:05:23]
CTRL+ Space, wait, that's the wrong one.
>> Trying to be smart because you have the second argument, maybe?
>> I think you're actually right. Yep, so what was mentioned in the class here, is that currently it knows that cancel new restaurant does not have a parameter, but add-new-restaurant does.

[00:05:42]
So if we strip this out, we should see, there it is. Being a little bit too smart, in [LAUGH] my opinion. But that was very nice. Okay, so now we have this. Now everything's refactored correctly. We're good, I'm gonna do see a red squiggly line, but we'll deal with that in a second.

[00:06:00]
Okay, so let's finish up that refactor.