added filter to prevent display same message multiple times, fixed ui

client/src/components/chat/MessagesArea.tsx

@@ -14,7 +14,13 @@ function MessagesArea() {
 
   useEffect(() => {
     const messageHandler = (msg: ChatMessages) => {
-      setMessages((prevMessages) => [...prevMessages, msg]);
+      setMessages((prevMessages) => {
+        // Check if the message already exists in the state
+        if (!prevMessages.some((m) => m.message_id === msg.message_id)) {
+          return [...prevMessages, msg];
+        }
+        return prevMessages;
+      });
     };
 
     socket.on("chat message", (msg: ChatMessages) => {
@@ -23,16 +29,18 @@ function MessagesArea() {
     });
     socket.on("historical", (msg: ChatMessages[]) => {
       console.log("Received historical messages: ", msg);
+
       msg.forEach((historicalMsg) => {
         messageHandler(historicalMsg);
       });
     });
     return () => {
       socket.off("chat message");
+      socket.off("historical");
     };
   }, []);
-  const messageList = messages.map((msg, index) => (
-    <li key={index}>
+  const messageList = messages.map((msg) => (
+    <li key={msg.message_id}>
       {msg.message_id} {msg.sender}: {msg.message}
     </li>
   ));

client/src/pages/Chat.tsx

@@ -32,19 +32,17 @@ function Chat() {
         </div>
         {/*Chat area */}
         <div className="text-white bg-[#121212] flex flex-col h-screen w-full">
-          <div className="flex">
+          <div className="flex-shrink-0">
             <ContactProfile contact={contact} />
           </div>
-          <hr />
-          <div className="m-2 overflow-x-hidden overflow-y-scroll">
+          <hr className="flex-shrink-0" />
+          <div className="flex-grow overflow-x-hidden overflow-y-auto m-2">
             <MessagesArea />
           </div>
-          <div className="mb-2 bottom-0 flex">
+          <div className="flex-shrink-0 mb-2">
             {contact && contact.length >= 4 ? (
               <MessageForm contact={contact} />
-            ) : (
-              <></>
-            )}
+            ) : null}
           </div>
         </div>
       </div>