// src/hooks/mutations/useAddShoppingListItemMutation.ts import { useMutation, useQueryClient } from '@tanstack/react-query'; import * as apiClient from '../../services/apiClient'; import { notifySuccess, notifyError } from '../../services/notificationService'; import { queryKeyBases } from '../../config/queryKeys'; interface AddShoppingListItemParams { listId: number; item: { masterItemId?: number; customItemName?: string; }; } /** * Mutation hook for adding an item to a shopping list. * * This hook provides automatic cache invalidation. When the mutation succeeds, * it invalidates the shopping-lists query to trigger a refetch of the updated list. * * Items can be added by either masterItemId (for master grocery items) or * customItemName (for custom items not in the master list). * * @returns Mutation object with mutate function and state * * @example * ```tsx * const addShoppingListItem = useAddShoppingListItemMutation(); * * // Add master item * const handleAddMasterItem = () => { * addShoppingListItem.mutate({ * listId: 1, * item: { masterItemId: 42 } * }); * }; * * // Add custom item * const handleAddCustomItem = () => { * addShoppingListItem.mutate({ * listId: 1, * item: { customItemName: 'Special Brand Milk' } * }); * }; * ``` */ export const useAddShoppingListItemMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: async ({ listId, item }: AddShoppingListItemParams) => { const response = await apiClient.addShoppingListItem(listId, item); if (!response.ok) { const error = await response.json().catch(() => ({ message: `Request failed with status ${response.status}`, })); throw new Error(error.message || 'Failed to add item to shopping list'); } return response.json(); }, onSuccess: () => { // Invalidate and refetch shopping lists to get the updated list queryClient.invalidateQueries({ queryKey: queryKeyBases.shoppingLists }); notifySuccess('Item added to shopping list'); }, onError: (error: Error) => { notifyError(error.message || 'Failed to add item to shopping list'); }, }); };