Introduce useBulkUpdateController

Author: djhi

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

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

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

@@ -0,0 +1,125 @@
+import { useCallback, useMemo } from 'react';
+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';
+import {
+    useUpdateMany,
+    UseUpdateManyOptions,
+} from '../../dataProvider/useUpdateMany';
+
+export const useBulkUpdateController = <
+    RecordType extends RaRecord = any,
+    ErrorType = Error,
+>(
+    props: UseBulkUpdateControllerParams<RecordType, ErrorType>
+): UseBulkUpdateControllerReturn => {
+    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 [updateMany, { isPending }] = useUpdateMany<RecordType, ErrorType>(
+        resource,
+        undefined,
+        {
+            onSuccess: () => {
+                notify(
+                    successMessage ??
+                        `resources.${resource}.notifications.updated`,
+                    {
+                        type: 'info',
+                        messageArgs: {
+                            smart_count: selectedIds.length,
+                            _: translate('ra.notification.updated', {
+                                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 && error.message
+                                      ? error.message
+                                      : undefined,
+                        },
+                    }
+                );
+                refresh();
+            },
+        }
+    );
+
+    const handleUpdate = useCallback(
+        (data: Partial<RecordType>) => {
+            updateMany(
+                resource,
+                {
+                    data,
+                    ids: selectedIds,
+                    meta: mutationMeta,
+                },
+                {
+                    mutationMode,
+                    ...otherMutationOptions,
+                }
+            );
+        },
+        [
+            updateMany,
+            mutationMeta,
+            mutationMode,
+            otherMutationOptions,
+            resource,
+            selectedIds,
+        ]
+    );
+
+    return useMemo(
+        () => ({
+            isPending,
+            isLoading: isPending,
+            handleUpdate,
+        }),
+        [isPending, handleUpdate]
+    );
+};
+
+export interface UseBulkUpdateControllerParams<
+    RecordType extends RaRecord = any,
+    MutationOptionsError = unknown,
+> {
+    mutationMode?: MutationMode;
+    mutationOptions?: UseUpdateManyOptions<RecordType, MutationOptionsError>;
+    resource?: string;
+    successMessage?: string;
+}
+
+export interface UseBulkUpdateControllerReturn<
+    RecordType extends RaRecord = any,
+> {
+    isLoading: boolean;
+    isPending: boolean;
+    handleUpdate: (data: Partial<RecordType>) => void;
+}

packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx

@@ -9,18 +9,14 @@ import {
 import {
     useListContext,
     useTranslate,
-    useUpdateMany,
-    useNotify,
-    useUnselectAll,
     useResourceContext,
-    type MutationMode,
     type RaRecord,
-    type UpdateManyParams,
+    useBulkUpdateController,
+    UseBulkUpdateControllerParams,
 } from 'ra-core';
 
 import { Confirm } from '../layout';
 import { Button, type ButtonProps } from './Button';
-import type { UseMutationOptions } from '@tanstack/react-query';
 import { humanize, inflect } from 'inflection';
 
 export const BulkUpdateWithConfirmButton = (
@@ -30,10 +26,8 @@ export const BulkUpdateWithConfirmButton = (
         props: inProps,
         name: PREFIX,
     });
-    const notify = useNotify();
     const translate = useTranslate();
     const resource = useResourceContext(props);
-    const unselectAll = useUnselectAll(resource);
     const [isOpen, setOpen] = useState(false);
     const { selectedIds } = useListContext();
 
@@ -45,54 +39,12 @@ export const BulkUpdateWithConfirmButton = (
         label = 'ra.action.update',
         mutationMode = 'pessimistic',
         onClick,
-        onSuccess = () => {
-            notify(`resources.${resource}.notifications.updated`, {
-                type: 'info',
-                messageArgs: {
-                    smart_count: selectedIds.length,
-                    _: translate('ra.notification.updated', {
-                        smart_count: selectedIds.length,
-                    }),
-                },
-                undoable: mutationMode === 'undoable',
-            });
-            unselectAll();
-            setOpen(false);
-        },
-        onError = (error: Error | string) => {
-            notify(
-                typeof error === 'string'
-                    ? error
-                    : error.message || 'ra.notification.http_error',
-                {
-                    type: 'error',
-                    messageArgs: {
-                        _:
-                            typeof error === 'string'
-                                ? error
-                                : error && error.message
-                                  ? error.message
-                                  : undefined,
-                    },
-                }
-            );
-            setOpen(false);
-        },
-        mutationOptions = {},
         ...rest
     } = props;
-    const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions;
-
-    const [updateMany, { isPending }] = useUpdateMany(
-        resource,
-        { ids: selectedIds, data, meta: mutationMeta },
-        {
-            onSuccess,
-            onError,
-            mutationMode,
-            ...otherMutationOptions,
-        }
-    );
+    const { handleUpdate, isPending } = useBulkUpdateController({
+        ...rest,
+        mutationMode,
+    });
 
     const handleClick = e => {
         setOpen(true);
@@ -103,8 +55,9 @@ export const BulkUpdateWithConfirmButton = (
         setOpen(false);
     };
 
-    const handleUpdate = e => {
-        updateMany();
+    const handleConfirm = e => {
+        setOpen(false);
+        handleUpdate(data);
 
         if (typeof onClick === 'function') {
             onClick(e);
@@ -155,7 +108,7 @@ export const BulkUpdateWithConfirmButton = (
                         ),
                     }),
                 }}
-                onConfirm={handleUpdate}
+                onConfirm={handleConfirm}
                 onClose={handleDialogClose}
             />
         </Fragment>
@@ -164,30 +117,20 @@ export const BulkUpdateWithConfirmButton = (
 
 const sanitizeRestProps = ({
     label,
-    onSuccess,
-    onError,
+    resource,
+    successMessage,
     ...rest
-}: Omit<
-    BulkUpdateWithConfirmButtonProps,
-    'resource' | 'selectedIds' | 'icon' | 'data'
->) => rest;
+}: Omit<BulkUpdateWithConfirmButtonProps, 'icon' | 'data'>) => rest;
 
 export interface BulkUpdateWithConfirmButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown,
-> extends ButtonProps {
+> extends ButtonProps,
+        UseBulkUpdateControllerParams<RecordType, MutationOptionsError> {
     confirmContent?: React.ReactNode;
     confirmTitle?: React.ReactNode;
     icon?: React.ReactNode;
     data: any;
-    onSuccess?: () => void;
-    onError?: (error: any) => void;
-    mutationMode?: MutationMode;
-    mutationOptions?: UseMutationOptions<
-        RecordType,
-        MutationOptionsError,
-        UpdateManyParams<RecordType>
-    > & { meta?: any };
 }
 
 const PREFIX = 'RaBulkUpdateWithConfirmButton';