Message Submit

[00:00:00]
>> Mike North: So the disabled state works well in our footer. Let's handle the click action. Unclick, send message.
>> Mike North: And we'll create our action.
>> Mike North: Send message. And all we need to do here, so this will receive an event, but we don't really care about it. We already have the body, that's what we need.

[00:00:31]
So, what we would want to do here is connect with our earlier work. The stuff that we did in the real container component, the chat container. And we can be passed an action as an arc. So we could do this, arcs send chat message. I'm deliberately naming things in a way that doesn't collide.

[00:00:56]
So we've got send message which is a local action and then we expect to be given a send chat message, and we'll pass it the body. Let me make sure that I don't have any errors here cuz I see blank. Let's see, on modifier undefined is not a valid thing.

[00:01:16]
Let's check the js file. I don't have a handleSubmit, thank you very much.
>> Mike North: Yep, now that'll work, In fact, I don't want the sendMessage anymore, handleSubmit is the better way to do it. Right we don't have to worry about this button. We can just wire it up to the exact same thing.

[00:01:44]
Good catch. So regardless of whether this button is clicked or whether this form is submitted they both end up going to the exact same action. We could have also changed this to a submit input. What kind of HTML do its thing the way it works with forms. But obviously you can have an action that's invoked two different ways.

[00:02:07]
>> Mike North: And should be getting to a pretty good state here. Let's see. Let's reload, clear this out. We're seeing our chat messages again, we have no errors, we are almost there. So the last thing we need to do is take care of this args.submitMessage(). We want to be giving a submit message, this.body, and we want to pass it that string.

[00:02:35]
So we got to just wire up the stuff we did a couple minutes ago and the stuff we just did. We got to go to channel HBS, first we’re gonna go to our container component. We’ll start there and thread it all the way through. So we've got createMessage.

[00:02:57]
Great, it's an action. Let's go to the template.
>> Mike North: There's my container. All right, so we wanna yield this action out. We wanna make it available to everything the container contains. And we can do that by yielding another value out. Now I don't want to get to the point where I'm yielding at way too many things.

[00:03:23]
It would be nice if I could build an object that I yield at. Turns out I can. Ember has a built in helper called hash. And this let's you assemble key value pairs. So we could just say that's the action I wanna invoke and we can say create message.

[00:03:45]
It means invoke that function. On the other side of this, I can, sort of, same place that we're consuming messages which is in channel.hbs. I could just say this is the channel API. It's almost like a mini STK for operating this channel. And I could pass to the channel footer, send message, channelApi.CreateMessage.

[00:04:21]
>> Mike North: So just to follow through, where things are coming from and where they're going, we've got our container. Here's the action. We are yielding the action out as the second argument passed to yield. We're kind of lumping it all into an object with a hash helper. And then in the channel HBS, which is where we're kind of catching that, we're picking up, here's the first argument past yield.

[00:04:51]
Here's the second argument passed to yield, this is the one we created with the hash helper. And just like in JavaScript, we can use .PropertyAccess, we can say off of this object, give me this create message thing. And this is gonna come in handy cause we’re gonna do delete message in a moment and I don’t want to just have to have like 7 arguments in a special order that I remember.

[00:05:11]
I want to be able to refer to things by name and not by position. And so now send message in the channel footer, that's passed in as an arg. And if we go into the channel footer.
>> Mike North: Send message. Sorry I keep flip flopping on this name, but this is why it's good to sort of thread things through and follow everything.

[00:05:34]
So, I'm gonna post in the JavaScript channel here and let's see if this works.
>> Mike North: Clear and send. So, interesting. So I sent it twice.
>> Speaker 2: Do you have it on submit?
>> Speaker 3: [CROSSTALK] A form submit handy?
>> Mike North: Good call.
>> Mike North: I didn't prevent defaults, that's why we got the reload.

[00:05:59]
All right, let's fix it. So channel-footer, first we need to receive the event and then we need to do preventDefault. This will not be harmful if the button is pressed and if it's a button event. And let's just remove that handler from the button itself. That should work.

[00:06:24]
>> Mike North: All right, let's try again.
>> Mike North: So I'm gonna hit, I'm gonna clear this out. Hit Enter. There's my post request, we didn't expect anything to be changed. But now if I refresh I should see it in the messages list at the bottom, and I do. So we did actually persist that data.

[00:06:46]
I noticed that there's one improvement we can make here real quick and that is after we send the message, and let's make this async. So even though we've been passed this action it's an async function. We can await it so that as soon as this is done, we can clear out the text in the field.

[00:07:06]
So we're not left with our message still in this field. So you could say this.body equals empty string.