create item barebones

src/components/HotelContext.jsx

@@ -200,6 +200,16 @@ export function HotelProvider({ accessToken, children, resClientId}) {
 
   }
 
+  async function createItem(item_name, item_amount){
+    
+    const res = await fetch ( `${API_BASE}/inventory/add_item/${item_name}/${item_amount}`,
+      {
+        method:"POST",
+        headers: { Authorization: `Bearer ${accessTokenSingle}` }
+      });
+  
+  }
+
   async function fetchHotelUsers() {
     const res = await fetch(`${API_BASE}/chat/hotel_users`, {
       method: "POST",
@@ -261,7 +271,8 @@ export function HotelProvider({ accessToken, children, resClientId}) {
         addUserToConv,
         createConversation,
         fetchHotelInventory,
-        updateItemAmount
+        updateItemAmount,
+        createItem
       }}
     >
       {children}

src/components/widget/inventoryWidget.jsx

@@ -22,8 +22,8 @@ export default function InventoryWidget({}) {
     }, [])
 
     return (
-
-        <div className="grid">
+<div>
+    <div className="grid">
             {items.map(item => (
                 <ItemCard
                     key={item.id}
@@ -33,8 +33,13 @@ export default function InventoryWidget({}) {
                 />
             
             ))}
-        </div>
+    </div>
+    <div>
+        <CreateItemMenu/>
+    </div>    
 
+</div>
+    
     )
 
 }
@@ -73,4 +78,37 @@ function ItemCard({id, name, amount}) {
         </div>
     )
 
-}
+}
+
+
+function CreateItemMenu() {
+  const [itemName, setItemName] = useState("");
+  const [itemAmount, setItemAmount] = useState(0);
+  const {createItem} = useHotel();
+
+
+  const handleSubmit = () => {
+    if (!itemName.trim() | !itemAmount.trim() ) return;
+
+    createItem(itemName, itemAmount);
+
+  }
+
+  return(
+    <div>
+      <input
+      type="text"
+      onChange={element => setItemName(element.target.value)}
+      placeholder="Nom de l'objet"
+      />
+      <input
+      type="text"
+      onChange={element => setItemAmount(element.target.value)}
+      placeholder="Montant d'objet(s)"
+      />
+      <button onClick={handleSubmit}>Creer</button>
+    </div>
+  )
+
+}
+

src/components/widget/roomWidget.jsx

@@ -14,55 +14,87 @@ export default function RoomWidget({ roomlist }) {
           status={room.status}
         />
       ))}
-    </div>
+    </div> 
   );
 }
 
 function RoomCard({ number, status ,id}) {
   
   const { updateRoomStatus } = useHotel();
-  const [editing, setEditing] = useState(false);
+  const [editingAmount, setEditingAmount] = useState(false);
   const [value, SetValue] = useState(status);
 
   function submit() {
     updateRoomStatus(id,value);
-    setEditing(false);
+    setEditingAmount(false);
   }
 
   return (
       <div className="card">
-      <h3>Room {number}</h3>
-      <h4>Id {id}</h4>
+        <h3>Room {number}</h3>
+        <h4>Id {id}</h4>
 
-      {!editing ?(
-        <p onClick={() => setEditing(true)} style={{ cursor: "pointer" }}>
-          Status: {status}
-        </p>
-      ): (
-        <div>
-          <input
-          type="text"
-          value={value}
-          autoFocus
-          onChange={e => SetValue(e.target.value)}
-          onKeyDown={e => e.key === "Enter" && submit()}
-          />
+        {!editingAmount ?(
+          <p onClick={() => setEditingAmount(true)} style={{ cursor: "pointer" }}>
+            Status: {status}
+          </p>
+        ): (
+          <div>
+            <input
+            type="text"
+            value={value}
+            autoFocus
+            onChange={e => SetValue(e.target.value)}
+            onKeyDown={e => e.key === "Enter" && submit()}
+            />
+          </div>
+        )}
+
+
+        <div className="actions">
+          <button onClick={() => updateRoomStatus(id, "clean")}>
+            Mark Clean
+          </button>
+
+          <button onClick={() => updateRoomStatus(id, "dirty")}>
+            Mark Dirty
+          </button>
         </div>
-      )}
-
-
-      <div className="actions">
-        <button onClick={() => updateRoomStatus(id, "clean")}>
-          Mark Clean
-        </button>
-
-        <button onClick={() => updateRoomStatus(id, "dirty")}>
-          Mark Dirty
-        </button>
-      </div>
 
       </div>
   );
 }
 
+function CreateItemMenu() {
+  const [itemName, setItemName] = useState("");
+  const [itemAmount, setItemAmount] = useState(0);
+  const {createItem} = useHotel();
+
+
+  const handleSubmit = () => {
+    if (!itemName.trim() | !itemAmount.trim() ) return;
+
+    createItem(itemName, itemAmount);
+
+  }
+
+  return(
+    <div>
+      <input
+      type="text"
+      onChange={element => setItemName(element.target.value)}
+      placeholder="Nom de l'objet"
+      />
+      <input
+      type="text"
+      onChange={element => setItemAmount(element.target.value)}
+      placeholder="Montant d'objet(s)"
+      />
+      <button onClick={handleSubmit}>Creer</button>
+    </div>
+  )
+
+}
+
+
 //export default roomWidget