getUserConfirmation Prompt React Router with History Redirect
I'm using createBrowserHistory with getUserConfirmation to handle confirmation user validation when leaving a page where a form state has changed:
import { createBrowserHistory } from 'history';
import store from './store';
import { displayPrompt } from './ui/navigation-prompt/navigationPromptDucks';
export default createBrowserHistory({
getUserConfirmation(message, callback) {
store.dispatch(displayPrompt(message, callback));
},
});
It works well:
When I start editing the form and I try to leave the current page I got the confirmation prompt.
Now, let's say I have a delete button to remove the resource of the form, and when deletion succeed I got a history redirect to the resource list page.
My problem is:
If I start editing the form and finally decide to hit the delete button to remove the resource instead of editing it, the history triggers that the form has changed and will show up the confirm prompt before the history redirection.
I have two choice. First, I can put back the initial form state to avoid the prompt to show up. Second, there is an other way to prevent in some cases the prompt to show up.
What is the best solution? If it's the second one, could you tell me how to do that?
Solution 1 (first choice)
Reset form before history redirection:
const mapDispatchToProps = (dispatch, { user, history, t }) => ({
deleteUser: () => new Promise((resolve, reject) => {
dispatch(newAlertDialog(
t('confirmDeleteUser', { user: user.name }),
t('confirmDeleteTitle'),
() => dispatch(requestDeleteUser(user.id, resolve, reject)),
t('delete'),
))
}).then(() => {
// reset form to avoid prompt user confirmation
dispatch(reset('EditUser'));
history.push('/users');
})
});
reactjs history.js
asked Nov 21 '18 at 14:08
louis amoroslouis amoros
8341820
add a comment |
I'm using createBrowserHistory with getUserConfirmation to handle confirmation user validation when leaving a page where a form state has changed:
import { createBrowserHistory } from 'history';
import store from './store';
import { displayPrompt } from './ui/navigation-prompt/navigationPromptDucks';
export default createBrowserHistory({
getUserConfirmation(message, callback) {
store.dispatch(displayPrompt(message, callback));
},
});
It works well:
When I start editing the form and I try to leave the current page I got the confirmation prompt.
Now, let's say I have a delete button to remove the resource of the form, and when deletion succeed I got a history redirect to the resource list page.
My problem is:
If I start editing the form and finally decide to hit the delete button to remove the resource instead of editing it, the history triggers that the form has changed and will show up the confirm prompt before the history redirection.
I have two choice. First, I can put back the initial form state to avoid the prompt to show up. Second, there is an other way to prevent in some cases the prompt to show up.
What is the best solution? If it's the second one, could you tell me how to do that?
Solution 1 (first choice)
Reset form before history redirection:
const mapDispatchToProps = (dispatch, { user, history, t }) => ({
deleteUser: () => new Promise((resolve, reject) => {
dispatch(newAlertDialog(
t('confirmDeleteUser', { user: user.name }),
t('confirmDeleteTitle'),
() => dispatch(requestDeleteUser(user.id, resolve, reject)),
t('delete'),
))
}).then(() => {
// reset form to avoid prompt user confirmation
dispatch(reset('EditUser'));
history.push('/users');
})
});
reactjs history.js
asked Nov 21 '18 at 14:08
louis amoroslouis amoros
8341820
add a comment |
I'm using createBrowserHistory with getUserConfirmation to handle confirmation user validation when leaving a page where a form state has changed:
import { createBrowserHistory } from 'history';
import store from './store';
import { displayPrompt } from './ui/navigation-prompt/navigationPromptDucks';
export default createBrowserHistory({
getUserConfirmation(message, callback) {
store.dispatch(displayPrompt(message, callback));
},
});
It works well:
When I start editing the form and I try to leave the current page I got the confirmation prompt.
Now, let's say I have a delete button to remove the resource of the form, and when deletion succeed I got a history redirect to the resource list page.
My problem is:
If I start editing the form and finally decide to hit the delete button to remove the resource instead of editing it, the history triggers that the form has changed and will show up the confirm prompt before the history redirection.
I have two choice. First, I can put back the initial form state to avoid the prompt to show up. Second, there is an other way to prevent in some cases the prompt to show up.
What is the best solution? If it's the second one, could you tell me how to do that?
Solution 1 (first choice)
Reset form before history redirection:
const mapDispatchToProps = (dispatch, { user, history, t }) => ({
deleteUser: () => new Promise((resolve, reject) => {
dispatch(newAlertDialog(
t('confirmDeleteUser', { user: user.name }),
t('confirmDeleteTitle'),
() => dispatch(requestDeleteUser(user.id, resolve, reject)),
t('delete'),
))
}).then(() => {
// reset form to avoid prompt user confirmation
dispatch(reset('EditUser'));
history.push('/users');
})
});
reactjs history.js
asked Nov 21 '18 at 14:08
louis amoroslouis amoros
8341820
I'm using createBrowserHistory with getUserConfirmation to handle confirmation user validation when leaving a page where a form state has changed:
import { createBrowserHistory } from 'history';
import store from './store';
import { displayPrompt } from './ui/navigation-prompt/navigationPromptDucks';
export default createBrowserHistory({
getUserConfirmation(message, callback) {
store.dispatch(displayPrompt(message, callback));
},
});
It works well:
When I start editing the form and I try to leave the current page I got the confirmation prompt.
Now, let's say I have a delete button to remove the resource of the form, and when deletion succeed I got a history redirect to the resource list page.
My problem is:
If I start editing the form and finally decide to hit the delete button to remove the resource instead of editing it, the history triggers that the form has changed and will show up the confirm prompt before the history redirection.
I have two choice. First, I can put back the initial form state to avoid the prompt to show up. Second, there is an other way to prevent in some cases the prompt to show up.
What is the best solution? If it's the second one, could you tell me how to do that?
Solution 1 (first choice)
Reset form before history redirection:
const mapDispatchToProps = (dispatch, { user, history, t }) => ({
deleteUser: () => new Promise((resolve, reject) => {
dispatch(newAlertDialog(
t('confirmDeleteUser', { user: user.name }),
t('confirmDeleteTitle'),
() => dispatch(requestDeleteUser(user.id, resolve, reject)),
t('delete'),
))
}).then(() => {
// reset form to avoid prompt user confirmation
dispatch(reset('EditUser'));
history.push('/users');
})
});
reactjs history.js
reactjs history.js
asked Nov 21 '18 at 14:08
louis amoroslouis amoros
8341820
asked Nov 21 '18 at 14:08
louis amoroslouis amoros
8341820
edited Nov 21 '18 at 14:33
louis amoros
asked Nov 21 '18 at 14:08
louis amoroslouis amoros
8341820
asked Nov 21 '18 at 14:08
louis amoroslouis amoros
8341820
asked Nov 21 '18 at 14:08
louis amoroslouis amoros
8341820
8341820
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Reset form before history redirection seems to be the best solution in my case:
const mapDispatchToProps = (dispatch, { user, history, t }) => ({
deleteUser: () => new Promise((resolve, reject) => {
dispatch(newAlertDialog(
t('confirmDeleteUser', { user: user.name }),
t('confirmDeleteTitle'),
() => dispatch(requestDeleteUser(user.id, resolve, reject)),
t('delete'),
))
}).then(() => {
// reset form to avoid prompt user confirmation
dispatch(reset('EditUser'));
history.push('/users');
})
});
As the resource will be removed, reset form with initial values is a good way to avoid prompt to pop up.
answered Nov 22 '18 at 14:14
louis amoroslouis amoros
8341820
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%2f53413908%2fgetuserconfirmation-prompt-react-router-with-history-redirect%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
Reset form before history redirection seems to be the best solution in my case:
const mapDispatchToProps = (dispatch, { user, history, t }) => ({
deleteUser: () => new Promise((resolve, reject) => {
dispatch(newAlertDialog(
t('confirmDeleteUser', { user: user.name }),
t('confirmDeleteTitle'),
() => dispatch(requestDeleteUser(user.id, resolve, reject)),
t('delete'),
))
}).then(() => {
// reset form to avoid prompt user confirmation
dispatch(reset('EditUser'));
history.push('/users');
})
});
As the resource will be removed, reset form with initial values is a good way to avoid prompt to pop up.
answered Nov 22 '18 at 14:14
louis amoroslouis amoros
8341820
add a comment |
Reset form before history redirection seems to be the best solution in my case:
const mapDispatchToProps = (dispatch, { user, history, t }) => ({
deleteUser: () => new Promise((resolve, reject) => {
dispatch(newAlertDialog(
t('confirmDeleteUser', { user: user.name }),
t('confirmDeleteTitle'),
() => dispatch(requestDeleteUser(user.id, resolve, reject)),
t('delete'),
))
}).then(() => {
// reset form to avoid prompt user confirmation
dispatch(reset('EditUser'));
history.push('/users');
})
});
As the resource will be removed, reset form with initial values is a good way to avoid prompt to pop up.
answered Nov 22 '18 at 14:14
louis amoroslouis amoros
8341820
add a comment |
Reset form before history redirection seems to be the best solution in my case:
const mapDispatchToProps = (dispatch, { user, history, t }) => ({
deleteUser: () => new Promise((resolve, reject) => {
dispatch(newAlertDialog(
t('confirmDeleteUser', { user: user.name }),
t('confirmDeleteTitle'),
() => dispatch(requestDeleteUser(user.id, resolve, reject)),
t('delete'),
))
}).then(() => {
// reset form to avoid prompt user confirmation
dispatch(reset('EditUser'));
history.push('/users');
})
});
As the resource will be removed, reset form with initial values is a good way to avoid prompt to pop up.
answered Nov 22 '18 at 14:14
louis amoroslouis amoros
8341820
Reset form before history redirection seems to be the best solution in my case:
const mapDispatchToProps = (dispatch, { user, history, t }) => ({
deleteUser: () => new Promise((resolve, reject) => {
dispatch(newAlertDialog(
t('confirmDeleteUser', { user: user.name }),
t('confirmDeleteTitle'),
() => dispatch(requestDeleteUser(user.id, resolve, reject)),
t('delete'),
))
}).then(() => {
// reset form to avoid prompt user confirmation
dispatch(reset('EditUser'));
history.push('/users');
})
});
As the resource will be removed, reset form with initial values is a good way to avoid prompt to pop up.
answered Nov 22 '18 at 14:14
louis amoroslouis amoros
8341820
answered Nov 22 '18 at 14:14
louis amoroslouis amoros
8341820
answered Nov 22 '18 at 14:14
louis amoroslouis amoros
8341820
answered Nov 22 '18 at 14:14
louis amoroslouis amoros
8341820
8341820
add a comment |
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%2f53413908%2fgetuserconfirmation-prompt-react-router-with-history-redirect%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
