Add support for filtering difficulty and sorting via URL Query Params

[plibither8]

This PR implements and closes #183: something which I too was wanting to suggest for quite some time.

I have coded this in quite a hurry so it might seem sloppy. There is more work to be put into this PR, IMHO.

Summary:

• Created a main parameters Object that holds action, getValue and setValue methods for the parameters specified in the Object. Currently, they are: tags, difficulty and sort.

• New function updateUrl which is called in the handleTags function. It updates the URL whenever there is a change in the input of either of the three parameters.

NB: I might not be available that often to reply or maintain this PR and other related issues due to exams. Please feel free to directly commit to this PR when need be :smile:

[plibither8]

Note: the latest push to the PR is NOT working

The latest commit is my attempt at a neater implementation of the same, though it is not working the way it should. URL is updating properly but somehow (in a way I am not being able to grasp), all items are becoming non-.visible.

@vikaspotluri123 since you have worked on the cascade function, could you provide some insights? Thanks :smile:.

[plibither8]

@vikaspotluri123 Ah yes! Should've caught that earlier :flushed:!

Nevertheless, the issue persists :slightly_frowning_face:

[plibither8]

Problem fixed! :tada: Turns out I was using an outdated version of the JS file :see_no_evil: Don't cachebust during development! :smile:

Also, why do the Netlify builds keep failing?

[vikaspotluri123]

Hopefully getting #170 merged will clean up your issues with cachebusting 🤞

[aslafy-z]

I made a patch to support cleaning values if they are set to the default one, and not adding ? in url if there are no args.

Note: pushState does not create a history entry if the url is same as the current one

Note: issue regarding URLSearchParams size check: https://github.com/whatwg/url/issues/163

diff --git a/src/js/index.js b/src/js/index.js
index 03c7499..e16c931 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -21,14 +21,17 @@ const allowDifficultySelect = shouldAllow => sortingInput.querySelectorAll('.dif
 
 const parameters = {
     'tags': {
+        default: '',
         setValue: value => selectr.setValue(value.split(' ')),
         getValue: () => selectr.getValue().join(' ')
     },
     'difficulty': {
+        default: 'alldifficulties',
         setValue: value => filterInput.value = ['easy', 'medium', 'difficult'].includes(value) ? value : 'alldifficulties',
         getValue: () => filterInput.value,
     },
     'sort': {
+        default: 'ALPHABETICAL_ASCENDING',
         setValue: value => sortingInput.value = value in sort ? value : 'ALPHABETICAL_ASCENDING',
         getValue: () => sortingInput.value
     }
@@ -40,13 +43,17 @@ function updateUrl() {
     let newSearch = new URLSearchParams(window.location.search);
     for (let parameter in parameters) {
         const paramValue = parameters[parameter].getValue();
-        if (paramValue === '') {
+        if (['', parameters[parameter].default].includes(paramValue)) {
             newSearch.delete(parameter);
             continue;
         }
         newSearch.set(parameter, paramValue);
     }
-    const newRelativePathQuery = `${window.location.pathname}?${newSearch.toString()}`;
+    const newSearchString = newSearch.toString();
+    let newRelativePathQuery = window.location.pathname;
+    if (newSearchString) {
+        newRelativePathQuery += `?${newSearchString}`
+    }
     history.pushState(null, '', newRelativePathQuery);
 }

[plibither8]

Alright! Will make the changes. Thanks :+1:

[plibither8]

@aslafy-z made the respective changes, please check :smile:

[plibither8]

Edit: Just implemented for...of loops. Thanks 😄

---

@aslafy-z for...of loops cannot be used to iterate over objects: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of.

Is there another solution?

[plibither8]

Also, now with the URL updating only when the params don't match default values, it somehow seems incomplete. For example, if I want to see the items in "Alphabetical, reversed" order, the URL is: https://devswag.io/?order=desc. What do you think about it?

[plibither8]

Pinging @aslafy-z, @vikaspotluri123 for reviewal 😄

[plibither8]

@aslafy-z moved 'difficulties' out of the select element 👍, it looks much neater now

[aslafy-z]

@plibither8 Hello! Any chance you rebase your work? Thank you!

[aslafy-z]

@plibither8 quick ping. Can you rebase this PR on the latest changes? Thanks!

[aslafy-z]

@plibither8 We'd love to see this land, any chance you get some time to rebase the PR? Thank you!

[plibither8]

@aslafy-z Hi! First of all sorry, I did not realise i completely ignored the previous two pings that you did, should've realised and replied earlier. I'm quite busy these days with other commitments but would be happy to give it a shot once I get time :). I''ll get back to you and update this thread soon, hopefully.

[plibither8]

@aslafy-z in general, I think this site could go through a complete refactor to cleanup the code and make it more modern and maintainable. I started work on the site almost three years ago when I was comfortable working with Pug and Gulp.

@swapagarwal @aslafy-z and rest of the maintainers, if you have the capacity we can discuss a revival of Swag for Dev, since the maintenance and content update frequency have fell rather flat. Let's see :D.