Purchased items returns

src/components/shopping/CurrentShoppingListPage.vue

@@ -21,7 +21,7 @@
         <button v-else-if="showPurchased" @click="showPurchased=false" >⏶ Hide Purchased ⏶</button>
         <button v-else @click="showPurchased=true">⏷ Show Purchased ⏷</button>
 
-        <div v-if="showPurchased">
+        <div v-if="showPurchased && purchasedItemGroups.length > 0">
             <h4>Purchased Meals</h4>
             <meal-selection-list @meal-selected="mealSelected" @meal-unselected="mealUnselected" :checked="includedMeals" :meals="purchasedMeals" />
 
@@ -138,7 +138,7 @@ button img {
 import alert from '@/alert.js'
 
 import data from '@/data.js'
-import { itemsToGroups, groupsToItems } from './shopping.js'
+import { itemsToGroups, groupsToItems, uniqueMeals } from './shopping.js'
 
 import MealSelectionList from './MealSelectionList.vue'
 import ShoppingListItem from './ShoppingListItem.vue'
@@ -188,7 +188,7 @@ export default {
             return itemsToGroups(this.shoppingList?.purchased_items ?? []);
         },
         purchasedMeals() {
-            return Object.values(this.shoppingList?.meals_lookup ?? {}).filter(m => m.purchase_date).sort((a, b) => a.suggested_date - b.suggested_date);
+            return uniqueMeals(this.shoppingList?.purchased_items ?? []);
         },
         availableMeals() {
             const meals = { ...this.shoppingList?.meals_lookup ?? {} };

src/components/shopping/PurchasedShoppingListPage.vue

@@ -34,7 +34,7 @@
 import { ago } from '@/dateformats.js'
 
 import data from '@/data.js'
-import { itemsToGroups } from './shopping.js'
+import { itemsToGroups, uniqueMeals } from './shopping.js'
 
 import MealSelectionList from './MealSelectionList.vue'
 import ShoppingListItem from './ShoppingListItem.vue'
@@ -48,16 +48,7 @@ export default {
     computed: {
         includedMeals() {
             if (!this.shoppingList) return [];
-
-            const seenMeals = new Set();
-            return this.shoppingList.items
-                .map(item => item.meal)
-                .filter(meal => {
-                    if (!meal) return false;
-                    if (seenMeals.has(meal.id)) return false;
-                    seenMeals.add(meal.id);
-                    return true;
-                });
+            return uniqueMeals(this.shoppingList.items);
         },
         listByProduct() {
             return this.shoppingList ? itemsToGroups(this.shoppingList.items) : [];

src/components/shopping/shopping.js

@@ -2,6 +2,16 @@ export function groupsToItems(groups) {
     return groups.map(group => group.shoppingListItems).flat();
 }
 
+export function uniqueMeals(shoppingListItems) {
+        const mealsWithDuplicates = shoppingListItems
+            .map(item => item.meal)
+            .filter(m => m);
+
+        const mealsLookup = mealsWithDuplicates.reduce(((acc, meal) => { acc[meal.id] ??= meal; return acc; }), {});
+
+        return Object.values(mealsLookup);
+}
+
 export function itemsToGroups(shoppingListItems) {
     const ingredients_by_product_id = {};
     const ingredients_by_name = {};