Now that we are done with setting this looming variable or the hook next, let me show you which is
the EPA, which we are going to use and that which is the EPA, which would be fetching the data and
he'll be displaying it on the screen.
So let us go to our browser first.
And.
Is it switching or switch?
So after going to the browser, what we need to do is we need to search for this particular name that
is the cocktail lobby.
And once you search for it, then you need to go to this website, which is the cocktail bar dot com
and to click on this website.
And this is the website which we are going to use on API purpose.
And you can see there are already so many of them displaying and we don't have anything related to this.
We don't want to look at whatever is being shown here.
Our point of interest is this thing here, this link, which is the API link, and we need to just click
on this.
And once we reach to the EPA like Slash, EPA or PSP, and now we are in the EPA or the documentation
section, so here there are we're just like EPA is which we want to use.
And the best thing about this website or this EPA is that we don't need a key to use it like the EPA
is.
What is the problem is that you need to generate a key and then you need to hydrate when you put your
code in production or you could you put all your code on GitHub or anywhere and when you open source
so you need to like, work hard to make your key invisible or hidden using the environmental variables
and on.
And that is so like a long process or with this website or with this EPA in the standpoint point, you
don't need to provide any kind of EPA key that is the best part here.
So here there are so many APIs, like some of them are free, like the upper ones, but above are the
free ones, and then we have some next.
The end points.
So those are the ones you need to like, be Patreon for like $2 or $5.
I don't know how to swim $2.
But we actually don't need it.
So we'll be working with the free ones and in the free ones.
Also, there are so many of them, so we will be working.
First of all, this very first one to like, search and get the related EBA related cocktails or such
cocktail by name as it's already written, you will be using this for starting the cocktails and for
getting into the.
Particular cocktail and getting into the page of a particular separate component of the cocktail, who
will be using this one look up full, contained, detailed by IED.
So this is the endpoint which will be.
We'll be using to get the details like all the ingredients and what kind of cocktail is there and what
is the what is required to make it and all of that stuff we're not interested in what is that thing
made up of?
Not at all.
We are here to learn and that is what we are doing here.
We will third ingredient by name.
This will do to look of this untidy.
This one look awful.
Cocktail details by I.D. so that there will be an I.D. which really grabbing from here and that I.D.
will be passing to that particular at this particular point.
And then we'll be looking up to all the ingredients and all the details to that particular cocktail.
OK, so next, let us go to our browser sodium non browsers.
The idea that me minimized this, I mean, not.
So here will be like, first of all, will be grabbing that particular endpoint from that episode.
Let me go to the browser and let me grab this one.
Is it can you just copy this one?
It is this only no if slash known or.
We need to like see the JASON format for that to.
I think the world was different.
Let me see.
Issam?
Oh, yeah, oh, sorry, sorry, sorry, it does that also mean just copy this will already copy.
So next we'll go to our browser and not call vial or keep calling it that.
It's not a problem, it's an ID.
So here to what we'll do is will create a constant.
So we'll call a constant and constant will be you are still.
And that's equal to.
That you are allowed to let me face that you are all which we copied and you just be a here.
So this strain, the cocktail leaves dot com slash API and the decent format and this is the virgin
and whatever and like, this is the order or the endpoint.
We call it endpoint that looks.
That sounds good.
So we have already done this thing.
And next, we'll see what we can do with this data and how we can actually fetch this data.
OK.
So it does right now when we look at the endpoint, which you are using, let me to the students is,
yeah.
So right now when we look at our endpoint, so we see at the last and there is this already selected
like Marguerita.
So this might be the name of a particular cocktail and this is a static.
What can we see?
Static endpoint?
I start thinking, you are like knowing that when we open this, the details will be shown for the mind
to get it to a particular cocktail.
Let me show you how the data looks inside.
Also, let me close this, we don't need that anymore.
Actually, we need it for we will open it again, so let me to speak to.
So.
This is the data which we are getting from the standpoint point and.
And this is a little bit messed up like we need to refactor this data.
I'm sorry, I'm sorry the screen was not visible.
I went to this particular end point, which we are using inside this room.
Like constant, you are.
And then we open it inside the browser, and it looks something like this.
So basically, it's a decent file or the decent response, but the data is so much disorganized and
we need to like this structure everything and we need to grab the data off, but a lot of effort.
So that is the only thing here and that will do like there's no problem but will do if it's straightforward.
If it would have been straightforward, then it would have been an advantage for us.
But right now, that is admittedly gibberish and unordered.
Are this organized, so we'll have to work a little bit more.
But that's not the end of the world we will do, and we will go to it.
OK, so next.
We will remove this particular name from here because we are going to make this this power dynamic like
this part would be static and this little part here, which is containing the name that would be dynamic.
And let me just.
The move this.
And.
That sort of real point will be to this much only and next after that, what is the text that will be
adding dynamically so BHP question mark as an equal to?
And that's brought a semicolon, but that is what we are going to do.
Like this is this is the only thing which will be static addressed.
Either thing or after that will be dynamic, too.
OK, let's move further and.
It's a bet that they turn on.
It will be like a hit and we'll hit a function, but that's that function will be fetching their drinks
and all.
So let us create that match.
Strings.
And for that, we will need another hook and that the will have to import a hook.
And that is the U.S callback quick.
So we will import that from REAC and we'll imported in a new line so that will be used.
Back.
And we'll make use of this use quarterback.
So what does this use callback?
Basically, it is used when we are like rendering something again and again, like continuously in a
very short amount of time.
So then we need this use callback, OK, and this will be needing when we are rendering like whenever
we type.
And now we'll use this.
You will callback Cook.
So inside this Konst Fetch brings function, we'll make use of this use callback.
So when declaring this so we love right use.
Fall back inside this, we'll right an easing function is sing.
And this will be a function and.
And so the very first thing which we do is we'll say the loading to blue because right now, maybe we
can just start to put false.
Because it does not loading or we can just let it be what it was.
But definitely when we enter this block of code and when we are vetting the data like photos and the
vetting, the drinks.
That means definitely that the work is going on in the background and the system is working hard to
get the data from that particular API endpoint.
So that time we definitely need to switch our side loading to do what we do, set loading and we pass.
Through inside this, we can provide a semicolon if we like, and if we don't, there's no problem.
And next, what we'll be doing is we're providing some try and get blocks like.
When we are trying to get the data from the EPA and maybe some adult happens, the EPA enforcement is
not working properly.
The EPA is down or there is some error while writing.
So then we can display it on the screen or we can catch it in the console.log.
That's why we'll be using that to try and get method inside that will be writing all of our code.
So we'll do that in the next review.