WS message received fix

src/components/HotelContext.jsx

@@ -15,9 +15,10 @@ export function useHotel() {
 export function HotelProvider({ accessToken, children, resClientId}) {
     const [rooms, setRooms] = useState([]);
     const [conversations, setConversations] = useState([]);
+    const [messagesByConvId, setMessagesByConvId] = useState({});
 
     const [users, setUsers] = useState([]);
-    const [usersById, setUsersById] = useState([]);
+    const [usersById, setUsersById] = useState({});
     const [clientId, setClientId] = useState(resClientId|| null);
 
     const tokens = JSON.parse(accessToken);
@@ -72,6 +73,16 @@ export function HotelProvider({ accessToken, children, resClientId}) {
   
   }
 
+  function appendMessage(msg) {
+  setMessagesByConvId(prev => ({
+    ...prev,
+    [msg.conv_id]: [
+      ...(prev[msg.conv_id] ?? []),
+      msg,
+    ],
+  }));
+}
+
   async function fetchConversations() {
     const res = await fetch(`${API_BASE}/chat/get_conv`, {
       method: "POST",
@@ -105,7 +116,16 @@ export function HotelProvider({ accessToken, children, resClientId}) {
       body: JSON.stringify(payload),
     });
 
-    return res.json();
+    const messages = await res.json();
+
+    setMessagesByConvId(prev => ({
+    ...prev,
+    [conv_id]: messages,
+
+  }));
+
+  return messages;
+
     
     //return res.json
   }
@@ -178,6 +198,11 @@ export function HotelProvider({ accessToken, children, resClientId}) {
 
   }
 
+  async function preloadMessages(conversations) {
+  for (const conv of conversations) {
+    await fetchMessages({ conv_id: conv.id });
+  }
+}
 
 //   INVENTORY
 
@@ -255,6 +280,11 @@ export function HotelProvider({ accessToken, children, resClientId}) {
       break;
     }
 
+    case "chat_message": {
+      appendMessage(msg);
+      break;
+    }
+
     default:
       console.warn("Unhandled WS message bruuuuh:", msg);
   }
@@ -274,19 +304,30 @@ export function HotelProvider({ accessToken, children, resClientId}) {
         fetchRooms(),
         fetchConversations(),
         fetchHotelUsers(),
+        
       ]);
       
       setClientId(resClientId);
       setRooms(roomsData);
       setConversations(convData);
-      //console.log("USERS =",users)
       setUsers(usersData);
+
+      
+
     }
     
     load();
+
+      
     //console.log("USERS 2 =",usersById)
   }, []);
 
+  useEffect(() => {
+  if (conversations.length === 0) return;
+
+  preloadMessages(conversations);
+}, [conversations]);
+
     useEffect(() => {
   //if (!accessTokenSingle || !clientId) return;
 
@@ -327,6 +368,7 @@ export function HotelProvider({ accessToken, children, resClientId}) {
       value={{
         rooms,
         conversations,
+        messagesByConvId,
         users,
         usersById,
         clientId,

src/components/widget/chatWidget.jsx

@@ -20,7 +20,7 @@ export default function ChatWidget({convlist}) {
     const [activeConvId, setActiveConvId] = useState(null);
     const [showAddUsers, setShowAddUsers] = useState(false);
     const [showCreateConv, setShowCreateConv] = useState(false);
-
+    //FIXME: does this make multiple re render ?
     const handleOpenConv = async (conv_id) => {
         setActiveConvId(conv_id);
     };
@@ -207,44 +207,36 @@ function ConvCard({id, title, onOpenConv}) {
     )
 }
 
-function MessagesBox({ conv_id, fetchMessages, usersById, clientId }) {
+function MessagesBox({ conv_id }) {
+  const { messagesByConvId, usersById, clientId } = useHotel();
+  const messages = messagesByConvId[conv_id] ?? [];
 
-    const [messages, setMessages] = useState([]);
+  console.log(messagesByConvId);
+  console.log(usersById);
 
-    useEffect(() => {
-        async function load() {
-            const msg = await fetchMessages({ conv_id });
-            setMessages(msg);
-        }
-        load();
-    }, [conv_id]);
+  if (messages.length === 0) {
+    return <div className="messagesbox empty">No messages</div>;
+  }
 
-    if (!messages || messages.length === 0) {
-        return <div className="messagesbox empty">No messages</div>
-    }
-    //console.log("FETCH RESULT =", messages);
-    return (
-        
-        <div className="messagebox">
-            {messages
-            .slice()              // don’t mutate state
-            .sort((a, b) => new Date(a.sent_at) - new Date(b.sent_at))
-            .map(msg => {
-                const isMine = msg.sender_id === clientId
-
-                return(
-                    <div key = {msg.id}
-                    className={`msg ${isMine ? "msg--mine" : "msg--theirs"}`}>
-                        <p>
+  return (
+    <div className="messagebox">
+      {messages
+        .slice()
+        .sort((a, b) => new Date(a.sent_at) - new Date(b.sent_at))
+        .map(msg => {
+          const isMine = msg.sender_id === clientId;
+          return (
+            <div key={msg.sent_at}
+                className={`msg ${isMine ? "msg--mine" : "msg--theirs"}`}>
+                <p>
                             <strong>Sender:</strong>{" "}
                             {usersById[msg.sender_id] ?? "Unknown user"}
-                        </p>
-                        <p>{msg.content}</p>
-                        <small>{msg.sent_at}</small>
-                    </div>
-                )
-            })}
-        </div>
+                </p>
 
-    );
+              <p>{msg.content}</p>
+            </div>
+          );
+        })}
+    </div>
+  );
 }