Fix Confirm dialog loading bug

Closes #3241, #3645
marmelab · Sep 3, 2019 · 76de140 · 76de140
1 parent f9d80e1
commit 76de140
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -347,6 +347,7 @@ const ResetViewsButton = ({ selectedIds }) => {
             <Button label="Reset Views" onClick={handleClick} />
             <Confirm
                 isOpen={open}
+                loading={loading}
                 title="Update View Count"
                 content="Are you sure you want to reset the views for these items?"
                 onConfirm={handleConfirm}

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
@@ -56,7 +56,7 @@ const BulkDeleteWithConfirmButton = ({
     const unselectAll = useUnselectAll();
     const refresh = useRefresh();
     const translate = useTranslate();
-    const [deleteMany] = useDeleteMany(resource, selectedIds, {
+    const [deleteMany, { loading }] = useDeleteMany(resource, selectedIds, {
         onSuccess: () => {
             refresh();
             notify('ra.notification.deleted', 'info', {
@@ -102,6 +102,7 @@ const BulkDeleteWithConfirmButton = ({
             </Button>
             <Confirm
                 isOpen={isOpen}
+                loading={loading}
                 title="ra.message.bulk_delete_title"
                 content="ra.message.bulk_delete_content"
                 translateOptions={{
@@ -124,7 +125,6 @@ const BulkDeleteWithConfirmButton = ({
 BulkDeleteWithConfirmButton.propTypes = {
     basePath: PropTypes.string,
     classes: PropTypes.object,
-    crudDeleteMany: PropTypes.func.isRequired,
     label: PropTypes.string,
     resource: PropTypes.string.isRequired,
     selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js
@@ -64,7 +64,7 @@ const DeleteWithConfirmButton = ({
     const redirect = useRedirect();
     const refresh = useRefresh();
     const classes = useStyles({ classes: classesOverride });
-    const [deleteOne] = useDelete(resource, record.id, record, {
+    const [deleteOne, { loading }] = useDelete(resource, record.id, record, {
         onSuccess: () => {
             notify('ra.notification.deleted', 'info', { smart_count: 1 });
             redirect(redirectTo, basePath);
@@ -114,6 +114,7 @@ const DeleteWithConfirmButton = ({
             </Button>
             <Confirm
                 isOpen={open}
+                loading={loading}
                 title="ra.message.delete_title"
                 content="ra.message.delete_content"
                 translateOptions={{

diff --git a/packages/ra-ui-materialui/src/layout/Confirm.js b/packages/ra-ui-materialui/src/layout/Confirm.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -52,6 +52,7 @@ const useStyles = makeStyles(theme => ({
  */
 const Confirm = ({
     isOpen,
+    loading,
     title,
     content,
     confirm,
@@ -63,13 +64,11 @@ const Confirm = ({
     translateOptions = {},
 }) => {
     const classes = useStyles({ classes: classesOverride });
-    const [loading, setLoading] = useState(false);
     const translate = useTranslate();
 
     const handleConfirm = useCallback(
         e => {
             e.stopPropagation();
-            setLoading(true);
             onConfirm();
         },
         [onConfirm]
@@ -126,6 +125,7 @@ Confirm.propTypes = {
     confirmColor: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
     isOpen: PropTypes.bool,
+    loading: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
     onConfirm: PropTypes.func.isRequired,
     title: PropTypes.string.isRequired,