0

Let's say I have a page that renders search results depending on the parameters in the URL like so:

https://www.someurl.com/categories/somecategory?brands=brand1,brand2,brand3

Which results in the page showing only brand1, brand2, and brand3 listings. I also have a filter section on the side like so:

[o] Brand 1
[ ] Brand 2
[o] Brand 3
[o] Brand 4

By ticking the items, the URL will get updated with the corresponding parameters. Basically, what happens is that I am fetching data from an API by passing the URL parameters as arguments, which then the server side endpoint takes in to return to me the matching data.

Now the problem is that, if a user types into the URL an invalid parameter e.g. 

https://www.someurl.com/categories/somecategory?brands=somegibberish

The server will return an error (which I then display on the page).

However, when I tick one or more of the filters, since what it does is merely append into the URL more parameters, the server will always return an error as the errant parameter is still being sent over:

https://www.someurl.com/categories/somecategory?brands=somegibberish,brand1,brand2

To solve this, currently, when someone clicks a filter and error is not null, I just clear the parameters like so:

componentDidUpdate(prevProps)
    if (prevProps.location.search !== location.search) {
        if (
            someobject.error &&
            !someobject.list.length
        ) {
            this.props.history.replace("categories", null);
            this.props.resetError();
        }
    }
}

Which results in the path becoming:

https://www.someurl.com/categories/

But the UX of that isn't smooth because when I click a filter (even if there was an error), I expect it to do a filter and not to clear everything. Means if I have this path previously (has an error param):

https://www.someurl.com/categories/somecategory?brands=somegibberish,brand1

..and I click on brand2 in my filters, the path should become:

https://www.someurl.com/categories/somecategory?brands=brand1,brand2

But am quite stumped as to how to know which of the parameters has to be removed. Any ideas on how to achieve it? Should the server return to me the 'id' that it cannot recognize then I do a filter? Currently, all the server returns to me is an error message.

catandmouse
  • 11,309
  • 23
  • 92
  • 150
  • 1
    Well, if you already have the allowed categories somewhere in your react app, you could filter out anything that's not included in that list before doing the request. Since the user typing in the URL shouldn't be supported in the webapp, that should give a decent fallback for your app, and it would save you the trouble of modifying the server code – SrThompson Nov 20 '18 at 03:56

1 Answers1

1

I agree with SrThompson's comment to not support typing of brands in the app since anything outside of your list results in an error anyway.

Expose an interface with the possible brands for the user to make a selection from.

With that said, here's how you can go about filtering the brands in the request URL.

Convert the URLstring to a URL object and retrieve the value for "brands" query parameter from its search params.

const url = new URL(
  "https://www.someurl.com/categories/somecategory?brands=somegibberish,brand1,brand2")

const brands = url.searchParams.get("brands")

Filter brands that are not included in the filter list

const BRAND_FILTER = ['brand1', 'brand2']

const allowedBrands = brands.split(',')
                            .filter(brand => BRAND_FILTER.includes(brand))
                            .join(',')

Update the brand query parameter value

url.searchParams.set("brands", allowedBrands)

Then get the URL to be used for the request.

const requestURL = url.toString();
Oluwafemi Sule
  • 36,144
  • 1
  • 56
  • 81
  • Yup, we are not allowing them to type in brands that's why we have a filter menu on the side. But for some odd reason, they may put the cursor into the URL bar and mistype one character then hit enter, that was the fallback I was thinking. – catandmouse Nov 20 '18 at 07:43