Refactor chat message functionality and improve UI components

Removed ChatArea component and added MessagesArea component for handling chat messages. Updated message handling in the server to emit message IDs and adjusted the database query to return these IDs. Renamed ContactInput to ContactForm for better semantic clarity.

client/src/components/ChatArea.tsx

@@ -1,18 +0,0 @@
-import io from "socket.io-client";
-import Cookie from "js-cookie";
-import { useEffect, useState } from "react";
-const socket = io({
-  auth: {
-    token: Cookie.get("token"),
-  },
-});
-
-function chatArea() {
-  const [messages, setMessages] = useState<string>("");
-
-  useEffect(() => {
-    socket.on("historical", (historical: string) => {
-      setMessages((prevMessages) => [...prevMessages, messages]);
-    });
-  }, []);
-}

client/src/components/ContactForm.tsx

@@ -11,7 +11,7 @@ interface ContactInputProps {
   setContact: Dispatch<SetStateAction<string>>;
 }
 
-function ContactInput({ contact, setContact }: ContactInputProps) {
+function ContactForm({ contact, setContact }: ContactInputProps) {
   const { register, handleSubmit, reset } = useForm<Input>();
 
   let storedContact: string | null = "";
@@ -52,4 +52,4 @@ function ContactInput({ contact, setContact }: ContactInputProps) {
   );
 }
 
-export default ContactInput;
+export default ContactForm;

client/src/components/ContactProfile.tsx

@@ -1,9 +1,9 @@
 import zdjecie from "../../assets/walter.png";
 
 type ContactProfileProps = {
-  contactUsername: string;
+  contact: string;
 };
-function ContactProfile({ contactUsername }: ContactProfileProps) {
+function ContactProfile({ contact }: ContactProfileProps) {
   return (
     <>
       <div className="m-2 flex items-center">
@@ -17,7 +17,7 @@ function ContactProfile({ contactUsername }: ContactProfileProps) {
         {/*  />*/}
         {/*</div>*/}
         <div className="text-center text-gray-200">
-          <p>{contactUsername}</p>
+          <p>{contact}</p>
         </div>
       </div>
     </>

client/src/components/MessagesArea.tsx

@@ -0,0 +1,23 @@
+import io from "socket.io-client";
+import Cookie from "js-cookie";
+import { useEffect, useState } from "react";
+import { sendRequestHistorical } from "../socket/socket.tsx";
+import { socket } from "../socket/socket.tsx";
+
+function messagesArea() {
+  const [messages, setMessages] = useState<string[]>([]);
+
+  useEffect(() => {
+    const messageHandler = (message: string) => {
+      setMessages((prevMessages) => [...prevMessages, message]);
+    };
+  });
+  const messageList = messages.map((message) => <li>{message}</li>);
+
+  return (
+    <>
+      <ul>{messageList}</ul>
+    </>
+  );
+}
+export default messagesArea;

client/src/pages/Chat.tsx

@@ -1,7 +1,8 @@
 import MessageForm from "../components/MessageForm.tsx";
 import ContactProfile from "../components/ContactProfile.tsx";
 import UserProfile from "../components/UserProfile.tsx";
-import ContactInput from "../components/ContactInput.tsx";
+import ContactForm from "../components/ContactForm.tsx";
+import MessagesArea from "../components/MessagesArea.tsx";
 import { useState } from "react";
 
 function Chat() {
@@ -12,7 +13,7 @@ function Chat() {
         {/*Sidebar*/}
         <div className="h-screen bg-[#1E1E1E] flex flex-col">
           {/*Contact input*/}
-          <ContactInput contact={contact} setContact={setContact} />
+          <ContactForm contact={contact} setContact={setContact} />
           {/*Contact list*/}
           <div className="flex-grow overflow-y-auto w-64">
             <ul className="ml-2">
@@ -26,20 +27,24 @@ function Chat() {
               <li>jdjskskbkskskaoso</li>
             </ul>
           </div>
-          {/*Profile element*/}
           <hr />
           <UserProfile />
         </div>
         {/*Chat area */}
         <div className="text-white bg-[#121212] flex flex-col h-screen w-full">
-          {/*Messages*/}
           <div className="flex">
-            <ContactProfile contactUsername={contact} />
+            <ContactProfile contact={contact} />
           </div>
           <hr />
-          {/*Messages input*/}
+          <div className="m-2">
+            <MessagesArea />
+          </div>
           <div className="mt-auto mb-2">
-            <MessageForm />
+            {contact && contact.length >= 4 ? (
+              <MessageForm contact={contact} />
+            ) : (
+              <></>
+            )}
           </div>
         </div>
       </div>

client/src/socket/socket.tsx

@@ -22,4 +22,4 @@ function sendContact(recipient: string) {
 function sendRequestHistorical(recipient: string) {
   socket.emit("historical", { recipient: recipient });
 }
-export { sendMessage, sendContact, sendRequestHistorical };
+export { sendMessage, sendContact, sendRequestHistorical, socket };

server/db/db.js

@@ -98,10 +98,16 @@ async function insertMessage(sender, recipient, message) {
   const query = `
   INSERT INTO messages (sender, recipient, message, timestamp)
   VALUES ($1, $2, $3, $4) 
-  RETURNING message_id;
+  RETURNING message timestamp, message_id;
   `;
   try {
-    await client.query(query, [sender, recipient, message, timestamp]);
+    const results = await client.query(query, [
+      sender,
+      recipient,
+      message,
+      timestamp,
+    ]);
+    return results.rows[0];
   } catch (e) {
     console.error("Failed to insert message ", e);
   }

server/socket/socket.js

@@ -14,12 +14,19 @@ function initializeSocket(io) {
 
     socket.on("chat message", (msg) => {
       const { message, recipient } = msg;
-      // checks if message is empty or recipient is null
-      if (!message || !recipient) {
+      if (!message || recipient.length < 4 || !recipient) {
         return;
       }
-      insertMessage(username, recipient, message);
+      const results = insertMessage(username, recipient, message);
+      const message_id = results.message_id;
+      console.log("id: ", message_id);
+      if (message_id) {
+      }
       console.log("received from chat message", msg);
+
+      io.to(username)
+        .to(recipient)
+        .emit("chat message", { message, recipient, message_id });
     });
 
     socket.on("historical", (recipient) => {