00:00
(upbeat music)
00:02
So currently to persist our active filters,
00:07
we are manually plopping that onto the end
00:09
of our generated pagination URLs,
00:12
because that's not information that we can directly add
00:14
into the base URL for the paginator.
00:16
However, there is a method that I happen to overlook
00:18
whenever we were recording our pagination lesson
00:20
that I wanna circle back on and cover here today.
00:23
This will allow us to get rid of our use
00:24
of the query string module from Node.js.
00:27
We can get rid of this line here altogether,
00:29
and we can go ahead and scroll on up
00:30
and get rid of that import there as well.
00:32
And additionally, we were looping over
00:34
our generated pagination items,
00:36
and that's where we were appending
00:37
the query string on for those.
00:38
This is our one, two, three, four, five links,
00:40
so on and so forth.
00:41
So we can go ahead and get rid of that there as well.
00:44
And it looks like we were also passing query string
00:46
directly into the page, so we can get rid of that too.
00:48
With all of that out of the way,
00:49
we can replace each and every single one of those
00:51
with a single call from movies,
00:53
which is our simple paginator result from Lucid.
00:56
There is a .queryString method
00:59
that will take a key value pair,
01:01
and it will apply that to any of our pagination
01:03
generated URLs.
01:05
For example, whatever we call getURLsForRange here,
01:07
it will use whatever query strings we provide here
01:09
into those generated URLs for range.
01:12
And we happen to have our query strings
01:13
directly accessible as a key value pair as filters,
01:16
which we have coming directly from our validator.
01:19
So with this simple line here,
01:20
we have just replicated everything that we've just removed.
01:22
This was on our watchlist controller.
01:24
We also need to apply this on our movies controller here
01:26
as well as we were doing the exact same thing.
01:28
So we get rid of our query string,
01:30
scroll up, get rid of that import too,
01:32
scroll down a little bit,
01:33
get rid of our individual paginator item
01:35
appending of the query string,
01:37
and get rid of QS from the page as well.
01:39
Then we'll scroll on up, do movies.queryString,
01:43
and apply in our filters there too.
01:45
Then let's go ahead and jump into those pages.
01:47
So we'll jump into our pages, movies, index page
01:49
by hitting command and clicking on it,
01:50
because we're generating URLs using getURL
01:53
for the first and last page links here as well.
01:56
So we can get rid of the query string for those too.
01:59
So we get rid of it there.
02:00
We can get rid of it on our previous, just like so.
02:02
Scroll down a little bit further,
02:04
down to where we have our next, get rid of it there.
02:07
Scroll down a little bit further to our last
02:10
and get rid of it there too.
02:11
Do a quick search to make sure
02:12
that we weren't using query string anywhere else.
02:14
So far so good.
02:16
Yep, our filters are using the filters key
02:18
that we were providing.
02:19
So everything there looks good.
02:20
We need to jump into our watchlist controller
02:22
to jump down quickly to our pages watchlist too
02:24
and do the exact same thing.
02:26
So scroll on down to where we have our pagination links.
02:28
Don't see anything there.
02:29
Scroll down a little bit further.
02:30
Here we go.
02:31
Here they are.
02:32
Go ahead and get rid of the query string appending there too
02:34
for each one of these links.
02:36
So there's previous.
02:38
We'll scroll down past the numbered and go to our next,
02:41
get rid of it there,
02:42
and then scroll down to our last and get rid of it there too.
02:45
With that applied,
02:45
we should be able to jump into our browser
02:47
and everything should work the exact same as before,
02:49
just with a vast simplification
02:51
of reapplying our query string
02:52
onto all of our pagination links.
02:54
So let's give our browser here a refresh
02:55
just for sanity's sake.
02:56
And if we take a look at our first page,
02:58
the little tool tip down here
02:59
in the bottom left-hand corner looks exactly right.
03:02
It's reapplying everything
03:03
and it also has the page number there too.
03:05
Give that a click.
03:06
Everything there worked.
03:07
Take a look at one.
03:08
That looks right.
03:09
Take a look at two.
03:10
Go ahead and give that a click.
03:11
Everything persisted.
03:12
Awesome.
03:13
Three looks right.
03:13
We'll go down to next, click on that.
03:15
We jumped to three,
03:16
keeping all of our pagination items.
03:18
Awesome.
03:18
And finally, our last.
03:20
That looks good too.
03:21
Cool.
03:21
While we're here, let's go ahead and log in.
03:23
We have, I think, test2test.com
03:25
and some password there to log in as our John Doe.
03:28
Let's jump into their watch list.
03:29
Apply some filter.
03:30
Hit next.
03:31
And okay, we only have one page for this,
03:33
but we can see that the page here looks correct as well.
03:36
Let's go ahead and clear out the watch list items
03:38
and make sure that it looks good there too.
03:40
Yep, just has page.
03:41
Let's do the exact same thing for our movies.
03:43
Jump down, take a look at these.
03:45
Yep, those just have page two.
03:46
Awesome.
03:47
So everything there is working A-okay.
03:49
Apologies that I had overlooked this method initially,
03:52
but at least it's covered.
03:53
We know about it now
03:54
and we can make use of it going forward
03:56
to keep our pagination simple.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!