Async UI

[00:00:00]
>> It's time for us to do the autocomplete, you gonna make it happen. And I think at this point we've learned enough of the little pieces along the way that is going to be less painful than we all imagined. Because we have walked down this road together and here we are.

[00:00:18]
So if I just look quickly at this UI, that's not it. I look quickly at this UI, it's gotta search field. There is a fetch button in case I wanted to fetch them by hand manually we're gonna say as they type in here. I wanna show at least some of the names names onto the page.

[00:00:35]
Well, we'll use a button later. Cool. So, the thing about what we need to do, well we know that we need to get the value of the input. Right, we've dealt a lot with buttons, but we are going to need an input field and a value that we're working with.

[00:00:55]
So let's go ahead and that's nothing super surprising here. We'll say that our search stream is from the event of that search field, which I've got cast already. And really we care about input at this point, right? Whenever they put new input in there, that's when we want to jump in and deal with it.

[00:01:19]
But as with most things like if you've used a framework namely react that, it's not just the event that you need see event target value. Alright, so what's in this search field that we really need, so we can actually grab map at that point. Because this is not an observable, it's not anything asynchronous, simply a value we'll go ahead and we'll grab the event.

[00:01:46]
Target value, right? So now whenever there's input, we haven't subscribed to it yet, but we'll get it and we'll get the value of that. Well, inputs a little, we'll get the value of the input field itself. Input will be whenever they change a letter in it or something in the signs.

[00:02:04]
Cool and. We have two choices here, I can put a merge map in here, or I can use a different map. What kind of map do we wanna merge, cause we have to make a fetch from here. Let's try marshmallow. Let's do it. Let's learn together. Map, we'll take the search term, because we know we wanna make a fetch.

[00:02:26]
And from here, we'll say, we'll return, From fetch our endpoint. And this is, I happen to know that the endpoint is, if you look surely we want to change this one a little bit. Because we're gonna put that delay on the end Maybe spell search right. Sweet. I think the endpoint in there was more helpful, but we've got this search where I should be able to do API pokemons search pika.

[00:03:07]
Let's just verify that real quick before I get too far ahead of myself. Yep, there's Pikachu We don't get a lot of data about Pikachu. We'll learn more about Pikachu later, right now all we know is his number 25 in the pokey dex. His name is pikachu and he's a mouse pokemon, so we can search from fetch and then we'll say plus whatever the search term was.

[00:03:36]
Right? That's gonna be a little bit problematic. So we also need to go ahead and get the, what's not problematic. It's just we know that we need the response because the fetch API. So we'll say pipe, so another merge map in there and we will say that we want to do response to JSON right, we know that.

[00:04:06]
And when that's all done, when we've got everything, we will clear the results from the page. We'll add, I wanna actually just, so if you looked at the API before, I wanna actually just get the array, so there's an operator, another I could use map. The other thing I could use is pluck and pluck.

[00:04:37]
You might have seen it from lodash, pluck will just grab a given field. So in this case, we want pluck, do a little bit data manipulation here. So we just want that array in there. And then we'll add results, and then we'll subscribe to that search event. Now I could do the add results in the subscribe as well.

[00:05:00]
I'm just kind of showing you, you can do both. All right great. This is not gonna work perfectly we know that. Some of you are like, why isn't he. I'm not we're not doing that yet we're gonna see how it behaves first and foremost. Let's make sure it doesn't blow up at all first.

[00:05:24]
So it works great in a very fine situation, right? But what happens if we add just a little bit of chaos energy here? Right, what happens when we say delay could be like second. With a little bit of fuzziness to it. All right, and we'll say, no actually Bulbasaur, no actually Charmander.

[00:06:01]
And like sometimes it works out, but you can see that it's kind of all over the place, right? Other requests that we're doing even had pika and there was a pity on there, right? Because the requests are coming back at the wrong time. We don't care about the previous requests, what should we do?

[00:06:16]
>> Switch map.
>> Switch map. And the one thing that I wanna show you, that's kind of nice from using from fetch. If we go in here, we've got our network requests. You can actually see that from fetch is actually full on canceling those requests for you. So every time we use a switch map, and we've unsubscribed from that observable.

[00:06:40]
Not only are we not listening to the response, we're also just full on canceling that request. Now, what would we do just kinda tie in some previous things all together? What would we do if we wanted to wait a little bit of time, before we even sent that request?

[00:06:56]
>> Bounce
>> Bounce. This is probably the bounce time, right? So I have that imported already? Bounce time. Okay, so here, we could say, when an input event happens, With bounce time, let's say 300 milliseconds. So now instead of like we can cancel those requests, they're still going out, though the server doesn't know that they're canceled.

[00:07:23]
The browser knows, server doesn't. So we now we can say, okay, only when they pause, right? Kind of pulling them what we saw before when we implemented that notification when they chill out for about 300 milliseconds, then. And you could do this any other way really and then we'll go fire the request.

[00:07:41]
So now if we take a look at the network panel down here. We can go like nothing until we stopped typing for what felt like a reasonable amount of time. So now we don't thrash through canceling those requests, we can simply say only do this while things are happening.

[00:08:01]
The other thing that we can do, and this won't actually do anything. I just wanna point it out, is we have this operator called distinctUntilChanged. Which basically won't as long, if it's the same value as it was last time, don't do anything. Right now between a switch-map and the fact that input fields only emit when they've changed, doesn't really do a lot for us.

[00:08:21]
But I kind of just want to make you aware that it exists. So we'll get that value. We'll say distinct until changed. And so now, even if. We really want that on the endpoint, though, like that worked, but that's not where not to put it. Work either way, so we just string the catenating.

[00:08:46]
So if it's the same value like the bounce, if for some reason you get to the. I mean, this could actually theoretically work is like the input field is going to change. But even after 300 milliseconds, if it's the same value was last time. Don't send another request, right?

[00:09:01]
So now we're really trying to treat the backend team nicely here. Alright, so chill out until they stopped for 300 milliseconds, then go get the value of that input field. If it's the same thing it was last time. We don't need different results. This isn't changing, right? Otherwise go with the most recent request that we received, forget all the other ones, and then we'll show it onto the page.

[00:09:27]
And like effectively, that's an autocomplete in our extrius. Right. Now, I just want to again talk about like, if we started with that, you might have cried. But as you build up all the small pieces, right, all these things that we've kind of done over the way. Kind of all begin to snap together, and become one kind of solid workflow in this case.

[00:09:54]
If I just wanted to show the name here I could also like theoretically, map over it. Pull out just a given property, so on and so forth