sorting contacts by last active time

client/src/components/chat/ContactProfile.tsx

@@ -1,5 +1,5 @@
 import zdjecie from '../../../assets/walter.png';
-
+import profile from '../../../assets/profile.svg';
 type Contact = {
   contact: string | null;
 };
@@ -16,7 +16,8 @@ function ContactProfile({ contact }: Contact) {
         {/*    draggable={false}*/}
         {/*  />*/}
         {/*</div>*/}
-        <div className="text-center text-gray-200">
+        <div className="text-center text-gray-200 flex">
+          <img className="w-4 mr-2 invert" src={profile} alt="profile img" />
           <p>{contact ? contact : null}</p>
         </div>
       </div>

client/src/components/chat/ContactsList.tsx

@@ -5,6 +5,7 @@ import axios from 'axios';
 type ContactsProps = {
   usernamecontact: string;
   read: boolean;
+  lastActive: string;
 };
 
 type ContactsListProps = {
@@ -38,10 +39,6 @@ function ContactsList({
       contactHandler(contactsList);
     });
 
-    // socket.on('contact', (contactInf) => {
-    //   console.log('received contact: ', contactInf);
-    // });
-
     return () => {
       if (!socket) {
         console.error('Socket not initialized');
@@ -73,7 +70,7 @@ function ContactsList({
     if (a.read !== b.read) {
       return a.read ? 1 : -1;
     }
-    return 0;
+    return new Date(b.lastActive).getTime() - new Date(a.lastActive).getTime();
   });
 
   const addContactsList = sortedContats.map((contact: ContactsProps, index) => (

client/src/components/chat/MessagesArea.tsx

@@ -81,8 +81,8 @@ function MessagesArea({
   }, [messages]);
 
   const messageList = messages.map((msg: ChatMessages) => (
-    <li className="hover:bg-gray-700" key={msg.message_id}>
-      {msg.message_id} {msg.sender}: {msg.message}
+    <li className="ml-2 rounded p-1 hover:bg-gray-800" key={msg.message_id}>
+      {msg.sender}: {msg.message}
     </li>
   ));
 

client/src/utils/ProtectedRoutes.tsx

@@ -34,6 +34,7 @@ function ProtectedRoutes() {
           setAuthorized(false);
           console.log(err);
           console.log('Unauthorized');
+          console.log(import.meta.env.BASE_URL);
         });
     }
     validateToken();
@@ -41,7 +42,7 @@ function ProtectedRoutes() {
 
   //TODO add spinning wheel
   if (authorized === null) {
-    return null;
+    return <p>loading...</p>;
   }
 
   return authorized ? (

server/db/db.js

@@ -59,6 +59,7 @@ async function createTables() {
         username VARCHAR(20) NOT NULL,
         usernameContact VARCHAR(20) NOT NULL,
         read BOOLEAN NOT NULL,
+        lastActive VARCHAR(100) NOT NULL,
         CONSTRAINT unique_username_contact UNIQUE (username, usernameContact)
       );
     `);
@@ -172,18 +173,19 @@ async function changePassword(username, newPassword) {
 }
 
 async function insertContact(username, usernameContact, read) {
+  const timestamp = getTime();
   console.log(
     `insertContact username: ${username}, usernameContact: ${usernameContact}, read: ${read}`,
   );
 
   const query = `
-    INSERT INTO contacts (username, usernameContact, read)
-    VALUES ($1, $2, $3)
+    INSERT INTO contacts (username, usernameContact, lastActive, read)
+    VALUES ($1, $2, $3, $4)
     ON CONFLICT ON CONSTRAINT unique_username_contact
     DO NOTHING;
   `;
   try {
-    await client.query(query, [username, usernameContact, read]);
+    await client.query(query, [username, usernameContact, timestamp, read]);
   } catch (e) {
     console.error("Failed to insert contact ", e);
   }
@@ -192,7 +194,8 @@ async function insertContact(username, usernameContact, read) {
 async function getContacts(username) {
   const query = `
     SELECT usernameContact, read FROM contacts
-    WHERE username = $1;
+    WHERE username = $1
+    ORDER BY lastActive DESC;
   `;
   try {
     const result = await client.query(query, [username]);
@@ -234,6 +237,31 @@ async function updateContactStatus(username, usernamecontact, read) {
     console.error("Failed to update contact status ", e);
   }
 }
+
+async function updateContactLastActive(username, usernamecontact) {
+  const timestamp = getTime();
+  const query = `
+  UPDATE contacts SET lastActive = $1 WHERE username = $2 AND usernamecontact = $3
+  `;
+  try {
+    await client.query(query, [timestamp, username, usernamecontact]);
+    console.log("Successfully updated contact last active time");
+  } catch (e) {
+    console.error("Failed to update contact last active time");
+  }
+}
+
+function getTime() {
+  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);
+  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+}
 module.exports = {
   client,
   insertUser,
@@ -247,4 +275,5 @@ module.exports = {
   getUserId,
   getContacts,
   updateContactStatus,
+  updateContactLastActive,
 };