-
So now that we can add movies to and from a user's watchlist, let's go ahead and add in a list of what the user has within their watchlist. And we'll add the button to get to this page
-
right up here next to the logout. But first we need to define the route and the handler. So within our watchlist controller, we can scroll on up to our index page and we'll want view and we're also gonna want auth
-
so that we can grab the authenticated user. Right now let's just return view.render and let's scroll down to our pages here to see what we have. There's a couple of different places that we could put this.
-
We could put it inside a movie's watchlist, we could do user's watchlist, or we could just put watchlist out here with our home. Since this will be our one and only page for watchlist, I think probably putting it out there with home
-
is gonna make the most sense. So we'll just do pages/watchlist for our render there. Let's save that real quick and let's go define the route for it. So above our toggle here,
-
let's do router.get/watchlist. I'm gonna leave the S off of this particular route because it will make a little bit more sense for the user since they have that one and only watchlist.
-
Whereas with our post here, it makes a little bit more sense because that's a resourceful action. Then we'll point this to our watchlist controller
-
and our index method inside of there is watchlist.index. We'll keep with the resourceful naming for the actual route name as that won't be user-facing in any way.
-
Now that we have that, let's dive into our navigation and add a link to that page when we have an authenticated user. So this will just be an ahref to our route,
-
watchlists, index, and we'll just call this link watchlist. Then we're gonna want these two to display beside each other. So let's go ahead and wrap it in a div
-
and a class of flex item center gap of maybe three and that div, give this here an indent and that div. And we also have our button text here is text extra small.
-
So let's go ahead and apply that to our link here as well so that they are the same size. All right, give that a save. Jump into our browser real quick just to check it out. And okay, let's also copy that hover padding on that as well.
-
Looks like that might actually just be within our CSS. So let's dive into our CSS real quick. Nav A, let's just apply that to nav button as well. Okay, just check that out once more. There we go, that's a little bit more uniform.
-
So we can't click on this quite yet because we haven't actually created the page. So let's do that next. So within our pages directory, let's right click that, new file, watchlist.edge, hit enter there.
-
And one thing I think would be really nice for this page is if we took what we have for our filters for our movies and apply that to the watchlist as well. So let's go ahead and use our movie index page,
-
which has our filters within it as the base point for our watchlist. Scroll up to the top. We'll change our meta description here to something like movies in your watchlist.
-
Scroll down a little bit because we should also have an H2, there it is. And we'll do the same there. So movies in your watchlist. Give that a save. And let's jump back into our watchlist controller
-
because we need to finish out our index method. Now for this, we can go ahead and use our movies controller as a starting point here as well. So we really just need to give everything here a copy
-
and we'll paste it and replace everything that we have within our index method so far. Updating the view render path to watchlist. Scroll up a little bit here
-
because we will also need our request and we can hit command dot on one of the red squigglies and add all missing imports. Looks like it didn't quite know where to get query string from.
-
So let's try hitting command dot there and there it is. So let's import that. Okay, let's make sure everything's nice and happy. Looks like it. So let's give this a save real quick
-
and give our watchlist page a click just to check and make sure that everything works. And okay, cannot resolve the page at pages watchlist.edge. I wonder if I misspelled it again.
-
Let's go scroll down and see. This time I didn't forget the L but I did forget the T. All right, let's rename that real quick. Can't fix that. Let's jump back into our browser and try that once more. There we go.
-
Okay, so next up we need to filter this down to just movies in our watchlist. So we could dive into our get filtered method and make that change in there
-
but then it would also apply to our movies index page where we're also using this method. We could add in an argument specifying whether or not we want to filter it to just our watchlist movies
-
or we could define another method but there's an alternative approach I think would be a little bit more reusable. So if we dive into our get filtered method, I think what would be most useful
-
is if we just left this to getting our filtered and we move the pagination back into the controller. So if we remove the paginate here, that's going to allow us to apply additional
-
filter statements to this query within the controller itself, making this method a little bit more reusable. So we'll remove the page and the paginate, give that a save once more so that it formats.
-
If we take a look real quick, no red squigglies as we're only being used for the pagination method. Let's first go ahead and dive back into our movies controller and fix the index method up there real quick. So if we scroll up,
-
we no longer want to supply the page into there. And if we temporarily remove the await here and we take a look at the type of our movies, it's now our model query builder contract.
-
We're no longer executing the query since we're not awaiting it anywhere, meaning that we can now do .paginate directly off of our get filtered call as the page number in
-
and specify that we want 15 per page. Now we no longer have that default one that we were applying within the parameter defaults of our get filtered call. So we do want to provide that default here
-
with our request.input as a default value of one there. And then we just need to add the await back. We'll remove that for demonstration purposes. So everything here should be behaving
-
the exact same as it was before. We just move the paginate from inside of our get filtered to now outside of our get filtered. So we want to do that exact same thing within our watchlist controller as well.
-
So remove page there, add in a default page of one on our page, input .paginate, specify the page and save 15 per page. Now, before we take this any further,
-
let's go ahead and dive back into our browser, give it a quick refresh just to make sure that everything still works and it does. Hide that back away. And specifically what that refactoring allowed us to do is now we can break this down
-
and do an additional where has to filter these results down beyond just our get filtered call. So now we can do a where has with watchlist
-
and specify that we only care about the watchlist where query.where user ID is the current auth user ID and our exclamation point there.
-
Now, since this is our watchlist controller and we're going to place an auth middleware on this to require a user to be authenticated in order to get in here, we don't need that if statement wrapping this where has.
-
So we're a-okay to leave this as is. We'll give that a save real quick. And now if we jump back into our browser, give it a refresh, we should only get back movies that are in the user's watchlist, which is exactly what we get.
-
Cool. So the next thing that we need to do is update our form because currently if we were to submit it, it's going to take us back to just our movies index page while we want to be on the watchlist page after we apply a filter.
-
So let's hide that back away, jump back into our watchlist page, and we should just need to update the action here from movies.index to our watchlist.index.
-
We also need to apply that to the base URL as well. So if we jump back into our watchlist controller, scroll down a little bit, the base URL right here, we need to switch that to our watchlist.index too.
-
Give that a save. Now, if we jump back into our browser and try to search by movies with a title containing S, search that, we get back just to, saving private Ryan and stay.
-
If we remove that, run it again, nope, looks like our validator there doesn't like an empty value for that. Probably need to add nullable to that as well. So let's go scroll up to our validators real quick,
-
go into our movie validator, movie filter validator, and let's see, that was our search field. So we have that as optional. Probably also need to just make that nullable. Let's give that a try. Jump back into our browser,
-
try removing that once more, search, nope, still doesn't like that. Okay, well, let's go ahead and just remove this off a numeric. It may be missing up the optional check that we have. Give that a save there.
-
And now if we run this without our title search, everything should be happy. There we go. See, we have one movie in post-production. I'm your boogeyman. So we'll go ahead and do a post-production search there.
-
All right, let's do a released and now put I'm your boogeyman should not be included. Cool, so everything seems to be working a-okay. Let's go check out our pagination real quick. So make sure that that's going to the right page,
-
which it is, and it still has our filters applied, which it does, cool.
