Filtering Movies by Genre

[00:00:00]
>> Maximiliano Firtman: The next steps is that I need to connect the filters, and when I'm searching, let me go back. Okay, I can go back. The interesting part is, if you go back, it works, even it works for the search results. So everything is working as expected. So if I go back, I can change by a score.

[00:00:19]
I'm not sure which one do you think which one is going to be more popular or better of the three, I know, okay, we'll see. So if I want to change the order or change the genre, I need to do something. By the way, the genre is dynamic, so I need to actually call an API to fill that select, okay?

[00:00:38]
So we need to do that part, and I will do that probably manually to explain some things that maybe they are new to you. So I will go to, in this case, MoviesPage. And at some point, in our connectedCallback, I should call a function that I move to create, loadGenres, okay?

[00:01:06]
And because I will need to go to the network, I will make it async. Because I know then I will probably need to go to the network. And I will first call the API, so await API.getGenres. If I don't have it, I need to create it. I think I don't have it, so let's check if I'm getting into the API.

[00:01:33]
Yep, I don't have it, so I will just clone any of this, getGenres, and it was just genres, as far as I remember. Let's try this, so if I open localhost:8080/api/genres, I'm getting them, okay? So this is the URL that I want to execute. Remember, that's go to the backend, the backend goes to handler, the handler goes to a data repository.

[00:02:05]
Data repository go to a database, makes a SQL query, and all the information is traveling back to our JavaScript code. So back here, then I have the API, yeah, it's fine. So let's go back here, and now that we have them, I will get the select. The select is just the selector in HTML.

[00:02:27]
So from my own HTML, I will just find the select with the ID filter, like so. And I wanna start, this is kind of weird, but this is how it works. I'm going to create one first option that will mimic what we have right now, like it says, filter by genre.

[00:02:49]
Because by default, there is no way to select a title. So you need to create one option with that, okay? And then we're going to loop through all of this.
>> Maximiliano Firtman: And for each, we're going to create an option, it's an option tag. So we're going to create an element of type option, that's a tag name.

[00:03:17]
We're going to set its value, its value is important, I can use the ID. Because that's the argument, the value that we will send to the server to filter by genre. And then the textContent is gonna be the name.
>> Maximiliano Firtman: No, .name, like that, and I'm going to append that to this.

[00:03:44]
So if this is working, if I reload, now I should see here genres, I'm not seeing them. So let's look at the console, and it says loadGenres is not defined. That's because, without even looking at that, I think that the problem is, it varies the order in which I did this.

[00:04:04]
I first called the function, and then created the function. Because I did that, I forget that this is JavaScript, and when you have a class, and we are in a class, I need to add this. If I code this in the reverse order, I create the function, and then call it, Visual Studio Code will added this for me, okay?

[00:04:23]
But when I'm teaching, I'm changing the natural order of things, and some things like this will happen. So now I can see all the genres appearing there, so that works. Then, of course, nothing happens when I click here, or it's trying to do something, but it's not yet implemented, okay?

[00:04:43]
And the same happens when you change sort. You can see it's actually calling two functions, searchFilterChange and searchOrderChange, on app, that they're not there, okay? That they will just change the URL with other arguments. In that case, it will make another request to the server with the right arguments.

[00:05:06]
And we go to the web service, the data, database, and the list of movies will flow back, okay? So in that case, on the READMEon F3, we already have those two functions, they're not so complicated. But let's just copy and paste them within app.js. So these are other new functions for app.js, like this.

[00:05:35]
So search order change will actually get the parameters, the other two parameters, the genre and the query. And it will create the new URL, and filter is getting the order. So in case you are filtering and ordering at the same time, okay? It's doing this, and sending the rest of the arguments, okay?

[00:05:56]
So, those arguments are going to the same /movies route, so it will actually make a new navigation to the same page. Even if it's the same page, it will be a new instance of the page. And this page, if you look at the code, MoviesPage, it's actually right now reading those parameters as well, okay?

[00:06:22]
So if I refresh now, here, now I'm getting an error, line 39, probably have a coma thing in app.js. So, app.js, yeah, it's red, so, yeah, probably when maybe I'm missing, maybe I didn't select the whole thing. So I'm missing a code block and a comma. By the way, in JavaScript, remember, you can have trailing commas, the same as in Go.

[00:06:53]
So you can always have trailing commas. It's a good idea when you are reordering things. Because then you don't need to remember if you have the coma or not. Okay, so we are back, Back to the Future, Filter by Genre. Well, actually, if you say fantasy, yeah, there are no fantasy on Back to the movie, I guess they probably science fiction, not fantasy, yep.

[00:07:15]
And also, now they are searched by popularity, let's say by a score. It's well, the same, let's see if it's working, Release Date, well, it's probably the same. No, because I'm using the reverse order. So Back to the Future III is the first one, okay, and by name?

[00:07:32]
Well, they have mostly the same name. But if you search Batman movies, okay, now we can change the order, it seems working. And if I filter by comedy, I only have the Batman from the 60s, so it's working. So the design pattern for ordering and filtering, and also for even if you're not doing in this course.

[00:07:57]
But you can add later, it's just adding more arguments to the URL, and it works with the Back button. So I can go back, and you can see I'm going back with my whole navigation. Maybe you can decide if changing the order should create a new history or not.

[00:08:15]
Remember, we have a quick way to disable that. Some people think that if you change the order, maybe it should be the same page, so you shouldn't go back to the previous order. But it's up to you. If you wanna change how that works, you just change when you call router go, we add the second argument false, and it's not going to add it to the history, okay?

[00:08:37]
Does it make sense? Do you have any question on searching, filtering?
>> Speaker 2: So when it does the initial page load, does it sort by popularity by default?
>> Maximiliano Firtman: Yeah, and where is that? Well, actually, how default works, because it is interesting. If I reload this, you can see that Science Fiction is pre-selected, and also Sort by Release Date.

[00:09:05]
It actually happens that it matches the order I have here and the genre I have here, I guess, that's the idea, okay, for science fiction. So how is that working? How is that pre-selected? So if you actually inspect this, when you inspect the options, okay, you don't see anything special.

[00:09:27]
So how is that science fiction pre-selected if nothing appears there as different? Okay, well, this is because we are setting the value of the select. That's why the value is important. The value of the options will match the value of the select. So when we see MoviesPage, I think here, I'm saying, if I do have an order selected, I'm setting the value of the select order with that order, and the same with filter.

[00:10:01]
So in that case, because we do have genre=18 from JavaScript, we're actually changing the filter value to 18. So that's why it's actually selecting science fiction. But if I go and say document.querySelector, we change the filter, that's the select, and we change the value to another one. I don't remember which IDs do we have, like 4.

[00:10:34]
It's actually changing it from there, right? Can you see that? It's not reloading the page, because I didn't change it from the UI, so it's not triggering the change, okay? So changing the value from JavaScript is not triggering onChange in the UI. So it's not triggering the reload, as if I'm doing like this, that is actually reloading, okay?

[00:11:01]
Does it make sense? So now we have a lot here, we have the router working, we can get into the details of a movie, we can search movies. Even with any letters, pla, something appears with pla, okay? We can filter all the fantasy movies with pla, we can change the order, okay, so that's actually working pretty well.