deleteContact function

client/src/api/contactsApi.tsx

@@ -64,3 +64,15 @@ export async function getMessages(
     throw e;
   }
 }
+
+export async function deleteContact(usernamecontact: string) {
+  try {
+    const response = await axiosClient.delete(
+      `/api/chat/contacts/${usernamecontact}`,
+    );
+    console.log(response.data);
+    return response.data;
+  } catch (e) {
+    console.error('Failed to delete contact: ', e);
+  }
+}

client/src/components/chat/ContactsList.tsx

@@ -1,7 +1,6 @@
 import { socket } from '../../socket/socket.tsx';
 import { useEffect } from 'react';
-import axios from 'axios';
-import { getContactsList } from '../../api/contactsApi.tsx';
+import { deleteContact, getContactsList } from '../../api/contactsApi.tsx';
 
 type ContactsProps = {
   usernamecontact: string;
@@ -22,8 +21,18 @@ function ContactsList({
   setCurrentContact,
   updateContactStatus,
 }: ContactsListProps) {
-  function contactHandler(contactsList: ContactsProps[]) {
-    setContactsList((prevContacts) => [...prevContacts, ...contactsList]);
+  function contactHandler(contactsList: ContactsProps) {
+    setContactsList((prevContacts) => {
+      // Check if the contact already exists in the state
+      if (
+        !prevContacts.some(
+          (c) => c.usernamecontact === contactsList.usernamecontact,
+        )
+      ) {
+        return [...prevContacts, contactsList];
+      }
+      return prevContacts;
+    });
   }
 
   useEffect(() => {
@@ -34,19 +43,13 @@ function ContactsList({
 
     async function fetchContacts() {
       try {
-        const contacts = await getContactsList();
-        contactHandler(contacts);
+        const contacts: ContactsProps[] = await getContactsList();
+        contacts.forEach(contactHandler);
       } 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) {
@@ -59,22 +62,6 @@ function ContactsList({
     };
   }, []);
 
-  function deleteContact(usernamecontact: string) {
-    axios
-      .delete(`http://localhost:5173/api/chat/contacts/${usernamecontact}`, {
-        withCredentials: true,
-      })
-      .then((res) => {
-        console.log(res.data.message);
-        // remove contact from list
-        setContactsList((prevContacts) =>
-          prevContacts.filter(
-            (contact) => contact.usernamecontact !== usernamecontact,
-          ),
-        );
-      });
-  }
-
   const sortedContacts = [...contactsList].sort((a, b) => {
     if (a.read !== b.read) {
       return a.read ? 1 : -1;

client/src/components/chat/MessagesArea.tsx

@@ -20,7 +20,7 @@ type MessagesAreaProps = {
   messages: ChatMessages[];
   setMessages: React.Dispatch<React.SetStateAction<ChatMessages[]>>;
   currentContact: string | null;
-  setStatus: (contact: string, read: boolean) => void;
+  setContactStatus: (contact: string, read: boolean) => void;
   updateStatus: (contact: ContactProps, read: boolean) => void;
 };
 
@@ -28,7 +28,7 @@ function MessagesArea({
   messages,
   setMessages,
   currentContact,
-  setStatus,
+  setContactStatus,
   updateStatus,
 }: MessagesAreaProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -54,7 +54,7 @@ function MessagesArea({
     socket.on('chat message', (msg: ChatMessages) => {
       console.log('Received message: ', msg);
       if (msg.sender !== currentContact && msg.sender !== username) {
-        setStatus(msg.sender, false);
+        setContactStatus(msg.sender, false);
         updateStatus({ usernamecontact: msg.sender, read: false }, false);
         console.log('changed status to false');
       }

client/src/pages/Chat.tsx

@@ -98,7 +98,7 @@ function Chat() {
               messages={messages}
               setMessages={setMessages}
               currentContact={currentContact}
-              setStatus={setContactStatus}
+              setContactStatus={setContactStatus}
               updateStatus={updateContactStatus}
             />
           </div>