added overflow to messages

client/src/components/chat/MessagesArea.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { socket } from "../../socket/socket.tsx";
 
 type ChatMessages = {
-  senderUsername: string;
+  sender: string;
   message: string;
   recipient: string;
   message_id: number;
@@ -17,14 +17,11 @@ function MessagesArea() {
       setMessages((prevMessages) => [...prevMessages, msg]);
     };
 
-    const handleHistoricalMessages = (historicalMessages: ChatMessages[]) => {
-      setMessages((prevMessages) => [...historicalMessages, ...prevMessages]);
-    };
     socket.on("chat message", (msg: ChatMessages) => {
       console.log("Received message: ", msg);
       messageHandler(msg);
     });
-    socket.on("historical", (msg: Array<string>) => {
+    socket.on("historical", (msg: ChatMessages[]) => {
       console.log("Received historical messages: ", msg);
       msg.forEach((historicalMsg) => {
         messageHandler(historicalMsg);
@@ -36,14 +33,17 @@ function MessagesArea() {
   }, []);
   const messageList = messages.map((msg, index) => (
     <li key={index}>
-      {msg.message_id} {msg.senderUsername}: {msg.message}
+      {msg.message_id} {msg.sender}: {msg.message}
     </li>
   ));
 
   return (
     <>
-      <ul>{messageList}</ul>
+      <div className="flex flex-col">
+        <ul className="flex-grow-1 list-none">{messageList}</ul>
+      </div>
     </>
   );
 }
+
 export default MessagesArea;

client/src/pages/Chat.tsx

@@ -36,10 +36,10 @@ function Chat() {
             <ContactProfile contact={contact} />
           </div>
           <hr />
-          <div className="m-2">
+          <div className="m-2 overflow-x-hidden overflow-y-scroll">
             <MessagesArea />
           </div>
-          <div className="mt-auto mb-2 fixed bottom-0">
+          <div className="mb-2 bottom-0 flex">
             {contact && contact.length >= 4 ? (
               <MessageForm contact={contact} />
             ) : (

server/socket/socket.js

@@ -36,7 +36,7 @@ function initializeSocket(io) {
 
     socket.on("chat message", async (msg) => {
       const { message, recipient, timestamp } = msg;
-      const senderUsername = username;
+      const sender = username;
       if (!message || recipient.length < 4 || !recipient) {
         return;
       }
@@ -52,14 +52,14 @@ function initializeSocket(io) {
       console.log("received from chat message", msg);
 
       io.to(username).to(recipient).emit("chat message", {
-        senderUsername,
+        sender,
         message,
         recipient,
         timestamp,
         message_id,
       });
       console.log("sent: ", {
-        senderUsername,
+        sender,
         message,
         recipient,
         timestamp,