Chat, scrolling, sockets and timestamps updated

src/pages/Chat.jsx

@@ -2,9 +2,10 @@ import React, { useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import "./css/Chat.css";
 import { FaPaperPlane, FaSmile } from "react-icons/fa";
-import {get, post} from "../backend/api";
-import {displayMessage} from "../backend/notifications/notifications";
-import {MessageType} from "../backend/notifications/message";
+import { get, post } from "../backend/api";
+import { displayMessage } from "../backend/notifications/notifications";
+import { MessageType } from "../backend/notifications/message";
+import io from "socket.io-client";
 
 const emojis = [
   "😀",
@@ -88,8 +89,7 @@ const Chat = () => {
   const [myId, setMyId] = useState("");
 
   useEffect(() => {
-    // const id = parseInt(localStorage.getItem("interlocutorId"), 10) || 0;
-    const id = localStorage.getItem("interlocutorId")
+    const id = localStorage.getItem("interlocutorId");
     setInterlocutorId(id);
 
     const username = localStorage.getItem("username");
@@ -100,36 +100,24 @@ const Chat = () => {
       return () => {};
     }
 
-    socket.current = new WebSocket("ws://localhost:8080");
+    socket.current = io("http://localhost:8099");
 
-    socket.current.onopen = () => {
-      console.log("WebSocket connected");
-      socket.current.send(
-        JSON.stringify({ type: "register", userId: "yourUserId" })
-      );
-    };
+    socket.current.on("receiveMessage", (message) => {
+      setMessages((prev) => [...prev, message]);
+    });
 
-    socket.current.onmessage = (event) => {
-      const receivedData = JSON.parse(event.data);
-      setMessages((prev) => [...prev, receivedData]);
-    };
-
-    socket.current.onerror = (event) => {
-      console.error("WebSocket error observed:", event);
-    };
-
-    socket.current.onclose = () => {
-      console.log("WebSocket closed");
-    };
+    socket.current.on("connect_error", (err) => {
+      console.error("Connection Error:", err.message);
+    });
 
     return () => {
-      socket.current.close();
+      socket.current.disconnect();
     };
   }, []);
 
   useEffect(() => {
     retrieveMessages().then();
-  }, [myId, interlocutorId])
+  }, [myId, interlocutorId]);
 
   useEffect(() => {
     if (chatRef.current) {
@@ -137,25 +125,24 @@ const Chat = () => {
     }
   }, [messages]);
 
-  // The function for sending message to the DB
-  async function sendMessageToDB (messageData) {
-    const { ok, data } = post('/chat/message/' + myId + '/' + interlocutorId, { message: messageData });
-
+  async function sendMessageToDB(messageData) {
+    const { ok, data } = await post(
+      "/chat/message/" + myId + "/" + interlocutorId,
+      { message: messageData }
+    );
     if (!ok) {
       displayMessage(data.message, MessageType.ERROR);
     }
   }
 
-  // The function retrieves messages from the DB for the current chat
-  async function retrieveMessages () {
-    if (!myId || !interlocutorId) {return;}
-    const { ok, data } = await get('/chat/item/' + myId + '/' + interlocutorId);
+  async function retrieveMessages() {
+    if (!myId || !interlocutorId) return;
 
+    const { ok, data } = await get("/chat/item/" + myId + "/" + interlocutorId);
     if (!ok) {
       displayMessage(data.message, MessageType.ERROR);
       return;
     }
-
     setMessages(data.chat.messages);
   }
 
@@ -165,15 +152,11 @@ const Chat = () => {
         senderId: myId,
         recipientId: interlocutorId,
         data: newMessage,
-        timestamp: new Date().toLocaleTimeString(),
+        timestamp: new Date().toLocaleString(),
       };
-      socket.current.send(JSON.stringify(messageData));
+      socket.current.emit("sendMessage", messageData);
       setMessages((prev) => [...prev, messageData]);
-
       sendMessageToDB(messageData).then();
-
-      console.log('format:', messageData);
-
       setNewMessage("");
     }
   };
@@ -198,8 +181,7 @@ const Chat = () => {
           className="home-button"
         >
           Home
-        </button>{" "}
-        {}
+        </button>
       </div>
       <div className="chat-messages" ref={chatRef}>
         {messages.map((msg, index) => (
@@ -210,8 +192,7 @@ const Chat = () => {
             }`}
           >
             <div className="message-content">
-              <b>{msg.senderId === myId ? "You" : "They"}:</b>{" "}
-              {msg.data}
+              <b>{msg.senderId === myId ? "You" : "They"}:</b> {msg.data}
             </div>
             <span className="message-timestamp">{msg.timestamp}</span>
           </div>