From c3ee7d0d4207482102efb9ac0c3195217454e147 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Sat, 21 Mar 2026 20:10:57 -0400
Subject: [PATCH] Refactor selected item handling: update state management to
 derive selected item from name and ensure real-time inventory count

---
 web/client/src/components/InventoryGrid.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/client/src/components/InventoryGrid.jsx b/web/client/src/components/InventoryGrid.jsx
index 4151ee0..398b798 100644
--- a/web/client/src/components/InventoryGrid.jsx
+++ b/web/client/src/components/InventoryGrid.jsx
@@ -11,12 +11,19 @@ function InventoryGrid() {
   const getFilteredItems = useInventoryStore((state) => state.getFilteredItems);
   const orderItem = useInventoryStore((state) => state.orderItem);
 
-  const [selectedItem, setSelectedItem] = useState(null);
+  const [selectedItemName, setSelectedItemName] = useState(null);
   const [orderAmount, setOrderAmount] = useState(1);
   const [sortBy, setSortBy] = useState('count');
   const [activeCategory, setActiveCategory] = useState('all');
   const [selectedDropper, setSelectedDropper] = useState('');
 
+  // Derive selectedItem from live inventory so count always reflects real-time data
+  const selectedItem = useMemo(() => {
+    if (!selectedItemName) return null;
+    const items = inventory.itemList || [];
+    return items.find((i) => i.name === selectedItemName) || null;
+  }, [selectedItemName, inventory.itemList]);
+
   const droppers = inventory.droppers || [];
 
   const items = getFilteredItems();
@@ -40,7 +47,7 @@ function InventoryGrid() {
   }, [selectedItem, orderAmount, orderItem, selectedDropper]);
 
   const handleItemClick = (item) => {
-    setSelectedItem(item);
+    setSelectedItemName(item.name);
     setOrderAmount(1);
   };
 
@@ -146,7 +153,7 @@ function InventoryGrid() {
                 <h3>{formatItemName(selectedItem.name || '')}</h3>
                 <span className="detail-id">{selectedItem.name || ''}</span>
               </div>
-              <button className="detail-close" onClick={() => setSelectedItem(null)}>✕</button>
+              <button className="detail-close" onClick={() => setSelectedItemName(null)}>✕</button>
             </div>
 
             <div className="detail-stats">