Not bad, not bad.
We have our structure, we have the easy purchase, and of course, let's deal with the big beast,
which is going to be your homepage and home page.
We're going to have two components, one search form where we can type the text and of course, we'll
be searching for cocktails and then a list of cocktails.
Now, each cocktail will be represented by this card.
So if you click on details and of course, you can navigate to that single cocktail page, which we're
going to work on over the last.
So now I would want to set up the basic structure for both of these components and then also the basic
structure in the context, because the initial fetching will do in the context.
And that's why I would want to set up my state values.
And then, of course, also right away use my global custom hook to grab those values and place them
inside of the components.
And then, of course, one by one will work on those components as well.
So here I would want to close everything that I have been working on the files.
And then what I would want to open is the home page.
Now, I'm already importing both of these components.
I have cocktail list as well as a search form.
And I'll just turn this around.
I'll say we're turning the main online course.
I would want to get a cocktail list and also a search form.
Now, I think the order is a bit off because I want to start with search form and then the cocktail
list.
So now if I check it out, I have both of these components and effectively we're done with our work
home address.
We're not going to return here anymore.
And I think we can navigate to the context.
And then, like I said, I would want to set up some basic state values the moment no functionality,
just state values, pass them down and then grab them in my components.
So I have the basic structure in place.
So I'm going to go with loading because there's going to be a loading state value.
We're going to go set loading here and by default, I'll set it right away to be true.
So we're going to go with it through here and then we have a search term and set search term.
So if we think of search term, we need to think about our form.
So in form, of course, we'll be typing something and I would want to grab that value and add it to
my fetch.
So in the future, of course, as I'm typing, I'll be getting different values.
So we'll be putting different cocktail's.
So let's go here and then let's say search terms or whatever, we're typing in the input and of course
the function is set search, and then we're looking for a term that is equal to a huge state and by
default, all set it equal to.
And I'll show you, of course, why I'm doing that in a few videos.
Now, the more you can play whatever you want is just essential to have something, because I would
want to display already some cocktails when the app loads.
OK, and then the last one is the actual cocktails.
So I'm going to go with Consed and then.
And then I'll have my set cocktail's that, of course, is my function.
And then I want to set it equal to the U.S. state and by default, it's just going to be an empty.
All right.
And once we have the set up.
Where we have the basic hello, because that will turn into the object, so double Curley's and then
we just go with loading, then of course search term.
And also I would want to go with cocktails.
And one last thing that I would do in the past and in this case is also that set search term.
So I'm looking for that function.
And now, of course, I want to navigate to both of those components.
The ones that I'm rendering one, of course, is the search form and the other one is the cocktail list
and then grab those values using my global hook.
So I have used global context and then I pass in the app context.
So now, of course, in both components, I can access these values, whether that's loading search
term cocktails or the function by the name of that search term.
And I think I'm going to start with a search form.
And in this component, I have my global context, and essentially I'm just looking for a function by
the name of that search term.
So every time we're going to type, we are going to invoke the function, the set search term and will
pass in the value that is coming from the form.
OK, now first let's set up those values and then later we'll worry about functionality.
So we go with CONSED.
We would want the structured set search and then we're looking for term not as equal to my use global
context and I just invoke it now.
If you want to control it, definitely do so.
But in my case I'm going to skip that part and I'll write or navigate a home.
And in the homepage I'm looking for two things or I'm sorry, at home actually I meant cocktail's sorry.
That was the other component that I was rendering.
And then in the cocktail list, I'm looking for a huge global context, which of course is already important.
I also imported the loading component as well as the cocktail.
So cocktail will be displayed for every cocktail in my list.
Loading will be displayed if we're loading.
And then use global context just allows me to access my context values again, I would want to structure
and I'm going to be looking for cocktail's that is my area, of course.
And then also I have the loading one.
So I'm going to go use global context.
And just because I would want to show you the loading component as well as what happens if we cannot
fetch any cocktail's all right away, set up my conditions where I'm going to have multiple returns.
First one will be for the loading, so I'll check for the loading, which remember the moment in the
context it is true.
So it is true by default.
And if I'm loading out when I return, of course, my loading component, the only component that is
already complete and there is this is going to be rendered if we are loading.
And of course, if you want to set out, you can navigate to complete project.
And you'll notice that not only by default when the app renders we're loading, but also as we're typing,
because as we're going to be typing, of course, we'll set back loading.
True.
And that's why this will be displayed.
Now, also, there's going to be a case where we cannot get any cocktail's.
For example, I go with this gibberish term and I will go on display to the user that, hey, listen,
the term that you're using doesn't return any cocktails.
And in this case, I just want with somewhat simple message where it displays on a screen, no cocktail's
match your search criteria.
Now, when we would want to display that, well, when the cocktails are just empty or so, of course,
eventually we'll have our futch function where we're fetching the cocktails and there's going to be
cases where our return says, well, there's no cocktails.
So in that case, we'll set back our array to an empty array.
And in here in the cocktail list, we'll handle that.
I'll say if and then cocktails like that length, since it is an array at the end of the day, right.
If it is less than one, then of course I want to show that error.
Now, we already know that that is also something that is happening by default.
Right.
So we have loading by default as well as cocktails like.
So in order to see that, we'll have to set loading the force.
Otherwise we'll always see the loading.
And here, like I said, nothing really special heading to let's add a class name here and we'll say
that the value will be section and then hyphen title and let's just say no cocktails matched your search.
And let's add criteria as well.
Right here.
Here.
OK, awesome.
We can say it on and here, of course, as mousetrap up it should be returned return.
Let's do this way and we have the return.
OK, awesome.
And like I just said, we won't be able to see that because our loading is true.
So let's change the force then.
Of course we'll have our text now.
Cocktails match your search and that of course will happen when our cocktails arrive is just an empty
right now.
I'll set it back to true because I would want to display my loading.
But hopefully everything is clear as far as our basic setup in a search form where we are just looking
for a function as well as the cocktail's list where we have loading as well as the cocktails.
And one thing you probably notice of that in the context I'm also passing in that search term now to
tell you honestly, I just went with the flow and added it by mistake.
Essentially, we won't need it because of the search form.
The component that is going to be responsible for our input won't be controlled input.
Remember, we had two flavors.
We had controlled and uncontrolled input and in this case, adjust spice things up.
We are going to go with uncontrolled input.
So my apologies.
We're just looking for set search term function, which should be structured in our search form component.