Welcome, everyone.
Today, we are going to learn about how we could finish the search controller.
Yeah, today we got to work on the search controller so we will have applications state.
We will learn about applications and learn about these new concept.
Now, views in controllers and models.
Sorry, I'm going to show you views and models will have a separate files, separate JavaScript files,
but the controller will be one main file.
Will we put everything inside?
It will be easier for us to control.
Nice.
That's why its controller.
But I'm not going to have separate files for the controllers, but I'm going to have a separate files
for the models and some use.
So that is pretty much what I'm trying to say now in the controller.
We need to find a way how we can control the current state.
And that's why we see applications that now when I see a state, means that what movies we have at the
moment, how many likes we have, what's inside the car.
So all of these represent the current state in any given time.
This is why we need to create this state to store the data.
And that's pretty much easy here.
Right?
So this is called application state.
And we could save all of the data inside one object.
So I'm going to remove this because we don't need it actually right here.
No.
So don't worry.
We are just adding and removing things because we haven't actually started.
But today we we actually going to implement the controller for this and we're still going to be things
that we are missing out here because the the view search view is not there yet.
But next lecture, we will have a search for you.
So so every lecture you will have, like a model controller, you it will be separated.
So I'm not going to do the two in one go.
Right.
So now let's create this data so we can store the entire current state of our application in any given
time.
So the best thing is that we can do I'm just going to say here, global state of the app and I'm just
going to close it like this in here.
I do have the misspelling global nice.
Now here, I'm just going to name this global state of the app called Data.
And inside I'm going to store the search object because at the moment we're dealing with the search.
Right.
And after that, we're going to do with the music movies.
And I'm going to say that movies object.
But at the moment I'm going to store the search object and I'm not going to go through the the rest
of them.
So how are we going to do this?
We can achieve this by creating a constant here, which is small, of course, constant data.
And that will be an object at the moment.
It will be an empty object.
So this is how we create this data and we can access this one if we pass it directly to the window object.
Because remember, every time we do have the access to the story, you shouldn't see this.
Now, every time we do something, we need to know where was I?
So we need to store the data and we can pass this data through the window, object right in the window,
object.
We do.
We did had access.
Remember, if I do inspect here, if I do Conjola, if I just remove this all this nonsense and we will
say we know we do have this window object.
Right.
So there are a lot of things we can get through the window.
But one thing that I'm interested in, I can pass this data and I can say we know that data equals data
that I have from here.
Now I will have window that data and if I hit enter, it will give me an empty object because it is
an empty.
This data is actually empty.
So we are assigning this window data to this data here, right.
This data, the moment is empty, but I'm going to use this to show you a little bit later on how we
could use it now.
So later on, we will use the local storage at some point to persist data and this will not be affected
by the browser reload.
So when we do this, the data, it will be stored into this by using the local storage.
We have done a little bit of local storage in the first couple of lectures, not in the first couple
of lectures, but in our to do list.
Right.
And we use that there.
OK, now let's do the search controller and we will need to chat event listener for the form.
So where is the format?
The form is actually located pretty much here when you say search begin.
That's the form and here is the form.
And we do have this input type inside and we do have the search button.
Actually, the button is the icon here that you see.
Right.
So that's the icon that I'm using right now.
That's cool.
So what we can do, we need to target this one.
So I'm not going to create an event listener here in the index, just kind of remove everything for
now.
So we are going to have an event listener.
So how we do this document dot query selector.
So I want to select the movie Search.
That's why I copy this one.
So I want to select the form class that I have, movie search and what else we do have.
I'm going to say add event listener and it will be on submit.
Right.
And I will have I will pass, I will pass the actual event here right now.
Look at what's happening here.
When I, when I click here on this button, I do have the page reload.
So this actually submitting the form is actually submitted and that was the default.
So I don't need this anymore.
So that was the default way of the of the of the forum.
So when you click the submit somewhere to some to some files.
Right.
So what we can do here, remember that last time we did not prevent default.
I don't want this to be the default action because the submit submitting of the form is actually the
default.
So when I click now, you can see that it's not refreshing.
OK, now one more thing.
Every event listener, same as the Berney file will go.
Bernie will go hearing the controller.
So from there we will have we will delegate what we need to do.
So the listeners are going here right now what else we need here to do.
And instead of writing now, so the idea, instead of writing here, what it needs to do after the clicking
or submitting, I'm going to create a separate function for the controller and I'm going to call it
from here.
And I'm going to say call search controller.
So.
The comptroller, the name of that comptroller, will be search comptroller, right?
So this function, I will create it outside here and I will say I can say search controller
and I can do the I can do that that function outside.
So this is going to be a little bit more clean to see.
And we can define the function.
See, using the const search controller.
Remember, we already defined the name, so we need to use the same name and that will be equal.
We're not going to take any parameters here, and that's pretty much it.
Now, every time we do something, we actually submit something.
We've got to prevent the default and it will go to the search controller.
And actually the function is defined in here.
Now, I'm going to do pretty much similar for every other for every other functions that we're going
to create.
Now, the first things first, I want to get that query.
Remember the last time we did it?
So I'm going to say get up, get a search query.
Now, we are not really here to get it from the form, from the form.
And this will come from The View next time.
But I'm just going to manually do it like this.
I'm going to create a const query and I'm going to say I'm going to define it to Tarzan, because when
we're doing with the constants, we need to define it as well.
Right now, the next thing we need to do is to check if the query exists, if this query is not empty,
because remember, now it's like this, but later on we can grab it from here.
So if this is a fool, if this this input contains some information, then we will say if query and
we can do something inside right now, what we will need to do is to create an object from the search
glass.
So that's an additional thing that we need to look into.
So create a new object
from search class and how are we going to do this?
Const search, equal new search.
And I'm going to pass the query from the top because I know the query will always contain something.
OK, now the next thing that I need to use this data, I need to store it here.
So what I can do here is, I guess, a data that search equal to the search.
Did I have it here?
Now I will have something to the data.
Actually, the data this the state will not be empty at the moment.
Right.
This application state, we can say global application app, state of the
global application state is better now.
Data search equal to a search.
But we can do this in one line.
So I'm just going to comment this one out.
So how we can do this in one line.
So I'm going to say data.
Data that search.
Equal to new research, and I'm going to pass the query, so instead of doing the two lines, first
declaring the surge and then adding it here, I can just see data that search equals search.
And that's pretty much more easy now.
Oh, good.
We do have this one.
So let's get the results in story.
So we already actually store it, but now we need to actually get the results.
So how are we going to do this?
Simply, we're going to war.
So I'm going to say here, movie search and simply I'm going to store these into the data.
So data that search, actually, it's not going to be.
Yeah, they did a search and I'm going to call get search result.
So I'm actually calling with search J.S. I'm actually I'm calling this here.
Right, because we do have the access of that class and it doesn't require any parameters because we
already have defined a query and it will go there.
OK, now what is next?
But for this to be successful, because this is we are dealing with API, we need to wait for the result.
Now, we can just say here away, but this is not going to work because a wait only leaves in async
function.
So we need to define the async function on top.
So how are we going to do async?
And pretty much we are done now.
That is pretty much what we have to do.
Next step.
Obviously, we will need to be to display the data, display the data to UI, but here mean we don't
have the view because everything that's connected with UI, same as here, is going to be done in the
View controller or in the search view controller.
But we don't have that one year.
It will be in the next lecture, but here we can just simply cancel a lot.
So I'm going to say console log data, search the movies.
How do I know this?
Because in the search I do have these movies.
Right.
Cool.
Now let's see what's happening here.
If I go outside here, if I do window dot data, it will be again, empty window.
What if I click here?
I do have to.
By the way, I don't know where they're coming from.
Just wait probably here so you can come this one out because that will print the same result twice.
So I'm just going to show you that the window, the data is actually empty.
That is the current state.
We haven't done anything to this one.
So when I click here on this search icon, I will have the data for the Tarzan.
Right.
So we can change.
It doesn't go to the what Batman and you will see it's working.
So if I click it here, you will have this one.
OK, now let's see what the data is having.
So look, now the window, the data.
I have the search object in inside the search.
We do have the query.
We do have the movies are very cool.
Now we have two things.
The movies are array in the search query.
What was the Batman before?
Right.
That is pretty much it.
So now you know how you can do the application.
State in this state will change when we do when we search, when we add to likes, when we add something
else, this state will always be different.
We will add something to the state.
This is how we adding things to the state right now.
That is pretty much it.
What I want to show you for this lecture and all of the event listeners here or have or define the controller,
but we will do the functions outside the controllers, at least some of them, because it's more readable
like this.
Yeah, because this will be bigger file.
So I just want you to have that clean code.
Good.
Now, next time I'm going to show you, same as in the Berney, we're going to define the selectors
here, you know, different files and we're going to call it.
But remember, we can't define some things that are not here.
Right?
They're not here in this one.
So, for example, if I click here, Inspector, I can see that there is a class.
But the part when we actually search later on, it will have popping out here the movies.
So those classes will be added from the action we are taking.
So they are not here at this stage.
So we can't get we can't use all of the all of the classes with from external files.
Some of them they will be defining like this, some of them like this because the movie Serge.
The search, this function, it's going to stay regardless if I refresh, it's going to be there, right.
And I can easily grab it.
It's class.
That's pretty much what I want to explain you.
I will see you in the next one.
I hope you enjoy this and stay safe.