React Admin Confirmation Dialogue On Save - reactjs

Question

I'm trying to show confirmation dialogue on saving in react admin framework but saving functionality started breaking.
Error
--> Converting circular structure to JSON
--> starting at object with constructor 'FiberNode'
| property 'stateNode' -> object with constructor 'HTMLButtonElement'
--- property '__reactInternalInstance$mtamow8fbfp' closes the circle
The dataProvider threw an error. It should return a rejected Promise instead.
I suspect its redirection issue but couldn't figure out.
It works if i don't use Confirmation Dialog and call handleSave in onSave prop of SaveButton
React admin version - 3.4.2
Is this the correct way to do it? please help
Confirm.tsx
/**
* Confirmation dialog
*
* #example
* <Confirm
* isOpen={true}
* title="Delete Item"
* content="Are you sure you want to delete this item?"
* confirm="Yes"
* confirmColor="primary"
* ConfirmIcon=ActionCheck
* CancelIcon=AlertError
* cancel="Cancel"
* onConfirm={() => { // do something }}
* onClose={() => { // do something }}
* />
*/
const Confirm: FC<ConfirmProps> = props => {
const {
isOpen = false,
loading,
title,
content,
confirm,
cancel,
confirmColor,
onClose,
onConfirm,
translateOptions = {}
} = props;
const classes = useStyles(props);
// const translate = useTranslate();
const handleConfirm = useCallback(
e => {
e.stopPropagation();
onConfirm(e);
},
[onConfirm]
);
const handleClick = useCallback(e => {
e.stopPropagation();
}, []);
return (
<Dialog
open={isOpen}
onClose={onClose}
onClick={handleClick}
aria-labelledby="alert-dialog-title"
>
<DialogTitle id="alert-dialog-title">{title}</DialogTitle>
<DialogContent>
<DialogContentText className={classes.contentText}>
{content}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
disabled={loading}
onClick={onClose}
className={classnames("ra-confirm", {
[classes.confirmWarning]: confirmColor === "primary"
})}
>
<CancelIcon className={classes.iconPaddingStyle} />
{cancel}
</Button>
<Button
disabled={loading}
onClick={handleConfirm}
className={classnames("ra-confirm", {
[classes.confirmWarning]: confirmColor === "warning",
[classes.confirmPrimary]: confirmColor === "primary"
})}
autoFocus
>
<ActionCheck className={classes.iconPaddingStyle} />
{confirm}
</Button>
</DialogActions>
</Dialog>
);
};
export default Confirm;
SaveWithConfirmation.tsx*
import React, { useCallback, useState, Fragment } from "react";
import { useFormState } from "react-final-form";
import {
SaveButton,
Toolbar,
useCreate,
useRedirect,
useNotify,
Button
} from "react-admin";
import Confirm from "./Confirm";
const SaveWithConfirmButton = ({ resource, ...props }) => {
const [create, { loading }] = useCreate(resource);
const redirectTo = useRedirect();
const notify = useNotify();
const { basePath } = props;
// get values from the form
const formState = useFormState();
const [open, setOpen] = useState(false);
const handleDialogClick = e => {
setOpen(true);
};
const handleDialogClose = e => {
setOpen(false);
e.stopPropagation();
};
const handleSave = useCallback(
(values, redirect) => {
// call dataProvider.create() manually
// setOpen(true);
create(
{
payload: { data: { ...values } }
},
{
onSuccess: ({ data: newRecord }) => {
notify("ra.notification.created", "info", {
smart_count: 1
});
redirectTo(redirect, basePath, newRecord.id, newRecord);
},
onFailure: error => {
notify(
typeof error === "string"
? error
: error.message || "ra.notification.http_error",
"warning"
);
setOpen(false);
}
}
);
},
[create, notify, redirectTo, basePath, formState]
);
return (
<>
<SaveButton {...props} onSave={handleDialogClick} />
<Confirm
isOpen={open}
loading={loading}
title="Please confirm"
content="Are you sure you want to apply the changes ?"
onConfirm={handleSave}
onClose={handleDialogClose}
/>
</>
);
};
export default SaveWithConfirmButton;
Usage
const DateCreateToolbar = props => (
<Toolbar {...props}>
<SaveWithConfirmButton resource="dates" />
</Toolbar>
);
const DateCreate = props => {
return (
<Create {...props}>
<SimpleForm toolbar={<DateCreateToolbar />} redirect="list">
<DateTimeInput
validate={required()}
label="Start Date"
source="startDate"
/>
<DateTimeInput
validate={required()}
label="End Date"
source="endDate"
/>
</SimpleForm>
</Create>
);
};
export default DateCreate;

Answer 1

<Toolbar {...props}>
<SaveButton
label="Save"
redirect="edit"
submitOnEnter={false}
handleSubmitWithRedirect={
() => {
if(!window.confirm('Are you sure?'))
return false;
return props.handleSubmitWithRedirect();
}
}
/>
</Toolbar>

Answer 2

The payload data in the create, should be called with the form values:
...
create(
{
payload: { data: { ...formState.values } }
},
...

Answer 3

Alternative variant: there is a library called "react-confirm-alert".
Usage example:
import { confirmAlert } from 'react-confirm-alert';
/* In function you may ask confirmation like below */
confirmAlert({
title: 'Question',
message: 'Delete? id:' + id,
buttons: [
{
label: 'Yes',
onClick: () => {
deleteInfo(id)
.then(result => {
if (result.code == 0) {
notify("Deleted");
refreshInfo();
} else {
notify("Error occurred:" + result.msg);
}
}).catch((error) => {
notify('Error occurred:' + error, 'warning');
});
}
},
{
label: 'No',
onClick: () => { }
}
]
});