Make a Confirmation Modal using React & Redux

Question

I was making an application in which I need to make a confirmation box to ask the user if he wants to delete the record or not. I want to use the confirmation box globally .

Suppose I want to delete a record, when the user clicks the delete button it executes the action to delete the record. But once inside the delete action another action is dispatched to show Modal. (till this point I have reached)
However, I'm struggling on the part where execution should wait for the user to click confirm or cancel. Once the user has performed the action then execution to delete the record should continue.

I hope my problem statement was clear.

Please let me know what should I do. I really want to learn how this thing works in React.

Currently, I'm using a window's confirmation to ask the user Yes or No.

// Delete Profile
export const deleteProfile = (history) => async (dispatch) => {
    try {
        if (
            window.confirm('Are you Sure? Your account would be permanently lost')
        ) {
            await axios.delete(`/api/profile`);

            dispatch({ type: actionTypes.CLEAR_PROFILE });
            dispatch({ type: actionTypes.ACCOUNT_DELETED });
            history.push('/login');
            dispatch(
                setAlert('Your account has been deleted permanently', 'success')
            );
        }
    } catch (err) {
        dispatch(setAlert('Profile deletion error', 'danger'));
    }
};

I'm hoping to call a modal in place of window confirmation and wait for user input, if it returns true I want to move ahead or else abort.

Answer 1

You have to create a Component called Dialog that opens when the deleteProfile method is called and put two buttons, one for canceling and the other for delete, when the delete button is pressed you call the deleting code. I recommend you to use some library like material-ui . This library has multiple useful and very good looking components that you can utilize. For this case in specific I recommend you the Dialog component. You can use it like this:

<Dialog
   open={dialogOpen}
   onClose={dialogClose}
   >
   <DialogContent>
      Are you Sure? Your account would be permanently lost
   </DialogContent>
   <DialogActions>
      <Button>Cancel</Button>
      <Button onClick={deleteMethod}>Delete</Button>
   </DialogActions>
</Dialog>

Where dialogOpen is either a boolean component state or a redux state when is true, the Dialog will open; and dialogClose is a method where you will change the dialogOpen state to false to the Dialog to close.

Now as you can check you have the deleteMethod where all you deleting code will be. You call this code when the delete button is pressed.

For open the Dialog asynchronusly what you can do is put and await once you set dialogOpen variable, something like this:

await this.setState({dialogOpen: true});

or if you want inside an async method like this:

const method = async () =>{
  await this.setState({dialogOpen: true});
}

And you just have to call the method like this:

await method();

I hope this helps!

Answer 2

Open confirmation box on click of delete button. Delete record on click of confirm button.

Answer 3

thanks. I tried this and it really worked. how I didn't think of that.