improved changing contact status sending api

client/src/api/contactsApi.tsx

@@ -16,7 +16,7 @@ export async function getContactsList(): Promise<ContactsProps[]> {
     const response = await axiosClient.get(
       'http://localhost:5173/api/chat/contacts',
     );
-    console.log();
+    console.log(response.data);
     return response.data;
   } catch (e) {
     console.error('Failed to fetch /api/chat/contacts: ', e);
@@ -30,6 +30,7 @@ export async function setContactStatus(contact: string, read: boolean) {
       { status: read },
       { withCredentials: true },
     );
+    console.log(response.data);
     return response.data;
   } catch (e) {
     console.error('Failed to set contact status: ', e);
@@ -40,6 +41,7 @@ export async function setContactStatus(contact: string, read: boolean) {
 export async function sendContact(contact: string) {
   try {
     const response = await axiosClient.post(`/api/chat/contact/${contact}`);
+    console.log(response.data);
     return response.data;
   } catch (e) {
     console.error('Failed to send contact: ', e);
@@ -55,6 +57,7 @@ export async function getMessages(
   }
   try {
     const response = await axiosClient.get(`/api/chat/messages/${contact}`);
+    console.log(response.data);
     return response.data;
   } catch (e) {
     console.error('Failed to get messages: ', e);

client/src/components/chat/ContactForm.tsx

@@ -29,6 +29,11 @@ function ContactForm({
     if (storedContact) {
       InitializeContact(storedContact);
     }
+
+    window.onscroll = () => {
+      window.scrollY === 0 && console.log('scrolled to top');
+      return () => window.onscroll == null;
+    };
   }, []);
 
   const submitContact: SubmitHandler<Input> = (data) => {

client/src/components/chat/ContactsList.tsx

@@ -13,14 +13,14 @@ type ContactsListProps = {
   setContactsList: React.Dispatch<React.SetStateAction<ContactsProps[]>>;
   contactsList: ContactsProps[];
   setCurrentContact: React.Dispatch<React.SetStateAction<string | null>>;
-  updateStatus: (contactObj: ContactsProps, read: true) => void;
+  updateContactStatus: (contactObj: ContactsProps, read: true) => void;
 };
 function ContactsList({
   InitializeContact,
   contactsList,
   setContactsList,
   setCurrentContact,
-  updateStatus,
+  updateContactStatus,
 }: ContactsListProps) {
   function contactHandler(contactsList: ContactsProps[]) {
     setContactsList((prevContacts) => [...prevContacts, ...contactsList]);
@@ -85,10 +85,10 @@ function ContactsList({
   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]
+        className="flex hover:bg-green-700 p-2 rounded cursor-pointer justify-between items-center min-h-[40px]"
         onClick={() => {
           InitializeContact(contact.usernamecontact);
-          updateStatus(contact, true);
+          updateContactStatus(contact, true);
         }}
         key={index}
       >

client/src/pages/Chat.tsx

@@ -48,15 +48,17 @@ function Chat() {
         c.usernamecontact === newContact ? { ...c, read: true } : c,
       ),
     );
-    setContactStatus(newContact, true);
 
-    console.log('Contact set up', newContact);
+    console.log('Current contact is now: ', newContact);
   }
 
   function updateContactStatus(contactObj: ContactObjProps, read: boolean) {
     setContactsList((prevContacts) =>
       prevContacts.map((contact) => {
         if (contact.usernamecontact === contactObj.usernamecontact) {
+          if (!contactObj.read) {
+            setContactStatus(contactObj.usernamecontact, true);
+          }
           return { ...contact, read: read };
         } else {
           return contact;
@@ -80,7 +82,7 @@ function Chat() {
             contactsList={contactsList}
             setContactsList={setContactsList}
             setCurrentContact={setCurrentContact}
-            updateStatus={updateContactStatus}
+            updateContactStatus={updateContactStatus}
           />
           <hr />
           <UserProfile />