deleteMessage Action

[00:00:00]
>> Mike: The last major change we're going to make to this app is delete message. And we're gonna just follow a very similar process that we use for create message. We're gonna begin at the container component and then we're gonna thread that action through to the delete button. So let's look at Chat container, we're gonna create a new a sync action called delete message and we're going to make a delete request.

[00:00:32]
So I'm actually gonna copy this, that looks like I might wanna use it, yep. We’re gonna take it a message ID, whatever we wanna delete and we’re gonna build our URL like so.
>> Mike: We’re gonna say the method is delete, just trying to save as much work as I can here.

[00:00:59]
Method is delete, we're passing the same content type as create a message and we can basically, we can't quite stop there. We should probably look through the list of messages, like we need to update our UI right. We should look through the list of messages, find whichever one's ID matches the ID we were given find that index then splice that array so that it's not there anymore.

[00:01:30]
So let's do that. So we could say message IDs equals messages map, map them to their ID and find the index.
>> Mike: Index to delete message IDs, index of the message ID. That's the index to delete and now we can say new messages. Cuz if we’re gonna use splice that mutates the array so I’ll do this, messages, splice, so this starts removing elements that are particular index.

[00:02:24]
So that's the index to delete. We wanna just delete one. And now we're gonna have to do this tricky thing where we say this dot messages equals this dot messages and we'll leave a comment here cuz this looks funky necessary for tracked. This is how property tracking is gonna pick up on this.

[00:02:48]
>> Speaker 2: So you didn't have to change the array to do assignment of it?
>> Mike: To insert something?
>> Speaker 2: To cause the tracking to regenerate. You're not taking the values of it and putting into a new array and splatting it, you're just assigning it?
>> Mike: No, so the way I think about variables in JavaScript, this makes sense to me.

[00:03:11]
So, there's a variable, a property on this class called messages. And its value happens to be an array, which exists somewhere in memory. So, serve a local name which points to this value. If you do an assignment and give it that same array. There is no short circuiting that will say, I'm already pointing to that thing.

[00:03:32]
And I'm going to skip calling the getter or the setter, or whatever needs to happen in order to make that assignment happen. So it'll still go through the same path. The reason we're doing this is because this is the mechanism by which we trigger a reevaluation of the world and what needs to update in the dom.

[00:03:52]
Does that make sense? The fact that it happens to be the same array is not of consequence, all right? So, good, I think we've got this set up pretty well. Let's,
>> Mike: Let's yield this new action app. There's deleteMessage. So let's go to our container and we're gonna have something that looks basically the same.

[00:04:21]
It's just gonna be delete message. And now this object that we've yielded out starts to make a lot of sense. Imagine a situation where you have 20 different actions here, right. If you've used something like Ember Power Select or these highly customized components like Dave Pedro Components where you've got actions that fire when people paginate through months.

[00:04:44]
Or when people begin selection of a date range and end selection of a date range is very flexible components often will expose a huge variety of actions. So that you can respond to those changes appropriately. And you'll just wrap over your own custom, whatever it is. Maybe it's a airline flight finder or something.

[00:05:04]
The date picker doesn't know about that, but it needs to expose all of these triggers for you. And yielding them all out as an object lets you kinda pick up on them by name. It's a much more friendly API to consume than a magic ordering of 26 different things that you're yielding.

[00:05:22]
So let's go to where this is gonna pop out and that is in channel.hbs. It's going to come through in this channel API. It turns out that we can use your partial application here. It turns out that we can just pull it right off this channel API. And we can say, delete equals invoke the function.

[00:05:47]
Channel API, delete message and we're gonna pass it to message ID. So there you go. Now although delete message is an one argument function, right it needs a message ID to be passed. From the standpoint of this component here, it thinks it can treat it as if it's a zero argument function.

[00:06:15]
And we're not gonna need to do much at all to wire this thing up. So let's go into the template, the action. The org that I've passed in, happens to be a function, but we treat it like any other org and it's called the delete. So were gonna go to message and then find that little trashcan.

[00:06:35]
There it is and we'll say unclick, delete. That's it, it should work. Save and let's delete some of this nonsense at the end. Nice, just works. That's an example of how partial application, baking all of the arguments in, outside of the component. This really made our job simpler when we're dealing with the component on the inside.

[00:07:10]
We just have to think about what's the dumb element and which event and here's your function, go and it just works. Let's check our tests real quick, I have no reason to believe that they started to fail. Still looks good. So I'll commit this code and push it up.