Merge pull request #10923 from marmelab/use-bulk-delete-controller

Introduce `useBulkDeleteController`

Author: slax57

packages/ra-core/src/controller/button/index.ts

@@ -3,3 +3,4 @@ import useDeleteWithConfirmController from './useDeleteWithConfirmController';
 
 export { useDeleteWithUndoController, useDeleteWithConfirmController };
 export * from './useDeleteController';
+export * from './useBulkDeleteController';

packages/ra-core/src/controller/button/useBulkDeleteController.ts

@@ -0,0 +1,117 @@
+import { useCallback, useMemo } from 'react';
+import {
+    useDeleteMany,
+    UseDeleteManyOptions,
+} from '../../dataProvider/useDeleteMany';
+import { useRefresh } from '../../dataProvider/useRefresh';
+import { useListContext } from '../list/useListContext';
+import { useNotify } from '../../notification/useNotify';
+import { RaRecord, MutationMode } from '../../types';
+import { useResourceContext } from '../../core/useResourceContext';
+import { useTranslate } from '../../i18n/useTranslate';
+
+export const useBulkDeleteController = <
+    RecordType extends RaRecord = any,
+    ErrorType = Error,
+>(
+    props: UseBulkDeleteControllerParams<RecordType, ErrorType>
+): UseBulkDeleteControllerReturn => {
+    const {
+        mutationMode = 'undoable',
+        mutationOptions = {},
+        successMessage,
+    } = props;
+    const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions;
+    const resource = useResourceContext(props);
+    const notify = useNotify();
+    const refresh = useRefresh();
+    const translate = useTranslate();
+    const { selectedIds, onUnselectItems } = useListContext();
+
+    const [deleteMany, { isPending }] = useDeleteMany<RecordType, ErrorType>(
+        resource,
+        undefined,
+        {
+            onSuccess: () => {
+                notify(
+                    successMessage ??
+                        `resources.${resource}.notifications.deleted`,
+                    {
+                        type: 'info',
+                        messageArgs: {
+                            smart_count: selectedIds.length,
+                            _: translate('ra.notification.deleted', {
+                                smart_count: selectedIds.length,
+                            }),
+                        },
+                        undoable: mutationMode === 'undoable',
+                    }
+                );
+                onUnselectItems();
+            },
+            onError: (error: any) => {
+                notify(
+                    typeof error === 'string'
+                        ? error
+                        : error?.message || 'ra.notification.http_error',
+                    {
+                        type: 'error',
+                        messageArgs: {
+                            _:
+                                typeof error === 'string'
+                                    ? error
+                                    : error?.message,
+                        },
+                    }
+                );
+                refresh();
+            },
+        }
+    );
+
+    const handleDelete = useCallback(() => {
+        deleteMany(
+            resource,
+            {
+                ids: selectedIds,
+                meta: mutationMeta,
+            },
+            {
+                mutationMode,
+                ...otherMutationOptions,
+            }
+        );
+    }, [
+        deleteMany,
+        mutationMeta,
+        mutationMode,
+        otherMutationOptions,
+        resource,
+        selectedIds,
+    ]);
+
+    return useMemo(
+        () => ({
+            isPending,
+            isLoading: isPending,
+            handleDelete,
+        }),
+        [isPending, handleDelete]
+    );
+};
+
+export interface UseBulkDeleteControllerParams<
+    RecordType extends RaRecord = any,
+    MutationOptionsError = unknown,
+> {
+    mutationMode?: MutationMode;
+    mutationOptions?: UseDeleteManyOptions<RecordType, MutationOptionsError>;
+    resource?: string;
+    successMessage?: string;
+}
+
+export interface UseBulkDeleteControllerReturn {
+    isLoading: boolean;
+    isPending: boolean;
+    handleDelete: () => void;
+}

packages/ra-core/src/controller/button/useDeleteController.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useMemo } from 'react';
-import { UseMutationOptions } from '@tanstack/react-query';
 
