Merge pull request #129 from beatz174-bit/codex/fix-packaging-type-filter-functionality-8h0e1y

Fix packaging filter persistence

src/screens/ActivePickListScreen.test.tsx

@@ -772,6 +772,48 @@ describe('ActivePickListScreen product search', () => {
     expect(screen.queryByText('Chips')).not.toBeInTheDocument();
   });
 
+  it('retains a chosen packaging filter when statuses are mixed but packaging types are not', async () => {
+    pickItemsMock.mockReturnValue([
+      {
+        id: 'item-1',
+        pick_list_id: 'list-1',
+        product_id: 'prod-1',
+        quantity: 1,
+        is_carton: false,
+        status: 'pending',
+        created_at: 0,
+        updated_at: 0,
+      },
+      {
+        id: 'item-2',
+        pick_list_id: 'list-1',
+        product_id: 'prod-2',
+        quantity: 1,
+        is_carton: false,
+        status: 'picked',
+        created_at: 0,
+        updated_at: 0,
+      },
+    ]);
+
+    const user = userEvent.setup();
+
+    render(
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+        <Routes>
+          <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    const unitsRadio = screen.getByRole('radio', { name: /units/i });
+    await user.click(unitsRadio);
+
+    expect(unitsRadio).toBeChecked();
+    expect(screen.getByText('Cola')).toBeVisible();
+    expect(screen.getByText('Chips')).toBeVisible();
+  });
+
   it('disables packaging filters when all items share the same status', () => {
     pickItemsMock.mockReturnValue([
       {

src/screens/ActivePickListScreen.tsx

@@ -156,12 +156,12 @@ export const ActivePickListScreen = () => {
     );
   }, [pickList?.categories, sortedProducts]);
 
-  const hasCartonItems = useMemo(
-    () => itemsVisibleByStatus.some((item) => item.is_carton),
+  const visibleHasPicked = useMemo(
+    () => itemsVisibleByStatus.some((item) => item.status === 'picked'),
     [itemsVisibleByStatus],
   );
-  const hasUnitItems = useMemo(
-    () => itemsVisibleByStatus.some((item) => !item.is_carton),
+  const visibleHasUnpicked = useMemo(
+    () => itemsVisibleByStatus.some((item) => item.status !== 'picked'),
     [itemsVisibleByStatus],
   );
   const packagingTypeCount = Number(hasCartonItems) + Number(hasUnitItems);
@@ -227,16 +227,16 @@ export const ActivePickListScreen = () => {
       ? sortedItems
       : sortedItems.filter((item) => item.status !== 'picked');
 
-    if (itemFilter === 'cartons') {
+    if (appliedItemFilter === 'cartons') {
       return filteredItems.filter((item) => item.is_carton);
     }
 
-    if (itemFilter === 'units') {
+    if (appliedItemFilter === 'units') {
       return filteredItems.filter((item) => !item.is_carton);
     }
 
     return filteredItems;
-  }, [itemFilter, showPicked, sortedItems]);
+  }, [appliedItemFilter, showPicked, sortedItems]);
 
   const updateItemState = (itemId: string, updater: (item: PickItem) => PickItem) => {
     setItemState((current) => current.map((item) => (item.id === itemId ? updater(item) : item)));
@@ -445,7 +445,7 @@ export const ActivePickListScreen = () => {
             >
               <RadioGroup
                 row
-                value={itemFilter}
+                value={appliedItemFilter}
                 onChange={(event) =>
                   setItemFilter(event.target.value as 'all' | 'cartons' | 'units')
                 }