Merge pull request #56 from beatz174-bit/codex/sort-product-list-alphabetically

Sort pick list product search options alphabetically

src/screens/ActivePickListScreen.test.tsx

@@ -34,6 +34,17 @@ vi.mock('../hooks/dataHooks', () => ({
       created_at: 0,
       updated_at: 0,
     },
+    {
+      id: 'prod-3',
+      name: 'Apple Juice',
+      category: 'Drinks',
+      unit_type: 'unit',
+      bulk_name: 'box',
+      barcode: '333',
+      archived: false,
+      created_at: 0,
+      updated_at: 0,
+    },
   ],
   usePickList: () => ({ id: 'list-1', area_id: 'area-1', created_at: 0 }),
   useAreas: () => [{ id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 }],
@@ -100,6 +111,30 @@ describe('ActivePickListScreen product search', () => {
     });
   });
 
+  it('sorts the product options alphabetically', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MemoryRouter initialEntries={['/pick-lists/1']}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const combobox = screen.getByRole('combobox');
+    await user.click(combobox);
+
+    const listbox = await screen.findByRole('listbox');
+    const options = within(listbox).getAllByRole('option');
+
+    expect(options.map((option) => option.textContent)).toEqual([
+      'Apple Juice (Drinks)',
+      'Chips (Snacks)',
+      'Cola (Drinks)',
+    ]);
+  });
+
   it('updates an existing pick item when the same packaging is selected', async () => {
     pickItemsMock.mockReturnValue([
       {

src/screens/ActivePickListScreen.tsx

@@ -48,15 +48,23 @@ export const ActivePickListScreen = () => {
     [areas, pickList?.area_id],
   );
 
+  const sortedProducts = useMemo(
+    () =>
+      [...products].sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }),
+      ),
+    [products],
+  );
+
   const filteredProducts = useMemo(() => {
     const normalizedQuery = query.trim().toLowerCase();
-    if (!normalizedQuery) return products;
+    if (!normalizedQuery) return sortedProducts;
 
-    return products.filter((product) => {
+    return sortedProducts.filter((product) => {
       const searchableText = `${product.name} ${product.category} ${product.barcode ?? ''}`.toLowerCase();
       return searchableText.includes(normalizedQuery);
     });
-  }, [products, query]);
+  }, [sortedProducts, query]);
 
   useEffect(() => {
     if (!selectedProduct) return;