simple get inventory

src/components/HotelContext.jsx

@@ -20,6 +20,9 @@ export function HotelProvider({ accessToken, children, resClientId}) {
 
 
   // --- API FUNCTIONS ---
+ 
+//   ROOMS
+
   async function fetchRooms() {
     const res = await fetch( `${API_BASE}/rooms/rooms`, {
       headers: { Authorization: `Bearer ${accessTokenSingle}` },
@@ -42,26 +45,10 @@ export function HotelProvider({ accessToken, children, resClientId}) {
     setRooms(updated);
   }
   
-  async function fetchHotelUsers() {
-    const res = await fetch(`${API_BASE}/chat/hotel_users`, {
-      method: "POST",
-      headers: { 
-        Authorization: `Bearer ${accessTokenSingle}`,
-        "Content-Type": "application/json", 
-      },
-    });
 
-    const users = await res.json();
   
-    const map = {};
-    for (const u of users) {
-        map[u.id] = u.username;
-    }
-    setUsersById(map);
+//   CHAT
 
-//   setUsers(users)
-    return users;
-  }
 
   async function createConversation(name) {
     
@@ -186,6 +173,48 @@ export function HotelProvider({ accessToken, children, resClientId}) {
 
   }
 
+
+
+//   INVENTORY
+
+
+  async function fetchHotelInventory() {
+
+    const res = await fetch ( `${API_BASE}/inventory/get_item/`,  {
+      headers: { Authorization: `Bearer ${accessTokenSingle}`},
+    });
+
+    console.log ("fetched inventory")
+
+    return res.json()
+
+  }
+
+
+
+  async function fetchHotelUsers() {
+    const res = await fetch(`${API_BASE}/chat/hotel_users`, {
+      method: "POST",
+      headers: { 
+        Authorization: `Bearer ${accessTokenSingle}`,
+        "Content-Type": "application/json", 
+      },
+    });
+    
+    const users = await res.json();
+
+    const map = {};
+    for (const u of users) {
+        map[u.id] = u.username;
+    }
+    setUsersById(map);
+
+//   setUsers(users)
+    return users;
+  }
+
+  
+
   // --- INITIAL DATA LOADING ---
   useEffect(() => {
     if (!accessToken) return;
@@ -222,7 +251,8 @@ export function HotelProvider({ accessToken, children, resClientId}) {
         sendMessage,
         fetchHotelUsers,
         addUserToConv,
-        createConversation
+        createConversation,
+        fetchHotelInventory
       }}
     >
       {children}

src/components/MainApp.jsx

@@ -1,6 +1,7 @@
 import { HotelProvider, useHotel } from "./HotelContext";
 import RoomWidget from "./widget/roomWidget"
 import ChatWidget from "./widget/chatWidget"
+import InventoryWidget from "./widget/inventoryWidget";
 
 import "./MainApp.css"
 
@@ -32,6 +33,7 @@ function MainApp() {
 
         <RoomWidget roomlist={rooms}/> 
         <ChatWidget convlist={conversations}/> 
+        <InventoryWidget/>
           
       </section>
     </div>

src/components/Mainapp.css

@@ -1,6 +1,7 @@
 .main {
 
     display: flex;
+    flex-direction: column;
     justify-content: space-around;
     background-color: rgb(160, 149, 199);
 }

src/components/widget/chatWidget.jsx

@@ -6,6 +6,9 @@ import { useRef } from "react";
 
 import "./chatWidget.css"
 
+
+//FIXME: split element to avoid re render (convcard are being re rendered every time something is typed in the creation )
+//TODO: split into multiple component
 export default function ChatWidget({convlist}) {
     const { 
             createConversation,
@@ -77,11 +80,7 @@ return (
                 disabled={!activeConvId}
             />
 
-            {showCreateConv && (
-            <CreateConvMenu
-                onSend={createConversation}
-            />
-            )}
+            
 
         </div>
     );

src/components/widget/inventoryWidget.css

@@ -0,0 +1,2 @@
+
+

src/components/widget/inventoryWidget.jsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import {HotelProvider, useHotel} from "../HotelContext";
+
+export default function InventoryWidget({}) {
+    const {
+        fetchHotelInventory
+    } = useHotel();
+
+    const [items, setItems] = useState([]);
+
+    
+    useEffect(() => {
+
+        async function loadInventory() {
+            const data = await fetchHotelInventory()
+            setItems(data);   
+        }
+
+        loadInventory()
+        console.log ("loaded inventory")
+
+    }, [])
+
+    return (
+
+        <ul>
+            {items.map(i => <li key={i.id}> {i.name} + {i.amount}</li>)}
+        </ul>
+
+    )
+
+}