Excellent job.
We can remove stories from our UI and I think next I would want to set up my forum where there's going
to be a forum, there's going to be some kind of default value.
But as I'm typing, I'm going to be fetching a new batch of stories.
So if I go here with you, of course, I'm getting the stories that are about you.
I'm going to go with Angular.
Hopefully you get the gist and the way we're going to set this up, since it's not our first rodeo,
we already have set up multiple dispatches.
We have set up already multiple search components in our project.
I'm going to start in the context.
Yes.
And I'll set up my function just because I would want to pass everything down before I navigate to the
component.
And then eventually, of course, we'll worry about that particular action in our producer.
So I'm going to go with const and the name will be Handal Search.
And essentially what I would want to do is grab my query.
So whatever I'm going to be passing into this function.
So handle and search.
I remember we're going to do that using event target and then value.
So whatever I'm going to be typing in the form.
I'll access that here as a parameter of query and then the site of the function body.
I'll dispatch another action.
Remember, we need to have a type here and also this equal to handle page that is my variable name or
I'm sorry handle such my bag.
So handle search.
That is my variable name.
And then as far as the payload, well it is going to be my property and it's going to be equal to my
query, whatever I'm passing it.
And once I have the handle search now of course I don't want to pass it in.
So say make an all search available all throughout my app and then what component am I looking for?
Cause that is the search for him.
So we're now we get here.
And then right away, I have to use global contacts.
And to vouch that I'm looking for is the query that is coming from the context.
You have the query and by default its react.
Once again, I would want to set up the controlled input and the next thing is the handle search.
Again, the reason why I started with the function because I didn't see the point of hopping back and
forth.
We already have done that quite a few times.
So I think we are comfortable with setting up the function first and then I would want to go handle
and search and that is equal to my use global context.
And then it and as far as the formal return, we're going to go here.
We're adding an say form.
And instead of this form, let's go with heading to and say search and line hacker news.
Now, I do want to add a little bit of styling here.
So class name, and it's going to be equal to a search hyphen form.
And also, remember, when we talk about the forms, I don't want the default setup where I refresh
the page because by default, that is exactly what is going to happen.
That's why I'm out here on subnet and I'll set up my arrow function where I'm going to be checking for
my event object.
And the moment I submit the form, I just want to prevent the default.
That's all I want to do since I don't want to do those page refreshers.
So I have search hacker news, of course, that me is my name and I have the styling already since I
have a search form.
And then right after the heading to I'm going to go with input.
It is going to be a text input.
And then I also want to add a little bit of styling.
So class name and it's going to be equal to a form hyphen and input.
And now, of course, what I'm looking for is the value property as well as the on change.
So two attributes since I would want to make this controlled input.
So go the value.
Not one is equal to my query.
So a query and then the second thing is on change.
So as I'm typing something in the form, well, I would want to invoke my handle search because remember
in the handle search, what we're looking for, we're looking for this query, which eventually we will
handle in the reducer so we can navigate here.
And I would want to invoke HANEL search every time I type something in my input.
So we're going to go with on change and as I'm typing something, I would want to invoke it now.
I do need to pass in, of course, the inline function first and then I'm going to go with event and
then let's invoke the handle search and we're going to pass an event target and then whatever is the
value.
And the last step here is setting up, of course, the reducer.
So every time we pass something into our form, of course, we change the query.
Where?
Well, in our state.
Correct.
So where we have the producer, of course, we need to handle it and the name will be handled search.
So where we have the removed story right next to it, we're going to go with Handle Search.
That is the name of my variable.
And as far as return, well, somewhat simple where we go with that and then state and then where do
we have the query?
Well, it is in the action payload, correct.
Someone here knows I have my function handle such a passing the query, and that is equal to my baylon
again, my goal is to change this default one to react one, because the reason why I have reacted displayed
on the screen is because I have my query value by default as react.
But as I'm typing, I would want to change that value.
So in here state and we're going to go with query.
So that's my Stavo and that one will be equal to action and then payload.
Now one more thing that I would want to add is the page of zero, because we need to keep in mind that,
for example, I search the anger and then I keep on increasing or decreasing the pages.
Now, the thing is, once I type a new search course, I would want to start with page number zero.
Correct.
Just keep in mind that, yes, at the moment it kind of doesn't make sense because Page is already zero.
But eventually, of course, we will change these values with the buttons.
That's why I'll say every time I type something, page also should be zero.
So we're going to go with Page and it's going to be equal to zero.
We save it.
And now it's the start, I would want to type something and I would want to see whether I'm getting
the results and I can tell right away that it's not going to happen.
Why?
Well, because we invoke such stories only once when our absolute correct.
So I'm here.
I can type all day long and I can say Henggeler or can type swell whatever you want and you'll notice
that the values won't change.
So let me type here maybe on a bigger screen and I can see that.
Yeah I'm typing.
Yeah, the value is changing and even the state value is changing so it is changing.
If I take a look at the producer notice query is angular, but how do we search for another set of stories
in this case that reference the angular.
Well, we need to navigate back to the user and where I have the dependency.
Right.
I need to say that every time my value in the query changes, well, I would want to fetch for another
set of storage.
Correct.
We're going to go state and then query because of course, that is the property name.
So save it and I'll write a word, navigate the screen and refresh just to be on the safe side and then
check it out.
Every time we are typing something, we're fetching a new set of stories, which is just awesome.
So, for example, I'm going to go to YouTube and now I'm getting the stories that are about YouTube.
Awesome.
We have to search for him.
And I guess the last piece of functionality I would want to add is the component that holds the buttons
now.
Also right away.
I to answer that.
I didn't see the point of setting up these pages one by one, like we did in this project, because
I thought that it's not going to look that pretty if we have 50 buttons.
So remember when we did a presentation on the front end, I went with preview next and then whatever
was the page?
Correct.
So in this case, I have usually around 50 pages.
I thought it wouldn't look very good.
That's why I went with this approach where I have proven next and then I'm just displaying, well,
what is the page?
No.