Keeping UI in Sync

[00:00:00]
>> Mike North: Now, let's make it so that it updates live. What we're gonna have to do,
>> Mike North: Let me just take a little pause here.
>> Mike North: That would be a good time to break to the next segment.
>> Mike North: The last little step of this problem that we're gonna tackle is making it so that we don't have to reload the page to see our new message that we just created.

[00:00:29]
And we gonna do so by, in addition to making that post request, let's just add it to that messages array.
>> Mike North: So that's in the chat-container, after the response comes back, if the response is okay, well, let's just say if it's not okay will throw an error saying couldn't.

[00:00:55]
>> Mike North: Couldn't save the chat message. So if we make it beyond that point, we know the response returned a thumbs up to us, and we will get the JSON that the server returns. This will have a chat message ID and a timestamp. Those are server concerns, they are responsible for doing that.

[00:01:16]
So we could do message data await response.json. Let's put a debugger there and see what we end up with.
>> Mike North: Send. There's our message data, so great, we've got a body at channel ID created at ID. So this is a lot of what we need to render, unfortunately it doesn't include the user.

[00:01:48]
And if you look at the way these messages come over the network, if we just take a quick peek.
>> Mike North: Let me pull this up, there's messages. You'll see that we embed user record in each of them, and this is so that they each have a nice icon and a name.

[00:02:08]
The idea is not really not enough for us to render the name and this little picture over here. And that's fine, we can just request the user ID here. Now, this is where in a more robust app, I would probably bake this into the auth service. And I would say, when the application loads or immediately after you login, I would go and in addition to storing the user ID, I would fetch the user record itself and hold it there.

[00:02:35]
In this case, this is the only place where we'll really need it, I mean aside from up here, which you could update on your own time if you want. But we're just gonna fetch it every time we create a message so that we can assemble the correct data structure here.

[00:02:52]
So we could say, user is, we'll do this all in one line, await, await, fetch API users, and then user ID.
>> Mike North: And then once that returns,
>> Mike North: .json, there you go, a double await. But this’ll end up with getting us our user record. And then we just want to save this messages equals, cuz this is immutable, we are creating a new array, we’re using assignments so that the track's property is updated accordingly.

[00:03:43]
>> Mike North: So it's a new array that is the messages that are already there, combined with this new message. And we're gonna create a new object that has everything on message data, and user. So we can use a spread operator both with arrays and with objects. But this is when you’re dealing with immutable data and you have to sort of create a new array based on the contents of an old array, or create a new object based on an old object.

[00:04:12]
Being able to kind of unzip this It's a really nice syntax to have, and it saves you a lot of object assign and array constructor stuff. So let's see if this did the trick.
>> Mike North: Looks like it, it worked. So, all we had to do create a new ray, it's track property, things look good.

[00:04:42]
Let me check the test real quick.
>> Mike North: Channel footer, it's a new, remember we just created the JavaScript module for this. We've done quite a bit of testing here, I'm gonna just comment this one out, and we are otherwise good to go.