Merge pull request #3652 from marmelab/fix-delete-button

[RFR] Ensure DeleteButton is usable when record is not defined at mount time
marmelab · Sep 5, 2019 · eefc2f2 · eefc2f2
2 parents 9907d60 + 7df72d8
commit eefc2f2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 17 deletions.
diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -64,7 +64,12 @@ const DeleteWithConfirmButton = ({
     const redirect = useRedirect();
     const refresh = useRefresh();
     const classes = useStyles({ classes: classesOverride });
-    const [deleteOne, { loading }] = useDelete(resource, record.id, record, {
+
+    // We don't pass the action payload (the record and its identifier) at
+    // declaration time to avoid errors for people using the button in a
+    // component which may not have the record loaded immediately (for exemple
+    // in the actions of an Edit component)
+    const [deleteOne, { loading }] = useDelete(resource, undefined, undefined, {
         onSuccess: () => {
             notify('ra.notification.deleted', 'info', { smart_count: 1 });
             redirect(redirectTo, basePath);
@@ -90,12 +95,15 @@ const DeleteWithConfirmButton = ({
         e.stopPropagation();
     };
 
-    const handleDelete = () => {
-        deleteOne();
-        if (typeof onClick === 'function') {
-            onClick();
-        }
-    };
+    const handleDelete = useCallback(
+        event => {
+            deleteOne(event, { id: record.id, previousData: record });
+            if (typeof onClick === 'function') {
+                onClick();
+            }
+        },
+        [deleteOne, onClick, record]
+    );
 
     return (
         <Fragment>

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -55,7 +55,12 @@ const DeleteWithUndoButton = ({
     const notify = useNotify();
     const redirect = useRedirect();
     const refresh = useRefresh();
-    const [deleteOne, { loading }] = useDelete(resource, record.id, record, {
+
+    // We don't pass the action payload (the record and its identifier) at
+    // declaration time to avoid errors for people using the button in a
+    // component which may not have the record loaded immediately (for exemple
+    // in the actions of an Edit component)
+    const [deleteOne, { loading }] = useDelete(resource, undefined, undefined, {
         onSuccess: () => {
             notify('ra.notification.deleted', 'info', { smart_count: 1 }, true);
             redirect(redirectTo, basePath);
@@ -70,13 +75,16 @@ const DeleteWithUndoButton = ({
             ),
         undoable: true,
     });
-    const handleDelete = event => {
-        event.stopPropagation();
-        deleteOne();
-        if (typeof onClick === 'function') {
-            onClick();
-        }
-    };
+    const handleDelete = useCallback(
+        event => {
+            event.stopPropagation();
+            deleteOne(event, { id: record.id, previousData: record });
+            if (typeof onClick === 'function') {
+                onClick();
+            }
+        },
+        [deleteOne, onClick, record]
+    );
 
     return (
         <Button