update item amount

src/components/HotelContext.jsx

@@ -190,7 +190,15 @@ export function HotelProvider({ accessToken, children, resClientId}) {
 
   }
 
+  async function updateItemAmount(item_id, item_amount) {
 
+    const res = await fetch ( `${API_BASE}/inventory/update_item/${item_id}/${item_amount}`, 
+      { 
+        method: "PUT",
+        headers: { Authorization: `Bearer ${accessTokenSingle}` } 
+    });
+
+  }
 
   async function fetchHotelUsers() {
     const res = await fetch(`${API_BASE}/chat/hotel_users`, {
@@ -252,7 +260,8 @@ export function HotelProvider({ accessToken, children, resClientId}) {
         fetchHotelUsers,
         addUserToConv,
         createConversation,
-        fetchHotelInventory
+        fetchHotelInventory,
+        updateItemAmount
       }}
     >
       {children}

src/components/widget/inventoryWidget.jsx

@@ -23,10 +23,54 @@ export default function InventoryWidget({}) {
 
     return (
 
-        <ul>
-            {items.map(i => <li key={i.id}> {i.name} + {i.amount}</li>)}
-        </ul>
+        <div className="grid">
+            {items.map(item => (
+                <ItemCard
+                    key={item.id}
+                    id={item.id}
+                    name={item.name}
+                    amount={item.amount}
+                />
+            
+            ))}
+        </div>
 
     )
 
+}
+
+
+function ItemCard({id, name, amount}) {
+    const [itemAmount, setItemAmount] = useState(amount);
+    const [editing, setEditing] = useState(false);
+
+    const {updateItemAmount} = useHotel();
+
+    function submit(item_id, item_amount) {
+        updateItemAmount(item_id, item_amount);
+        console.log("submited from item card :" + item_id + item_amount );
+        setEditing(false);
+    }
+
+    return (
+        <div className="itemcard">
+            <div>{name}</div>
+
+            {!editing ?(
+                <p onClick={() => setEditing(true)} /*style={ cursor: "pointer" }*/>Amount :{amount}</p>
+            ):(
+                <div>
+                    <input
+                    type="text"
+                    value={itemAmount}
+                    autoFocus
+                    onChange={e => setItemAmount(e.target.value)}
+                    onKeyDown={e => e.key == "Enter" && submit(id, itemAmount)}    
+                    />
+                </div>
+            )}
+
+        </div>
+    )
+
 }