-import { useDelete } from '../../dataProvider';
-import { useUnselect } from '../';
+import { useDelete, UseDeleteOptions } from '../../dataProvider';
+import { useRecordContext, useUnselect } from '../';
 import { useRedirect, RedirectionSideEffect } from '../../routing';
 import { useNotify } from '../../notification';
-import { RaRecord, MutationMode, DeleteParams } from '../../types';
+import { RaRecord, MutationMode } from '../../types';
 import { useResourceContext } from '../../core';
 import { useTranslate } from '../../i18n';
 
@@ -14,8 +13,6 @@ import { useTranslate } from '../../i18n';
  *
  * @example
  * const DeleteButton = ({
- *     resource,
- *     record,
  *     redirect,
  *     ...rest
  * }) => {
@@ -24,8 +21,6 @@ import { useTranslate } from '../../i18n';
  *         handleDelete,
  *     } = useDeleteController({
  *         mutationMode: 'pessimistic',
- *         resource,
- *         record,
  *         redirect,
  *     });
  *
@@ -67,13 +62,13 @@ export const useDeleteController = <
     props: UseDeleteControllerParams<RecordType, ErrorType>
 ): UseDeleteControllerReturn => {
     const {
-        record,
         redirect: redirectTo = 'list',
-        mutationMode,
+        mutationMode = 'undoable',
         mutationOptions = {},
         successMessage,
     } = props;
     const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions;
+    const record = useRecordContext(props);
     const resource = useResourceContext(props);
     const notify = useNotify();
     const unselect = useUnselect(resource);
@@ -102,21 +97,18 @@ export const useDeleteController = <
                 record && unselect([record.id]);
                 redirect(redirectTo, resource);
             },
-            onError: error => {
+            onError: (error: any) => {
                 notify(
                     typeof error === 'string'
                         ? error
-                        : (error as Error)?.message ||
-                              'ra.notification.http_error',
+                        : error?.message || 'ra.notification.http_error',
                     {
                         type: 'error',
                         messageArgs: {
                             _:
                                 typeof error === 'string'
                                     ? error
-                                    : (error as Error)?.message
-                                      ? (error as Error).message
-                                      : undefined,
+                                    : error?.message,
                         },
                     }
                 );
@@ -166,11 +158,7 @@ export interface UseDeleteControllerParams<
     MutationOptionsError = unknown,
 > {
     mutationMode?: MutationMode;
-    mutationOptions?: UseMutationOptions<
-        RecordType,
-        MutationOptionsError,
-        DeleteParams<RecordType>
-    >;
+    mutationOptions?: UseDeleteOptions<RecordType, MutationOptionsError>;
     record?: RecordType;
     redirect?: RedirectionSideEffect;
     resource?: string;

packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.stories.tsx

@@ -3,6 +3,7 @@ import {
     CoreAdminContext,
     testDataProvider,
     ListContextProvider,
+    MutationMode,
 } from 'ra-core';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
@@ -13,7 +14,11 @@ export default { title: 'ra-ui-materialui/button/BulkDeleteWithConfirmButton' };
 
 const theme = createTheme();
 
-export const Default = () => {
+export const Default = ({
+    mutationMode = 'pessimistic',
+}: {
+    mutationMode?: MutationMode;
+}) => {
     const dataProvider = testDataProvider({
         deleteMany: async () => ({ data: [{ id: 123 }] as any }),
     });
@@ -31,11 +36,24 @@ export const Default = () => {
                 >
                     <BulkDeleteWithConfirmButton
                         resource="books"
-                        mutationMode="pessimistic"
+                        mutationMode={mutationMode}
                     />
                     <Notification />
                 </ListContextProvider>
             </ThemeProvider>
         </CoreAdminContext>
     );
 };
+
+Default.args = {
+    mutationMode: 'pessimistic',
+};
+
+Default.argTypes = {
+    mutationMode: {
+        options: ['pessimistic', 'optimistic', 'undoable'],
+        control: {
+            type: 'select',
+        },
+    },
+};