getContactsList api,

contacts are now fetching from api

client/src/components/chat/ContactForm.tsx

@@ -8,6 +8,7 @@ type Input = {
 type ContactsProps = {
   usernamecontact: string;
   read: boolean;
+  lastActive: string;
 };
 
 type InitializeContactsProps = {

client/src/components/chat/ContactsList.tsx

@@ -1,4 +1,4 @@
-import { sendRequestContactsList, socket } from '../../socket/socket.tsx';
+import { socket } from '../../socket/socket.tsx';
 import { useEffect } from 'react';
 import axios from 'axios';
 
@@ -15,7 +15,15 @@ type ContactsListProps = {
   setCurrentContact: React.Dispatch<React.SetStateAction<string | null>>;
   updateStatus: (contactObj: ContactsProps, read: true) => void;
 };
-
+async function getContactsList(): Promise<ContactsProps[]> {
+  try {
+    const response = await axios.get('http://localhost:5173/api/chat/contacts');
+    return response.data;
+  } catch (e) {
+    console.error('Failed to fetch /api/chat/contacts: ', e);
+    return []; // or throw error if you prefer
+  }
+}
 function ContactsList({
   InitializeContact,
   contactsList,
@@ -32,12 +40,22 @@ function ContactsList({
       console.error('Socket not initialized');
       return;
     }
-    sendRequestContactsList();
 
-    socket.on('get contacts list', (contactsList: ContactsProps[]) => {
-      console.log('Received contacts list: ', contactsList);
-      contactHandler(contactsList);
-    });
+    async function fetchContacts() {
+      try {
+        const contacts = await getContactsList();
+        contactHandler(contacts);
+      } catch (error) {
+        console.error('Error fetching contacts:', error);
+      }
+    }
+    fetchContacts();
+    // sendRequestContactsList();
+    //
+    // socket.on('get contacts list', (contactsList: ContactsProps[]) => {
+    //   console.log('Received contacts list: ', contactsList);
+    //   contactHandler(contactsList);
+    // });
 
     return () => {
       if (!socket) {
@@ -66,43 +84,45 @@ function ContactsList({
       });
   }
 
-  const sortedContats = [...contactsList].sort((a, b) => {
+  const sortedContacts = [...contactsList].sort((a, b) => {
     if (a.read !== b.read) {
       return a.read ? 1 : -1;
     }
     return new Date(b.lastActive).getTime() - new Date(a.lastActive).getTime();
   });
 
-  const addContactsList = sortedContats.map((contact: ContactsProps, index) => (
-    <li
-      className="flex hover:bg-green-700 p-2 rounded cursor-pointer justify-between items-center min-h-[40px]" // Added min-h-[40px]
-      onClick={() => {
-        InitializeContact(contact.usernamecontact);
-        updateStatus(contact, true);
-      }}
-      key={index}
-    >
-      <span className="flex-shrink-0">{contact.usernamecontact}</span>
-
-      <div className="w-4 h-4 mx-2 flex items-center justify-center mr-auto">
-        <p className="text-center text-2xl text-red-200 leading-none">
-          {contact.read ? '' : '•'}
-        </p>
-      </div>
-
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          deleteContact(contact.usernamecontact);
-          setCurrentContact(null);
-          localStorage.removeItem('contact');
+  const addContactsList = sortedContacts.map(
+    (contact: ContactsProps, index) => (
+      <li
+        className="flex hover:bg-green-700 p-2 rounded cursor-pointer justify-between items-center min-h-[40px]" // Added min-h-[40px]
+        onClick={() => {
+          InitializeContact(contact.usernamecontact);
+          updateStatus(contact, true);
         }}
-        className="flex-shrink-0 w-6 h-6 rounded-full hover:text-red-500 flex items-center justify-center text-gray-500"
+        key={index}
       >
-        x
-      </button>
-    </li>
-  ));
+        <span className="flex-shrink-0">{contact.usernamecontact}</span>
+
+        <div className="w-4 h-4 mx-2 flex items-center justify-center mr-auto">
+          <p className="text-center text-2xl text-red-200 leading-none">
+            {contact.read ? '' : '•'}
+          </p>
+        </div>
+
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            deleteContact(contact.usernamecontact);
+            setCurrentContact(null);
+            localStorage.removeItem('contact');
+          }}
+          className="flex-shrink-0 w-6 h-6 rounded-full hover:text-red-500 flex items-center justify-center text-gray-500"
+        >
+          x
+        </button>
+      </li>
+    ),
+  );
   return (
     <div className="flex-grow overflow-y-auto w-64">
       <ul className="items-center text-center ml-1 mt-2 flex-grow-1">

client/src/pages/Chat.tsx

@@ -23,6 +23,7 @@ type ChatMessages = {
 type ContactsProps = {
   usernamecontact: string;
   read: boolean;
+  lastActive: string;
 };
 
 type ContactObjProps = {
@@ -51,6 +52,7 @@ function Chat() {
       )
       .then((res) => {
         console.log(res.data.message);
+
         setContactsList((prevContacts) =>
           prevContacts.map((c) =>
             c.usernamecontact === contact ? { ...c, read } : c,
@@ -67,6 +69,7 @@ function Chat() {
     setCurrentContact(newContact);
     sendContact({ contact: newContact, read: true }); // TODO do api instead of sending contact to server via socket
     setStatus(newContact, true);
+
     console.log('Contact submitted:', newContact);
   }
 

client/src/utils/ProtectedRoutes.tsx

@@ -9,8 +9,6 @@ export type UsernameType = {
   username: string | null;
 };
 
-//export const useAuth = () => useContext(AuthContext);
-
 function ProtectedRoutes() {
   const { authorized, setAuthorized } = useContext(AuthContext);
   const [username, setUsername] = useState<string | null>(null);

server/db/db.js

@@ -228,10 +228,12 @@ async function deleteContact(username, usernamecontact) {
 
 async function updateContactStatus(username, usernamecontact, read) {
   const query = `
-  UPDATE contacts SET read = $1 WHERE username = $2 AND usernamecontact = $3
+  UPDATE contacts SET read = $1 
+  WHERE username = $2 AND usernamecontact = $3
   `;
   try {
     await client.query(query, [read, username, usernamecontact]);
+    await updateContactLastActive(username, usernamecontact);
     console.log("Successfully updated contact status");
   } catch (e) {
     console.error("Failed to update contact status ", e);
@@ -241,7 +243,8 @@ async function updateContactStatus(username, usernamecontact, read) {
 async function updateContactLastActive(username, usernamecontact) {
   const timestamp = getTime();
   const query = `
-  UPDATE contacts SET lastActive = $1 WHERE username = $2 AND usernamecontact = $3
+  UPDATE contacts SET lastActive = $1 
+  WHERE username = $2 AND usernamecontact = $3
   `;
   try {
     await client.query(query, [timestamp, username, usernamecontact]);

server/server.js

@@ -27,6 +27,7 @@ const {
 const filter = require("./utils/filter");
 const { generateJwtToken, verifyJwtToken } = require("./auth/jwt");
 const { initializeSocket } = require("./socket/socket");
+const { getContacts } = require("./db/db");
 
 const corsOptions = {
   origin: process.env.ORIGIN,
@@ -172,6 +173,20 @@ app.put("/api/chat/contacts/:contact", async (req, res) => {
   await updateContactStatus(username, usernamecontact, read);
 });
 
+app.get("/api/chat/contacts", async (req, res) => {
+  const token = req.cookies.token;
+  if (!token) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+  const { username } = verifyJwtToken(token);
+  if (!username) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+  const contacts = await getContacts(username);
+  console.log("sent contacts list for: ", username);
+  return res.status(200).json(contacts);
+});
+
 initializeSocket(io);
 
 server.listen(PORT, () => {