WS message received fix

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([]);
-    
-    useEffect(() => {
-        async function load() {
-            const msg = await fetchMessages({ conv_id });
-            setMessages(msg);
-        }
-        load();
-    }, [conv_id]);
+  console.log(messagesByConvId);
+  console.log(usersById);
 
-    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
+  if (messages.length === 0) {
+    return <div className="messagesbox empty">No messages</div>;
+  }
 
-                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>
+  );
 }