moar fixes + unit test review of routes

src/hooks/useWatchedItems.test.tsx

@@ -5,12 +5,14 @@ import { useWatchedItems } from './useWatchedItems';
 import { useApi } from './useApi';
 import { useAuth } from '../hooks/useAuth';
 import { useUserData } from '../hooks/useUserData';
+import * as apiClient from '../services/apiClient';
 import type { MasterGroceryItem, User } from '../types';
 
 // Mock the hooks that useWatchedItems depends on
 vi.mock('./useApi');
 vi.mock('../hooks/useAuth');
 vi.mock('../hooks/useUserData');
+vi.mock('../services/apiClient');
 
 // The apiClient is globally mocked in our test setup, so we just need to cast it
 const mockedUseApi = vi.mocked(useApi);
@@ -77,6 +79,22 @@ describe('useWatchedItems Hook', () => {
     expect(result.current.error).toBeNull();
   });
 
+  it('should configure useApi with the correct apiClient methods', async () => {
+    renderHook(() => useWatchedItems());
+
+    // useApi is called twice: once for add, once for remove
+    const addApiCall = mockedUseApi.mock.calls[0][0];
+    const removeApiCall = mockedUseApi.mock.calls[1][0];
+
+    // Test the add callback
+    await addApiCall('New Item', 'Category');
+    expect(apiClient.addWatchedItem).toHaveBeenCalledWith('New Item', 'Category');
+
+    // Test the remove callback
+    await removeApiCall(123);
+    expect(apiClient.removeWatchedItem).toHaveBeenCalledWith(123);
+  });
+
   describe('addWatchedItem', () => {
     it('should call the API and update state on successful addition', async () => {
       const newItem: MasterGroceryItem = { master_grocery_item_id: 3, name: 'Cheese', created_at: '' };