added trims to backend

client/src/components/chat/ContactForm.tsx

@@ -35,7 +35,7 @@ function ContactForm({ contact, setContact, setMessages }: ContactInputProps) {
     sendRequestHistorical(data.contact);
     localStorage.setItem('contact', data.contact);
     setContact(data.contact);
-    sendContact(data.contact); //TODO zapisz w bazie danych te kontakty
+    sendContact({ contact: data.contact, read: true });
     console.log('Contact submitted:', data.contact);
     reset({ contact: '' });
   };

client/src/components/chat/ContactsList.tsx

@@ -1,12 +1,40 @@
 import { socket } from '../../socket/socket.tsx';
+import { useEffect, useState } from 'react';
+
+type Contact = {
+  contact: string;
+  read: boolean;
+};
 
 function ContactsList() {
+  const [contacts, setContacts] = useState<Contact[]>([]);
+
+  useEffect(() => {
+    function contactHandler(contactInf: Contact) {
+      setContacts((prevContacts) => {
+        // Check if the contact already exists
+        if (!prevContacts.some((m) => m.contact === contactInf.contact)) {
+          return [...prevContacts, contactInf];
+        }
+        return prevContacts;
+      });
+    }
+
+    socket.on('contact', (contactInf: Contact) => {
+      console.log('Added contact');
+      contactHandler(contactInf);
+    });
+  }, []);
+
+  const contactList = contacts.map((contact: Contact, index) => (
+    <li className="hover: accent-gray-800" key={index}>
+      {contact.contact}
+    </li>
+  ));
   return (
     <>
       <div className="flex-grow overflow-y-auto w-64">
-        <ul className="m-2">
-          <li>jdjskskbkskskaoso</li>
-        </ul>
+        <ul className="m-2">{contactList}</ul>
       </div>
     </>
   );

client/src/components/chat/MessagesArea.tsx

@@ -16,7 +16,7 @@ function MessagesArea({ messages, setMessages }: MessagesAreaProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const messageHandler = (msg: ChatMessages) => {
+    function messageHandler(msg: ChatMessages) {
       setMessages((prevMessages) => {
         // Check if the message already exists in the state
         if (!prevMessages.some((m) => m.message_id === msg.message_id)) {
@@ -24,7 +24,7 @@ function MessagesArea({ messages, setMessages }: MessagesAreaProps) {
         }
         return prevMessages;
       });
-    };
+    }
 
     socket.on('chat message', (msg: ChatMessages) => {
       console.log('Received message: ', msg);
@@ -47,7 +47,7 @@ function MessagesArea({ messages, setMessages }: MessagesAreaProps) {
     messagesEndRef.current?.scrollIntoView();
   }, [messages]);
 
-  const messageList = messages.map((msg) => (
+  const messageList = messages.map((msg: ChatMessages) => (
     <li className="hover:bg-gray-700" key={msg.message_id}>
       {msg.message_id} {msg.sender}: {msg.message}
     </li>

client/src/components/chat/UserProfile.tsx

@@ -40,7 +40,7 @@ function UserProfile() {
             aria-labelledby="options-menu"
           >
             <a
-              className="cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 flex"
+              className="bg-green-50 cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 flex"
               role="menuitem"
               onClick={logout}
             >

client/src/socket/socket.tsx

@@ -31,9 +31,14 @@ function sendMessage(message: string, recipient: string | null) {
     timestamp: timestamp,
   });
 }
-
-function sendContact(contact: string) {
-  socket.emit('contact', { contact: contact });
+type Contact = {
+  contact: string;
+  read: boolean;
+};
+function sendContact(data: Contact) {
+  const { contact, read } = data;
+  socket.emit('contact', { contact: contact, read: read });
+  console.log('Sent contact: ', contact, 'status: ', read);
 }
 
 function sendRequestHistorical(recipient: string) {

server/db/db.js

@@ -57,7 +57,8 @@ async function createTables() {
     await client.query(`
       CREATE TABLE IF NOT EXISTS contacts (
         username VARCHAR(20),
-        usernameContact VARCHAR(20)
+        usernameContact VARCHAR(20),
+        read BOOLEAN NOT NULL
       );
     `);
   } catch (e) {
@@ -66,6 +67,7 @@ async function createTables() {
 }
 
 async function insertUser(username, password) {
+  username = username.trim();
   const user_id = crypto.randomUUID();
   const created_at = new Date().toLocaleString("pl-PL");
 
@@ -81,6 +83,7 @@ async function insertUser(username, password) {
 }
 
 async function getUserId(username) {
+  username = username.trim();
   const query = `
   SELECT user_id FROM accounts
   WHERE username = $1;
@@ -113,6 +116,8 @@ async function insertMessage(sender, recipient, message, timestamp) {
 }
 
 async function getMessages(username, recipient) {
+  username = username.trim();
+  recipient = recipient.trim();
   const query = ` 
   SELECT * FROM messages
   WHERE (sender = $1 AND recipient = $2) OR (sender = $2 AND recipient = $1)
@@ -127,6 +132,7 @@ async function getMessages(username, recipient) {
 }
 
 async function checkUserExist(username) {
+  username = username.trim();
   const query = `
   SELECT COUNT(*) FROM accounts 
   WHERE username = $1;
@@ -141,6 +147,7 @@ async function checkUserExist(username) {
 }
 
 async function getPassword(username) {
+  username = username.trim();
   const query = `
   SELECT password FROM accounts 
   WHERE username = $1;
@@ -154,6 +161,7 @@ async function getPassword(username) {
 }
 
 async function changePassword(username, newPassword) {
+  username = username.trim();
   const query = `
   UPDATE accounts
   SET password = $1
@@ -166,19 +174,26 @@ async function changePassword(username, newPassword) {
   }
 }
 
-async function insertContact(username, usernameContact) {
+async function insertContact(username, usernameContact, read) {
+  username = username.trim();
+  console.log(
+    `insertContact username: ${username}, usernameContact: ${usernameContact}, read: ${read}`,
+  );
   const query = `
-  INSERT INTO contacts (username, usernameContact)
-  VALUES ($1, $2) ;
+  INSERT INTO contacts (username, usernameContact, read)
+  VALUES ($1, $2, $3) ;
   `;
   try {
-    await client.query(query, [username, usernameContact]);
+    await client.query(query, [username, usernameContact, read]);
   } catch (e) {
     console.error("Failed to insert contact ", e);
   }
 }
 
 async function removeContact(username, usernameContact) {
+  username = username.trim();
+  usernameContact = usernameContact.trim();
+
   const query = `
   DELETE FROM contacts 
   WHERE (username = $1 AND contact = $2);

server/socket/socket.js

@@ -70,8 +70,10 @@ function initializeSocket(io) {
       io.to(username).emit("historical", messages);
     });
 
-    socket.on("contact", (contact) => {
-      insertContact(contact);
+    socket.on("contact", (contactInf) => {
+      const { contact, read } = contactInf;
+      insertContact(username, contact, read);
+      socket.to(username).emit({ contact, read });
     });
     socket.on("disconnect", (reason) => {
       console.log(socket.id, " disconnected due to: ", reason);