Playing Next Lesson In
seconds

Transcript

  1. So currently to persist our active filters, we are manually plopping that onto the end of our generated pagination URLs,

  2. 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

  3. 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

  4. 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.

  5. 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.

  6. 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.

  7. There is a .queryString method that will take a key value pair, and it will apply that to any of our pagination generated URLs.

  8. 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

  9. 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.

  10. 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,

  11. 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.

  12. 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

  13. by hitting command and clicking on it, because we're generating URLs using getURL for the first and last page links here as well.

  14. 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,

  15. 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

  16. 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

  17. 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.

  18. 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,

  19. 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

  20. 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

  21. 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.

  22. 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.

  23. 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.

  24. 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.

  25. 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.

  26. 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

  27. and we can make use of it going forward to keep our pagination simple.

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

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

Create a free account to join in on the discussion
robot comment bubble

Be the first to comment!