Sign In Sign Up

Sign In Sign Up

Let's Learn AdonisJS 6

Playing Next Lesson In

seconds

Let's Learn AdonisJS 6

Let's Learn AdonisJS 6 #9.6

Persist Filters Easily with Lucid's Query String Method

In This Lesson

Learn how to simplify pagination by persisting active filters with the query string method. Follow this step-by-step guide to clean up your code, apply the .queryString method from Lucid, and ensure seamless pagination for your web applications.

Created by: @tomgobich
Published: 1 year ago

00:00 - Current Pagination Approach

Explanation of current method: manually appending filters to pagination URLs

00:16 - Overlooked Method

Introduction to an overlooked method to simplify pagination
Removal of the query string module from Node.js

00:29 - Code Cleanup

Steps to remove the existing query string logic from the code
Cleaning up imports and looping mechanisms

00:51 - New Pagination Method

Introduction of the .queryString method from Lucid's simple paginator
Implementation of the new method to handle key-value pairs for pagination

01:08 - Applying Changes to Watchlists Controllers

Application of the new method to the watchlist controller
Removal of old query string code from the watchlist controller

01:26 - Movies Controller Updates

Repeating the process for the movies controller
Removal of old query string logic from the movies controller

01:45 - Updating Pages

Updating the movies index page to remove query string logic
Ensuring the new method is applied to all pagination links (first, previous, next, last)

02:15 - Validation and Testing

Checking for any remaining use of the query string
Validation that filters are correctly applied
Testing in the browser to ensure everything works correctly with the new method

02:48 - Logging In and Further Testing

Logging in to test user functionality
Applying filters and navigating through pages to confirm persistence of filters

Join the Discussion 0 comments

robot comment bubble

Be the first to comment!

Transcript

So currently to persist our active filters, we are manually plopping that onto the end of our generated pagination URLs,
because that's not information that we can directly add into the base URL for the paginator. However, there is a method that I happen to overlook whenever we were recording our pagination lesson
that I wanna circle back on and cover here today. This will allow us to get rid of our use of the query string module from Node.js. We can get rid of this line here altogether, and we can go ahead and scroll on up
and get rid of that import there as well. And additionally, we were looping over our generated pagination items, and that's where we were appending the query string on for those.
This is our one, two, three, four, five links, so on and so forth. So we can go ahead and get rid of that there as well. And it looks like we were also passing query string directly into the page, so we can get rid of that too.
With all of that out of the way, we can replace each and every single one of those with a single call from movies, which is our simple paginator result from Lucid.
There is a .queryString method that will take a key value pair, and it will apply that to any of our pagination generated URLs.
For example, whatever we call getURLsForRange here, it will use whatever query strings we provide here into those generated URLs for range. And we happen to have our query strings
directly accessible as a key value pair as filters, which we have coming directly from our validator. So with this simple line here, we have just replicated everything that we've just removed.
This was on our watchlist controller. We also need to apply this on our movies controller here as well as we were doing the exact same thing. So we get rid of our query string, scroll up, get rid of that import too,
scroll down a little bit, get rid of our individual paginator item appending of the query string, and get rid of QS from the page as well.
Then we'll scroll on up, do movies.queryString, and apply in our filters there too. Then let's go ahead and jump into those pages. So we'll jump into our pages, movies, index page
by hitting command and clicking on it, because we're generating URLs using getURL for the first and last page links here as well.
So we can get rid of the query string for those too. So we get rid of it there. We can get rid of it on our previous, just like so. Scroll down a little bit further,
down to where we have our next, get rid of it there. Scroll down a little bit further to our last and get rid of it there too. Do a quick search to make sure
that we weren't using query string anywhere else. So far so good. Yep, our filters are using the filters key that we were providing. So everything there looks good. We need to jump into our watchlist controller
to jump down quickly to our pages watchlist too and do the exact same thing. So scroll on down to where we have our pagination links. Don't see anything there. Scroll down a little bit further. Here we go.
Here they are. Go ahead and get rid of the query string appending there too for each one of these links. So there's previous. We'll scroll down past the numbered and go to our next,
get rid of it there, and then scroll down to our last and get rid of it there too. With that applied, we should be able to jump into our browser and everything should work the exact same as before, just with a vast simplification
of reapplying our query string onto all of our pagination links. So let's give our browser here a refresh just for sanity's sake. And if we take a look at our first page, the little tool tip down here
in the bottom left-hand corner looks exactly right. It's reapplying everything and it also has the page number there too. Give that a click. Everything there worked. Take a look at one. That looks right.
Take a look at two. Go ahead and give that a click. Everything persisted. Awesome. Three looks right. We'll go down to next, click on that. We jumped to three, keeping all of our pagination items. Awesome.
And finally, our last. That looks good too. Cool. While we're here, let's go ahead and log in. We have, I think, test2test.com and some password there to log in as our John Doe.
Let's jump into their watch list. Apply some filter. Hit next. And okay, we only have one page for this, but we can see that the page here looks correct as well.
Let's go ahead and clear out the watch list items and make sure that it looks good there too. Yep, just has page. Let's do the exact same thing for our movies. Jump down, take a look at these.
Yep, those just have page two. Awesome. So everything there is working A-okay. Apologies that I had overlooked this method initially, but at least it's covered. We know about it now
and we can make use of it going forward to keep our pagination simple.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

1

Fundamentals

2

Building Views with EdgeJS

3

Database and Lucid ORM Basics

4

Lucid ORM Relationships

5

Working With Forms

6

Authentication & Middleware

7

Filtering and Paginating Queries

8

User Watchlist

9

User Profiles

10

Admin Panel

11

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.

Sign up Sign in