Searching & Displaying Results

[00:00:00]
>> Maximiliano Firtman: Well, we are getting into the next section, that is gonna be the search. So if I do something here, if I search for movies, okay? I wanna search for Superman, and I want this to go to movies forward/superman, or actually we can make a query, okay? In this case, they're going to switch ideas.

[00:00:22]
So instead of using the URL forward slash movies, forward slash superman, I'm going to send an argument like this, okay, what is known as a query string or a search, okay, which is better for this. Also I can add later more arguments there. So to do that, well first we need the route, okay, I think we do have that route.

[00:00:50]
Is this one movies? And we have a movie page. Right now if I'm trying to do this first, it's important to decide if we want or not the last forward slash, because not gonna be the same with or without forward slash. Okay, so now is without forward slash and see nothing, not patient phone.

[00:01:12]
That's because my web component is empty, okay? Also, I should come back to this input form and try to see how that works. Let's go and see that. So if I go to the HTML, I have here a form with a search, and form is calling app.search. So let's go to app and search.

[00:01:40]
Now it's preventDefault getting the value, and it has a TODO. Now it's time to fill that TODO or to replace it, and we will just talk to the router. So app.router.go, and we will go to movies?q = q. Why q? As I mentioned before, it's like a standard practice for the query to have that q value, but if you want to use query or search or keywords, it's fine.

[00:02:13]
So that means now that if I'm typing something here, Batman and pressing enter, you can see in the URL it works. So then now we know it's working. Anything we are searching here is changing the URL, and now the next step is to actually render something on this particular component.

[00:02:34]
So we need the template, and then we need to fill the JavaScript for the web component. So let's start with a template. So we are now, if you are following through the RHYTHMI, we are on F1, so we already passed all the routing stuff. Here we have the template, I will just copy and paste it just HTML and maybe the part that is maybe new.

[00:03:02]
We can spend some time, but it's just an HTML, nothing really so important. So we have a section for templates. Template home, template movie details. By the way, in these movie details, I have a style open here. I'm not using it, so just nothing happens. But I will just add this template then after the last template.

[00:03:23]
So in this case, it's pretty much similar to other HTML. The only new part that we have is that we have selects. So this will be for filtering and also to change the order of the search results. Okay, so we have some selects the one with genre is empty because we need to actually fit it by JavaScript, and the other one is already pre populated, so it's a static list of possible options for sorting.

[00:03:56]
And also for the movies result we have the animated loading, remember that one? So we can see if that works, just by trying to show us it. So after we have that, the next step is to go on work with movie page JavaScript. This is the one that is rendering movie.

[00:04:21]
Actually, we should probably rename it to movies, maybe that's better, yeah? Because we have a collection of movie result, maybe it's better name, that movie. So if I change it from here, I should also update my routes, so movies page. And also I should update the import. So now I should remove this one, so everything is now there with the right name I think, so if I refresh, can I refresh without going to the home?

[00:05:01]
Yeah, because we have already solved the problem from the server. So is it still working. So, now I need to do something here. So we need to get the template, so we know the deal. So let's also do the copy part here because we have already done. At least the first part, we have already done something very similar, so it's probably faster for us.

[00:05:30]
We just take this, the movie space, and we copy that and then we will finish the part later. So now I need to go to movies page that is still called Movie Page here. So let me rename the file as well. There we are. Now I paste it.

[00:05:53]
So let's analyze the code, okay. So first, the new part is that now we will work with the URL bar. We will read from the URL bar arguments, for example, q. Here we're going to show not just the query, but also a possible filter. So then we can actually filter by genre.

[00:06:22]
So we can have genre, and also we can define the order, and maybe later, maybe for homework, you can then make different pages, so you can add fagination to the system. So then you can add a lot of arguments in this search query string, okay. So we need to read that, and to read that that string is available in window location search or location search, you can add window or not here, it's the same, that's the string.

[00:06:51]
But now we need to parse the strings to extract each argument, and we do that with URL search params, that's actually a browser API. So that will give you all the params. And then we can get here, for example, the order, the genre, and also the query, okay, that actually the query is receiving by by here, that is actually being sent by here.

