Perfect ones were familiar with our API.
Now, of course, let's set up Futch in the context.
So right after my state values, I would want to come up with my function.
We call this Fritsche Drunk's No.
One is equal to my error function, but I would want the key keyword, since, of course I would want
to use that syntax as well.
I have my async beautiful.
And then inside of the function, Botibol right away set up to try and catch it here, will try to fetch
for cocktails and then if we have some kind of error, at least we can cancel it.
So we're going to go with a log and then error.
Now, let's also keep one thing in mind where we will call this function every time we type something
in the input.
Correct.
And essentially, once we've got our data back, once we return a list of cocktails, we'll also have
to set that loading to force.
That's why when we start pitching, we always want to go with set loading.
Antrel, again, if you want to double check that, if you go to a complete cocktail's, navigate home.
Notice how we type, right.
And then we showcase that loading that is important.
So every time we start watching, we go with set loading.
And the reason why I'm telling you that, because you might find that redundant, you might say, hey,
listen, we already fetching by default.
Why when we start switching, we still set loading to show up because we'll use this function multiple
times, not just by default, but also every time we type something in the input.
And now let's set up our functionality in a try block and I'm going to go again with some kind of response
I want is equal to await.
Then I'm fetching and now let's think about it.
I have the URL correct.
So this is the URL, if I would want to get cocktail by name and here, of course I'll have that changing
primer.
So what I would want is to set up a template string and first I'm going to say, yeah, grab me that
you are of value.
OK, good.
And then here, right next to it, I'll place that search term.
That's why I added some kind of value here.
So I get some cocktails right away by default once my app renders that's all, that's all we're doing.
And we can probably already guess that as we're going to be typing.
We'll be calling this function, this value, of course, will change in our use of fact, we will refresh
those new drinks that match the search term that is coming from our input from here right next to it.
We all set up our search term as well, which by default is a OK.
Now, I would want to deal with data accounts and then data I want is equal to await.
And then we go with response.
Jason.
Jason, we invoke it and effectively will have two options, either data will be array of cocktails
or it is going to be no.
So let's consider log data just so you trust me.
And I'm going to navigate back to the cocktails.
And if I inspect, by the way, of course, I won't be able to see anything because I'm not watching.
So let's set up our use of fact.
We're going to go with years a fact.
We will invoke it.
And I would want to invoke this.
Frege drinks every time something changes about my search term.
So we go here with search term and we go with fetch and drinks like you course.
Correct.
So I invoke the function.
We navigate the bigger screen.
And of course there is.
This is what I'm getting back.
I'm getting back the object with a drinks property, which is an array.
And then each item in there is that drink, which is represented, of course, by the object.
Now what happens if I type a bunch of gibberish here?
So I'm going to go with some kind of name that shouldn't return any cocktails and of course, doesn't
have drinks equal to now.
So what we could do is set up here a if statement.
So first, all the structured drinks, I say, yeah, grab me the drinks property from my data and then
I have two options.
Either it is going to be now or is going to be in right now.
Keep in mind, it is not a error as far as patching error we are getting data is just nothing there.
We have it now, OK?
That's why we are not placing that in a catch.
We're still placing it here.
We say, yeah, try to patch that data.
If data is essentially null.
Yeah, then we'll set it back the cocktail's to an empty array.
Because remember that case, we are displaying some kind of message on screen.
Correct.
So in here I'm going to say if drunk's so if it is not null than I would want to do something.
And that is going to be mapping over my right.
Or if it is null, well then I would want to go with else and I'm just going to go with set cocktails
and I'll set them equal to an empty array, not set loading.
All right.
Set cocktails and that one will be empty.
Again, this is happening.
If cocktails are now now still would not try, though.
I would want to go with set loading and set it equal to false.
And the same is going to work out here with another or go set loading and then force.
So in both cases, once we get something back or there's some kind of error, now of course we have
the set loading the force and notice now once I saved it.
Since I have jibberish here, I have used it and then some kind of search term, no, definitely shouldn't
return cocktail's.
Now, of course I changed my loading from true to false.
And since we're handling that already in our cocktail's, we said cocktail's length is less than one.
And of course we have our message.
Hopefully that is clear.
And now it's going to be annoying part where we'll have to iterate over that list.
So I'm going to go back to a meaning, I'm going to go back to some kind of search term that should
yield the results.
And don't freak out if you change this and you still get this, no cocktail's match your search.
Because remember, even though we don't explicitly set it over here in the US because of course, our
drunk's is an array.
We have this by default.
Remember, by default, this is an empty array.
And then in the cocktail list, if we're not loading, we're still checking for the length of.
All right, once we set up this properly and of course, we'll display our list as well.
So we go here where we have the drinks.
And then, like I said, I would want to iterate over them, so I'm going to call this new drunk's we're
going to go with new and online cocktails.
No one is equal to drinks.
And then I would want a map over them.
I'll be lazy and I'll just call this item online.
Like I said, this is going to be that annoying part where I one of the structure, those properties
are of those objects.
So what we're looking for and by the way, is this one, what we're looking for are these properties
now, of course, around the structure, all of them essentially.
I'm looking for the idea of drink than the drunk name, the thumbnail, whether it is alcoholic or not,
and what kind of glass it uses.
Now, if you want to get more properties, that is definitely up to you.
But in my case, I'm going to go with it drunk that as they are drunk as they are.
And then I'm looking for the image so drunk and I believe the name was I'm now like, so then we have
SDR and an alcoholic.
Alcoholic.
And on the last one is start and then glass.
So what kind of glass we're using to serve that cocktail matters, of course, coming from the item
and now in order to make it easier for us, I'm going to say that I would want to return a new object
and I'll set up nice property.
Names that are much shorter term here will be equal to the idea of drunk that I would want to go with
name, which will be equal.
Of course you might as they are drunk that I have the image, which of course is my thumbnail.
So as these are and then drunk thumbnail, we have the info.
Which is going to be whether it is alcoholic or not, and then sorry, not from now, what we're looking
for, they and non-alcoholic.
And then lastly, I would want to go with my glasses.
So let's add a glass property and my one will be equal to SDR and glass.
So we return right now, this object.
Awesome.
So in the new cocktails, we should have the array with these items and now we have much more simpler
property names and we don't have, of course, that many properties.
So right after I map over, I also want to call set cocktails and then I pass in that new cocktails
are it?
And now we have the cocktail list.
And of course, there's nothing in the list.
This is something we're going to do in the next video, but at least we should have the array.
And if we want to double check, we just navigate to the cocktail list and then cancel the cocktails.
Cocktails and we navigate to the bigger screen, we should have twenty five cocktails with the property
names that are much more easier to manage.