Mixing
How to clear the search parameter that caused the error?
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.
javascript reactjs react-router react-router-v4
asked Nov 20 '18 at 2:28
catandmousecatandmouse
4,571125189
add a comment |
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.
javascript reactjs react-router react-router-v4
asked Nov 20 '18 at 2:28
catandmousecatandmouse
4,571125189
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 3:56
add a comment |
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.
javascript reactjs react-router react-router-v4
asked Nov 20 '18 at 2:28
catandmousecatandmouse
4,571125189
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.
javascript reactjs react-router react-router-v4
javascript reactjs react-router react-router-v4
asked Nov 20 '18 at 2:28
catandmousecatandmouse
4,571125189
asked Nov 20 '18 at 2:28
catandmousecatandmouse
4,571125189
asked Nov 20 '18 at 2:28
catandmousecatandmouse
4,571125189
asked Nov 20 '18 at 2:28
catandmousecatandmouse
4,571125189
asked Nov 20 '18 at 2:28
catandmousecatandmouse
4,571125189
4,571125189
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 3:56
add a comment |
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 3:56
1
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 3:56
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 3:56
add a comment |
1 Answer
1
active
oldest
votes
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();
answered Nov 20 '18 at 7:36
Oluwafemi SuleOluwafemi Sule
11.1k1432
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 7:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385350%2fhow-to-clear-the-search-parameter-that-caused-the-error%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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();
answered Nov 20 '18 at 7:36
Oluwafemi SuleOluwafemi Sule
11.1k1432
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 7:43
add a comment |
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();
answered Nov 20 '18 at 7:36
Oluwafemi SuleOluwafemi Sule
11.1k1432
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 7:43
add a comment |
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();
answered Nov 20 '18 at 7:36
Oluwafemi SuleOluwafemi Sule
11.1k1432
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();
answered Nov 20 '18 at 7:36
Oluwafemi SuleOluwafemi Sule
11.1k1432
answered Nov 20 '18 at 7:36
Oluwafemi SuleOluwafemi Sule
11.1k1432
answered Nov 20 '18 at 7:36
Oluwafemi SuleOluwafemi Sule
11.1k1432
answered Nov 20 '18 at 7:36
Oluwafemi SuleOluwafemi Sule
11.1k1432
11.1k1432
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 7:43
add a comment |
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 7:43
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 7:43
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 7:43
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385350%2fhow-to-clear-the-search-parameter-that-caused-the-error%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 3:56