[00:07:18]
So in this case, we are reading the template, we are cloning that template. We are injecting the template. We know how to do that, and then we are getting the query. If we do have a query, we're actually setting the query movies like that, movies as a title, and then we are rendering.

[00:07:37]
If there is no query, I'm just showing an error.
>> Maximiliano Firtman: Why is there no query? Well, maybe q is empty, like this, so I won't make any search. Okay, so I will show an error. That's kind of idea, and render is just my method is calling the API that we already have server side that is making the queries with AI like it's looping through the movies and it's injecting new movie item components.

[00:08:12]
Nothing really fancy. And if there are no movies so movies length equals to zero. It's just saying there are no movies with your search, that's not an error. I mean, you are searching for a movie that doesn't exist. Okay, make sense? Nothing completely complicated. So now, if I then search for Superman movies, nothing happens, because it seems like we have a bug somewhere.

[00:08:41]
So it says that Movies Page is not exported. So let's see, when I rename things, I might be doing some weird stuff. No, maybe I need to refresh, okay, no. Okay, MoviesPage doesn't provide an export name, movies page. But actually, we do have it, right. Movies page, movies page.

[00:09:10]
>> Speaker 2: The default export.
>> Maximiliano Firtman: Yeah, maybe because what's the difference when you have default you don't need then to use calibrates when you are importing it. Okay, so that's the difference, and in the routes, route say, yes, we had those calibrate. So if I leave the default, then I need to remove this.

[00:09:37]
So both will work, okay, but just to stay consistent with the others. This has got to do with Ecmascript modules. So refreshing, there we are. We are back searching for Superman and we see this, which is something, okay? It's not yet the list, but we actually see the animation that actually looks pretty good, right?

[00:10:01]
>> Maximiliano Firtman: That's the animation that we have created before. We have this filter by genre and now sort by popularity and we can change this. That's the idea it's not working yet. We need to finish that part. And also we should see why it's not loading. So here it says API is not defined.

[00:10:20]
So that happens when you copy and paste. So movie space has a call to API, but it has no import for it. So control space enter will add the import without js. Okay, and I think checking if there is any other import that I need quickly. I don't think so.

[00:10:45]
So if I refresh now, it says search, I have search, search movies for some reason. Yeah, here. That's wrong, it's only one search. It says there are no movies with your search which, these we are okay, there should be some. So now how to debug this? First, I may look into the network tab and maybe I wanna look at fetchXHR and if you look here, I'm seeing something weird there.

[00:11:19]
It's searching with the function to a string. So something is wrong somewhere when I'm doing the API part, okay. So I'm sending to search movies, queue, order, and genre. And here I'm sending arguments, okay. So it seems like the problem is here. Can you spot the problem? We have a bug that is coming from a few hours ago, many hours ago.

[00:11:44]
Problem is here.
>> Maximiliano Firtman: Choosetring is a function.
>> Maximiliano Firtman: So that's a bug that we have, this is the first time that we are actually calling that function. So choose string is a function. So if you are passing the function as an argument, it's trying to pass the function to the server.

[00:12:04]
So it doesn't make any sense. So we need to call this by the way, this code is taking this and converting this into a query string. Okay, so let's try again. Refresh, I can see that now to a server, it's sending the right query, q=superman. And if I look here, I'm still not seeing movies because searchtemComponent is not defined, okay?

[00:12:40]
Movies page, it's here. Why is that like this? I don't know, but in this case, we are going to create a new movie item component. I'm not sure when that changed, but that's our component, is movie item component. Okay, so refresh. Well now, movie item component is another one that I need to import.

[00:13:09]
Maybe you're thinking, well, but we have already imported that one. So it should be already defined, okay? Does that make sense? So why is it already imported? Because if you go to the homepage, remember, we are talking about that component. So the component was already loaded. But then when I'm going to search, the component is not there, it's complaining that it's not there, but you're loading the component.