code refactor added missing async

client/src/components/chat/ContactForm.tsx

@@ -16,14 +16,19 @@ function ContactForm({ contact, setContact }: ContactInputProps) {
 
   let storedContact: string | null = "";
   useEffect(() => {
+    let isMounted = true;
     storedContact = storedContact = localStorage.getItem("contact");
     if (storedContact) {
       setContact(storedContact);
       sendRequestHistorical(storedContact);
     }
+    return () => {
+      isMounted = false;
+    };
   }, [setContact]);
 
   const submitContact: SubmitHandler<Input> = (data) => {
+    sendRequestHistorical(data.contact);
     localStorage.setItem("contact", data.contact);
     setContact(data.contact);
     sendContact(data.contact); //TODO zapisz w bazie danych te kontakty

client/src/components/chat/MessagesArea.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from "react";
-import { sendRequestHistorical } from "../../socket/socket.tsx";
 import { socket } from "../../socket/socket.tsx";
 
-type chatMessages = {
+type ChatMessages = {
   senderUsername: string;
   message: string;
   recipient: string;
@@ -10,28 +9,34 @@ type chatMessages = {
   timestamp: string;
 };
 
-function messagesArea() {
-  const [messages, setMessages] = useState<chatMessages[]>([]);
+function MessagesArea() {
+  const [messages, setMessages] = useState<ChatMessages[]>([]);
 
   useEffect(() => {
-    console.log("Requesting previous messages");
-    sendRequestHistorical("username");
-
-    const messageHandler = (msg: chatMessages) => {
+    const messageHandler = (msg: ChatMessages) => {
       setMessages((prevMessages) => [...prevMessages, msg]);
     };
 
-    socket.on("chat message", (msg: chatMessages) => {
-      console.log("Received data: ", 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>) => {
+      console.log("Received historical messages: ", msg);
+      msg.forEach((historicalMsg) => {
+        messageHandler(historicalMsg);
+      });
+    });
     return () => {
       socket.off("chat message");
     };
   }, []);
   const messageList = messages.map((msg, index) => (
     <li key={index}>
-      {msg.senderUsername}: {msg.message}
+      {msg.message_id} {msg.senderUsername}: {msg.message}
     </li>
   ));
 
@@ -41,4 +46,4 @@ function messagesArea() {
     </>
   );
 }
-export default messagesArea;
+export default MessagesArea;

client/src/pages/Chat.tsx

@@ -39,7 +39,7 @@ function Chat() {
           <div className="m-2">
             <MessagesArea />
           </div>
-          <div className="mt-auto mb-2">
+          <div className="mt-auto mb-2 fixed bottom-0">
             {contact && contact.length >= 4 ? (
               <MessageForm contact={contact} />
             ) : (

client/src/socket/socket.tsx

@@ -15,7 +15,16 @@ socket.on("disconnect", () => {
 });
 
 function sendMessage(message: string, recipient: string | null) {
-  const timestamp = new Date().toLocaleDateString();
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = ("0" + (now.getMonth() + 1)).slice(-2);
+  const day = ("0" + now.getDate()).slice(-2);
+
+  const hour = ("0" + now.getHours()).slice(-2);
+  const minute = ("0" + now.getMinutes()).slice(-2);
+  const second = ("0" + now.getSeconds()).slice(-2);
+  const timestamp = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+
   socket.emit("chat message", {
     message: message,
     recipient: recipient,
@@ -29,5 +38,6 @@ function sendContact(recipient: string) {
 
 function sendRequestHistorical(recipient: string) {
   socket.emit("historical", { recipient: recipient });
+  console.log("Requested historical messages for: ", recipient);
 }
 export { sendMessage, sendContact, sendRequestHistorical, socket };

server/db/db.js

@@ -114,16 +114,18 @@ async function insertMessage(sender, recipient, message, timestamp) {
 
 async function getMessages(username, recipient) {
   const query = ` 
-  SELECT message, timestamp FROM messages
-  WHERE (sender = $1 AND recipient = $2);
+  SELECT * FROM messages
+  WHERE (sender = $1 AND recipient = $2) OR (sender = $2 AND recipient = $1)
+  ORDER BY message_id ASC;
   `;
   try {
     const results = await client.query(query, [username, recipient]);
-    return results.rows[0];
+    return results.rows;
   } catch (e) {
     console.error("Failed to get messages ", e);
   }
 }
+
 async function checkUserExist(username) {
   const query = `
   SELECT COUNT(*) FROM accounts 

server/server.js

@@ -122,12 +122,10 @@ app.get("/api/auth/validate", (req, res) => {
   }
   const { username } = verifyJwtToken(token);
   if (username) {
-    console.log("Requested successfull");
     return res
       .status(200)
       .json({ message: "Authorized", username: username.username });
   }
-  console.log("requested failed");
   return res.status(401).json({ message: "Unauthorized" });
 });
 

server/socket/socket.js

@@ -27,21 +27,25 @@ function initializeSocket(io) {
 
   io.on("connection", (socket) => {
     const username = socket.username;
-    // if (!username) {
-    //   socket.on("disconnect", () => {
-    //     console.log(socket.id, " disconnected due to: invalid username/token");
-    //   });
-    // }
-    console.log(`${socket.id}, ${username}, connected`);
+    if (!username) {
+      socket.on("disconnect", () => {
+        console.log(socket.id, " disconnected due to: invalid username/token");
+      });
+    }
     socket.join(username); // join username room
 
-    socket.on("chat message", (msg) => {
+    socket.on("chat message", async (msg) => {
       const { message, recipient, timestamp } = msg;
       const senderUsername = username;
       if (!message || recipient.length < 4 || !recipient) {
         return;
       }
-      const results = insertMessage(username, recipient, message, timestamp);
+      const results = await insertMessage(
+        username,
+        recipient,
+        message,
+        timestamp,
+      );
       const message_id = results.message_id;
       if (message_id) {
       }
@@ -52,18 +56,20 @@ function initializeSocket(io) {
         message,
         recipient,
         timestamp,
+        message_id,
       });
-      console.log("sended: ", {
+      console.log("sent: ", {
         senderUsername,
         message,
         recipient,
         timestamp,
+        message_id,
       });
     });
 
-    socket.on("historical", (recipient) => {
-      const messages = getMessages(username, recipient);
-      io.to(username).emit("historical", { messages });
+    socket.on("historical", async (recipient) => {
+      const messages = await getMessages(username, recipient.recipient);
+      io.to(username).emit("historical", messages);
     });
     socket.on("disconnect", (reason) => {
       console.log(socket.id, " disconnected due to: ", reason);