Search Page

[00:00:00]
>> All right, I'm gonna remove that logging, we no longer need it. We've verified that we are, in fact, getting cache hits. So, I'm just gonna delete that and delete that. Okay, let's add a search page that we can search for movies that we're interested in. The score by now we create a new directory inside here, call it search.

[00:00:28]
And inside there, we'll create a page.ts and a page.svelte. And we'll add a load function in our page.ts file. And we're going to be using the URL object because we're going to need to grab the query parameter. And if the query parameter isn't specified, then we'll just assume that someone has come direct to the search page and they haven't yet performed a search.

[00:01:22]
So, we're going to return an empty array of movies. I'm also going to pass the empty string back to them. But if they have specified a query, then we're going to make an API request. That's data equals await. And we need to import our API helper. { import * as api from '$lib/api' }.

[00:02:01]
We've got to pass in our fetch. So, let's grab that. And the endpoint this time is search/movie. And we're going to pass that query direct to the API. And this is going to give us back another MovieList. You can see that it's auto-imported that from our type declarations.

[00:02:30]
So, we'll return the query so that we can render that in the search input. And the movies are the results array from the data object. And then inside our search page. We're gonna add a div class = column. And at the very top, we'll just have a big title that says, Search.

[00:03:06]
So, let's go over to our in progress search page. And we'll say that if there was a query that was made, we need to create our script tag so that we can access the data that was passed in. Remember Lang equals TS export let data don't know what's going on with my typing skills right now.

[00:03:38]
Data Query was provided. Then we're going to use that results page component that we've been using so far. Pass it the movies. And we're going to give it a next attribute of null for now. And obviously, because we don't have a query at this point, we don't have anything to render.

[00:04:12]
In theory, if I add a query like Avatar now, it is in fact performing a search and rendering that. But we want to have some user interface that allows us to edit the query. So, let's create a form element. Unlike the other forms that we've been using in this workshop, we're not using method equals post this time because this is just going to reload the current page.

[00:04:36]
It's not mutating any data or anything like that. It's just making a request to the API. So, we'll omit the method and we'll omit the action, but we'll add an input, give it a name query, because that's going to correspond to the query parameter. We'll initialize it with any query that was previously added like this.

[00:05:05]
I'm going to disable autocomplete and I'm going to disable the spellcheck, otherwise it's going complain about the spellings of movies. And hopefully, if I now search for Star Wars. It's going to go away, it's going to perform an API request, and it's going to update the page in place without reloading the page.

[00:05:31]
So, unlike a form method equals post, form method equals get is going to default to doing everything client-side. We're not going to reload the page to get those new results. Let's make this input look a little bit nicer. First thing you want to do is inherit the same font family that we're using elsewhere.

[00:05:52]
We're going to make the input a little larger, say 2em, give it some padding and make it fill the width of the screen. Going to give it a nice translucent background. It's a very subtle, white color and remove the border because the default browser styling for these elements is ugly as sin.

[00:06:20]
A little subtle border radius. And we're going to need to give it a color as well, so make that white. I don't really like this bright blue outline. Let's use the nice accent color that we're using for the elements in our nav. We can do that with a focus visible selector.

[00:06:50]
Outline 2px solid, I'll use var accent like so. All right, and we can now search for all of the John Wick movies or whatever else we're interested in.