createMessage Action

[00:00:00]
>> Mike North: The next two things we're going to do are creating a chat message, like adding a new chat message to a channel and deleting a chat message. So if you hover over these you can see you got a little trash can, we're gonna turn that into a delete operation.

[00:00:18]
So, we're gonna begin by looking at the API examples file just to see what it takes to create a message and delete a message. That's gonna drive what we have to do here. I can see that creating a message, we can pass a user ID. I also happen to know if you pass a whole user object there, if we had to.

[00:00:43]
And deleting a message is a delete request, treating messages as a top level API resource, right? This is not nested thing anymore. So it's a delete call to messages, slash, and then, a message ID, which will be up here, like id. But obviously we don't pass an ID to our back end, the back end creates that for us.

[00:01:07]
Let's go, so I want our presentation components to remain presentation only. So this whole business of creating and deleting chat messages, I want that to be handled in the container. And I want the actions that relate to those two operations to be threaded through and wired up in the respective correct places.

[00:01:35]
But those components should not know much about what all is going on. They she just know how to use this thing and not how they're defined. So we're gonna go to the chat container and we're going to create a new action. And here we are, we're gonna just call it createMessage.

[00:01:55]
>> Mike North: And we only need the body of the message. In order to make the API call properly, we will need a user as well. However, we kinda can get that by another means. We can use the auth service, right? That's sort of a global concern, the currently logged in user.

[00:02:16]
So we can just operate in terms of the message body. We're going to grab the channel ID and the team ID, just the same way we did up here, because those are part of the payload here. Just looking at this there's our team ID, our channel ID. So, we need both of those to be in the fetch body.

[00:02:39]
And let's go off to the races. So do we have fetch already imported? We do, so we can say, a response, await fetch and we'll grab the URL here. Well, that's simple enough, API messages. Now, we kinda make this an async function.
>> Mike North: Now, fetch by default will make a GET request.

[00:03:11]
But this is not what we want in order to create a message. We want a POST request, and we wanna pass this header along for the ride as well. So I'm gonna copy that to my clipboard so we can use it appropriately in the fetch options. So we'll say method is POST, headers is that.

[00:03:39]
>> Mike North: So that's part of what we need. We also need a body. And that's gonna be some JSON thing, right? This is an object, it's gonna be the payload. And if I look at my example, let's just start with the sample payload we have here.
>> Mike North: So there we go, so I would always post to a particular team with a particular channel.

[00:04:10]
We can remove this hard-coded stuff, so teamId, we already have a variable up there. So we can just do that. Channel ID, make my life easy if I make a little destructure alias up there. So now channelId looks good. userId, we gotta get off of the auth service.

[00:04:32]
And the body we're gonna be given. And that's already the correct name.
>> Mike North: Wonderful, so all I need is to have a userId variable up here that gets what we're interested in. Do we already have the auth service injected? We do not, so we'll need to do that.

[00:04:55]
Import inject as service from @ember/service and we can just do inject or @service auth. And I'll use this, right? That gives us that nice auto complete.
>> Mike North: Build error, I have an incomplete expression, so yes, very much a build error. So this.auth and currentUserId.
>> Mike North: Okay, and we have our response.

[00:05:45]
So we can start here right now.
>> Mike North: We're gonna run into an issue, and I'll tell you what it is already so we can look for it. The source of truth for our messages in the channel is this array called messages. And even though we make this API call, we would have to do something specific to add that to the messages array.

[00:06:15]
And we're not doing that yet, but we'll be able to test this out in a basic way by creating a message and then doing a refresh, triggering a fresh load of any new stuff that happens to be there in our little JSON database. So I think this is enough for us to start wiring things up.