Merge pull request #20 from beatz174-bit/codex/fix-search-products-bar-in-pick-list

Fix pick list product search filtering

src/screens/AddItemScreen.test.tsx

@@ -0,0 +1,63 @@
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { AddItemScreen } from './AddItemScreen';
+
+const addMock = vi.fn();
+
+vi.mock('../hooks/dataHooks', () => ({
+  usePickItems: () => [],
+  useProducts: () => [
+    {
+      id: 'prod-1',
+      name: 'Cola',
+      category: 'Drinks',
+      unit_type: 'unit',
+      bulk_name: 'box',
+      barcode: '111',
+      archived: false,
+      created_at: 0,
+      updated_at: 0,
+    },
+    {
+      id: 'prod-2',
+      name: 'Chips',
+      category: 'Snacks',
+      unit_type: 'unit',
+      bulk_name: 'box',
+      barcode: '222',
+      archived: false,
+      created_at: 0,
+      updated_at: 0,
+    },
+  ],
+}));
+
+vi.mock('../context/DBProvider', () => ({
+  useDatabase: () => ({
+    pickItems: {
+      add: addMock,
+    },
+  }),
+}));
+
+describe('AddItemScreen product search', () => {
+  it('filters the product list based on the search query', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MemoryRouter initialEntries={['/pick-lists/1/add-item']}>
+        <Routes>
+          <Route path="/pick-lists/:id/add-item" element={<AddItemScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    await user.type(screen.getByPlaceholderText(/search products/i), 'cola');
+    await user.click(screen.getByLabelText(/product/i));
+
+    expect(screen.getByRole('option', { name: /cola \(drinks\)/i })).toBeVisible();
+    expect(screen.queryByRole('option', { name: /chips \(snacks\)/i })).not.toBeInTheDocument();
+  });
+});

src/screens/AddItemScreen.tsx

@@ -36,13 +36,15 @@ export const AddItemScreen = () => {
     [existingProductIds, products],
   );
 
-  const filteredProducts = useMemo(
-    () =>
-      availableProducts.filter((product) =>
-        `${product.name} ${product.category}`.toLowerCase().includes(query.toLowerCase()),
-      ),
-    [availableProducts, query],
-  );
+  const filteredProducts = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) return availableProducts;
+
+    return availableProducts.filter((product) => {
+      const searchableText = `${product.name} ${product.category} ${product.barcode ?? ''}`.toLowerCase();
+      return searchableText.includes(normalizedQuery);
+    });
+  }, [availableProducts, query]);
 
   useEffect(() => {
     if (!productId) return;