Htykuut

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');

  })

});

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.