All right, folks, and we're almost done, we just need to set up a single cocktail component.
So if we have our list, then of course we have option of navigating to the single cocktail page.
And then once we navigate here, I would want to display info about that specific cocktail and we'll
start somewhat simply where I would want to see whether I'm getting that idea.
Because remember, in the cocktail, we use the link and then we go with force cocktail and then the
idea.
So let's navigate here the single cocktail and we're looking for use primes.
That is the hook that reactor provides so we can access all of those unique powers.
So let's start here by simply concentrating, because otherwise, if the idea, of course, is not there,
well, we have bigger problems.
So let's go with use primes and.
All right.
Or we would want to either cancel it or we can even display on a screen.
So instead of this control, again, we're going to say, you know what?
Show me that idea and no control in here whatsoever.
And one thing that I mentioned, I'll try to set up everything in one video because I think that we
should be already comfortable as far as working with API and everything else, but it might get a little
lengthy.
So my apologies for that.
I'm going to go with home.
Notice that was one idea and we have another one.
And yep, it looks like our functionality works.
And I decided to set up the whole functionality in this component.
So I'm not going to be getting any value from the complex than just to showcase that.
It is up to you, in my opinion.
In this case, it just made a little bit more sense to separate these components instead of jamming
everything into context and then deal with a massive file.
So I'll set up here two state values.
So we're going to have const one will be loading.
And then, of course, we have set loading as well.
One is equal to my react and then use state and I'll pass in false.
And also, I would want to go with Consed and we'll set up a cocktail, so that is not a single cocktail
cocktail and set cocktail.
OK, awesome.
That one is equal to react and then each state and will pass in.
No, that is my default value and all right away would want to set up the usufruct where every time
the component renders I would fetch the info about that specific cocktail.
Now I already have the URL here.
So there it is.
That is my URL.
And what I would want is to pass this into the correct, but also will have to do a little bit of magic
where we combine the two.
So let's set up our user.
Then we go with react use fact we have a callback function.
And then here I would just want to say that every time component roundish or the ID changes, but of
course out of patch for that specific cocktail and then instead of setting up a separate function,
I'll set that function inside of the user just to show you that of course that is possible.
So I'm going to go set loading all right away, set it equal to true.
And why don't we go nuts and use the good old function declaration again?
Of course not.
Is in the er quotation marks.
No one's crazy for using the good old function declaration and we're going to go get a cocktail.
That will be my name here.
I will set up my parameter and that as far as the functional body again I will set up right away, just
try and catch and the functionality will be somewhat similar where we go with const and then response
is equal to avoid.
Then we're patching.
And of course I would want to set up those two values.
Want to be that you are all on.
The second one will be the idea.
So I pass these two in.
Then I'll get back my data, so CONSED and data and what's really interesting, that, again, we have
the object and that is called Drunk's, so I'll show you that in a second.
So we go here, we await and everyone is equal to your response and an objection.
We invoke it and notice it will console log data.
So first, of course, we need to navigate where we have the idea and on specked we should see in a
console something.
And of course, we don't see anything because I wasn't particularly bright.
I didn't invoke this function.
So at my function, get cocktail online right after I set up my function of I would want to invoke it
as well.
And now once we navigate to the page, we should see the object.
And again, it's going to be a property of drinks and then it has an array of one.
Then that is just how the API is set up.
There's nothing I can do about it.
So what we're going to do is check whether their drinks exist.
If not, then, of course, we will set it back to know and we need to handle loading as well.
So let's not forget there we have catch error.
So I guess let's start here by setting up the error and then I'll deal with everything else.
We have control log error and then set loading and then false.
And then where we have the data, which is of course where I would want to check if data does exist.
Awesome.
I'll do one thing and then if it doesn't exist, well, then we'll do something else.
And in this case, when we're talking about that, something else, what I would want is to go with
set cocktail set cocktail and I'll set it back.
You know, now, in either case, I would want to go with loading and set it back to force.
So we have the now and not worry about, well, what if we actually get the data back?
And again, we just have a giant object that we would need to the structure and then once we the structure
will have to set up the ingredients as well.
So one interesting thing that you'll notice about the API, if we're talking about one single cocktail,
is notice how they have a bunch of ingredients.
Now, in my case, I just went with five.
And if you want to check whether there's more, of course, you can do that.
In my case, I thought, you know, five is going to be enough.
So we'll have to set up.
Right.
That holds that value.
Now, remember, data drunk's is still all right.
So, yes, I would want the structure, but just keep in mind that it is the first item in the array.
So we go data drinks.
That is our property is NRA and I'm looking for first item.
And now in here I would want to grab my drink and we'll go.
In this case, the earliest Rob were previously known as the context.
We were grabbing the bar and then I was returning.
And you object in this case?
What I'm going to do is grab the property that still stays the same problem right away, give it an
alias.
Then again, we're looking for SDR drink.
And I'm now now that one will be named image from now on that SDR.
Again, we're looking for these guys, the alcoholic, one alcoholic.
So hopefully I'm spelling them correctly because it's going to be annoying to find them later.
So we're going to go with info here.
Then we have the category.
So comma, that's the AR category that want is equal to the category.
That will be the new name.
Then we have ETR Glass.
Like I said, a little bit of knowing getting these properties as the hourglass is going to be equal
to glass.
And then we have SDR instructions.
And that one will be equal to instructions so we can go here with directions, lecture, and then I
would want to get those ingredients and essentially we go as they are and an ingredient, let me make
sure that I spell correctly, because ingredient is something that gives me hassle every time we have
ingredients.
And then, like I said, I'm going to go with five of them.
If you want less or more, it's up to you in here.
I'm going to go with one, then two, three and four.
And the only thing we're going to change are the numbers.
So one, two, three, four.
Let's go here.
Two, three, four and five.
Once we've got all of these things, then I would want to set up my ingredients array somewhere seconds
and ingredients like so.
And then there I'll just place my values for all the ingredients.
So let's just copy them copy and paste.
And of course we have our ingredients.
All right.
And then finally, let's set up that new cocktail and also use our set cocktail function.
So I'm going to create a new variable just because I think it's a bit explicit of what we're doing.
That one will be object.
And here I have a name and an image.
And of course, I'm using the S6 function where essentially if the property name matches the variable
that holds the value, then of course I can skip it.
That is ESX shorthand, that info and category.
And glass, of course, the instructions and the ingredients, OK, we pass that into your cocktail.
And then lastly, we have said cocktail and will pass in that new cocktail that should do it as far
as the structure.
That was definitely the annoying part.
Now, let's start working on the return where at the moment we just have the idea.
And I'll start by checking if we're loading.
So if we are loading and of course, I would want to return my loading component, nothing new order.
So loading component that will check whether we were able to get back the cocktail just in case there's
some weird error.
So I'm going to say, if the cocktail doesn't exist, meaning if it is null, then I would want to return
it to and I'll say cocktail to display.
And then lastly, we have a class as well as a class name and no one will be equal to a section title.
Now, in this case, I think I'm going to go to the actual page and there is the moment I have Mitty,
which means that we're not loading anymore.
And of course, we have some cocktail to display.
And now finally let the structure first, the properties from our object, and then let's place them
where?
Well, I would want to place them outside of my return.
Correct.
So we're going to go with CONSED and then we're looking for name again, image category in four, comma
in four, then glass glass.
And then we're looking for instructions, ingredients and all that is coming now from my state file.
So I set it equal to the cocktail and then once I've got all of that, but I'm just going to go with
return, I'm going to say that I'm returning a section.
S. Let's start simply by displaying the name.
So at the moment, we have had interview with already and I'm going to set it up and his name is equal
to a section and then title and let's pass in that name just so we can see that we're getting that value.
Let's say it.
And there is now, of course, we have this name.
So if I go back and if I check this Ayesh, I can see that I have a face as far as my details.
Awesome.
Now let's add a little bit of classes here as well for the section.
I just wanted to check whether we're getting some values cocktail and then open section.
Now, don't worry, we already in the homestretch.
We're almost there.
So you have the project ready in no time.
I'll set up my link where the user still has the option to navigate back home.
So class name.
And then we go with BGN and then Bethanne primary as far as the value would just say back home.
OK, awesome.
And then we're just going to go with Dave and a class name, will we drink and this is will replace
all that data.
So we have a section title.
We'll leave it the way it is.
And right next to it, we're going to go there with a class of drunk.
And we'll start with an image because there's going to be to come out.
So we're looking for the image.
And as far as the alternative, I'm just going to go with a name.
So it's what we should see the image.
And of course we do.
Then we're going to have a div with a class of drinking for so they're instead of the drink and the
class name is drink info.
And in here there's going to be a paragraph, it's going to have a span and the class name will be drunk
hyphen data.
And instead of the span, I'm just going to go with name and I will add a column as well.
And of course, right next to the span, I would want to take a look at the actual name.
So it's safe and there it is.
Now we have this set up and essentially we just need to copy and paste this one, two, three, four
times and just change these values around.
So one, two, three, four.
And then, of course, the second one is category.
And of course, the value is exactly the same subcategory.
Then we have info.
So you know what I'm going to use to process and discuss well or move here and that info, then we'll
also have the glass and instructions.
So to Cursus.
Glass, and then we have instructions.
And then once we've got all of this, we just need to go with our ingredients instructions here.
Yep, all of those values came back, which is really, really nice.
And we just need to iterate over our ingredients.
All right.
So we still have the paragraph.
We'll have some spane out of class name here.
And that one will still be drink Darah, drink data.
And then let's add here the name ingredients and common course and then let's iterate over our ingredients.
All right.
So right next to this pan, I'm just going to go with ingredients or a map and the ihram and the index
since I have the list.
And as far as the return, I'm just going to say, you know what, get me the item.
If it's there, if it's not returned now, because keep in mind, since I'm grabbing here, ingredient
number one, number two, number three, four and five.
Notice how some of them don't have the five.
Maybe some of them won't have the four.
So I also want to check in array whether some of the items are not.
So if it is now, then of course, I wouldn't want to return that particular item.
So I'm going to go.
If the item is there, then awesome.
Then I'm returning span and I'll add a key and I'll set it equal to the index and inside of it I'll
place my item.
Now, if the item is no, then I won't return anything.
So I'll just show the ingredients that I have.
And once we navigate to the bigger screen, we should have our project.
Now, the only thing that is missing is this huge callback.
Now I'll show you where it is missing and why we should add it.
So it's now we get here.
And then, of course, I'll go back to the homepage.
I can have my cocktails and search for them.
I have loading.
If I don't have any cocktails, I display the text and if I search for a specific cocktail, I get this
one.
And there is I have info about the cocktail and I only display the ingredients that the cocktail has.
So what's up with this one?
If we check out right now our council, we see that there's a warning.
It says react OK, use effect, has a missing dependency, fetch drinks nowadays.
That is in the context.
So if we navigate to the context, we should say that, of course, we have four drinks.
That is our function.
And then react is complaining.
Hey, listen, you did not add this as dependency, but since we have covered use callback function,
we know that if I will add this fetch drinks as my dependency over here, I am going to get a infinite
loop.
Why?
Because this function, the way it's set up right now, gets created every time.
And then inside of this function, I'm also changing the state value, correct the cocktails.
So we're getting that infinite loop.
And in order to avoid that and in order to also avoid that warning, we simply set up the use callback.
So we go here with years and then call back hook, where essentially we're saying you're not only if
something changes about this function, it's essentially only if the search term changes then created
from the scratch.
If it doesn't, then don't create from scratch.
And then, of course, we can add a few dependencies.
So we're going to use callback.
I wrap my function like so.
And I also want to set it up that every time the search term changes, I would want to create from scratch.
Why won't?
Because we're passing in the search term.
Otherwise you'll always have this a which essentially is that default value.
So we save here.
And then of course, I can go to search term and we can add that fetch drinks, fetch drinks as our
dependency.
We go back.
We shouldn't have any warning.
But what's also really nice that we're not getting that infinite loop of that is our project that should
conclude all the basic project.
Hopefully everyone enjoy the project and I hope to see you in the next project, the API project, and
bigger and complex projects that we're going to build during the course.