flyer-crawler.projectium.com/src/pages/ShoppingListsPage.tsx

// src/pages/ShoppingListsPage.tsx
import React, { useCallback } from 'react';
import { useAuth } from '../hooks/useAuth';
import { ShoppingListComponent } from '../features/shopping/ShoppingList';
import { useShoppingLists } from '../hooks/useShoppingLists';

export const ShoppingListsPage: React.FC = () => {
  const { userProfile } = useAuth();
  const user = userProfile?.user ?? null;
  const {
    shoppingLists,
    activeListId,
    setActiveListId,
    createList,
    deleteList,
    addItemToList,
    updateItemInList,
    removeItemFromList,
  } = useShoppingLists();

  const handleAddItemToShoppingList = useCallback(
    async (item: { masterItemId?: number; customItemName?: string }) => {
      if (activeListId) {
        await addItemToList(activeListId, item);
      }
    },
    [activeListId, addItemToList],
  );

  return (
    <div className="max-w-4xl mx-auto p-4 space-y-6">
      <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">Shopping Lists</h1>

      <ShoppingListComponent
        user={user}
        lists={shoppingLists}
        activeListId={activeListId}
        onSelectList={setActiveListId}
        onCreateList={createList}
        onDeleteList={deleteList}
        onAddItem={handleAddItemToShoppingList}
        onUpdateItem={updateItemInList}
        onRemoveItem={removeItemFromList}
      />
    </div>
  );
};