contact deletion is now handled by socket, added left group socket to delete user from participants bar

client/src/components/chat/ContactsList.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { getContactsList } from '../../api/contactsApi.tsx';
 import { ChatMessages, ContactsProps } from '../../pages/Chat.tsx';
-import { axiosClient } from '../../App.tsx';
 import { socket } from '../../socket/socket.tsx';
 import GroupIcon from '../../../assets/group.svg';
 import {
@@ -38,7 +37,9 @@ function ContactsList({
     fetchContacts().catch((e) =>
       console.error('Failed to fetch contacts: ', e),
     );
+  }, []);
 
+  useEffect(() => {
     if (!socket) return;
 
     socket?.on('added to group', () => {
@@ -49,7 +50,7 @@ function ContactsList({
     return () => {
       socket?.off('added to group');
     };
-  }, []);
+  }, [contactsList.length]);
 
   const fetchContacts = async () => {
     const contacts: ContactsProps[] = await getContactsList();
@@ -62,18 +63,26 @@ function ContactsList({
     });
   };
 
-  async function removeContact(contact_id: number, conversation_id: number) {
+  async function removeContact(contactId: number, conversation_id: number) {
     try {
-      console.log('delete contact: ', contact_id, conversation_id);
-      const response = await axiosClient.delete(
-        `/api/chat/contacts/${contact_id}/${conversation_id}`,
-      );
-      console.log(response.data);
-      setCurrentContact(null);
-      localStorage.removeItem('contact');
-      setMessages([]);
-      setContactsList((prevContacts) =>
-        prevContacts.filter((contact) => contact.id !== contact_id),
+      console.log('delete contact, conversation_id: ', conversation_id);
+
+      socket?.emit(
+        'delete contact',
+        conversation_id,
+        (response: { status: string; message: string }) => {
+          if (response.status == 'ok') {
+            console.log('(socket) response: ', response);
+            setCurrentContact(null);
+            localStorage.removeItem('contact');
+            setMessages([]);
+            setContactsList((prevContacts) =>
+              prevContacts.filter((contact) => contact.id !== contactId),
+            );
+          } else {
+            console.error(response.message);
+          }
+        },
       );
     } catch (e) {
       console.error('Failed to delete contact: ', e);

client/src/components/chat/MessageForm.tsx

@@ -116,9 +116,6 @@ const MessageForm = ({ contact }: MessageFormProps) => {
     }
   };
 
-  // Sending message
-  // Inside the MessageForm component
-
   const submitMessage: SubmitHandler<Input> = async (data) => {
     if ((!data.message && files.length === 0) || isSending) return;
     setIsSending(true);

client/src/components/chat/MessagesArea.tsx

@@ -6,7 +6,6 @@ import LoadingWheel from './LoadingWheel.tsx';
 import { ChatMessages } from '../../pages/Chat.tsx';
 import { ContactsProps } from '../../pages/Chat.tsx';
 import { Trash2 } from 'lucide-react';
-import { axiosClient } from '../../App.tsx';
 import AttachmentPreview from './AttachmentPreview.tsx';
 
 type MessagesAreaProps = {

client/src/components/chat/ParticipantsBar.tsx

@@ -58,11 +58,21 @@ function ParticipantsBar({ contact }: { contact: ContactsProps | null }) {
       },
     );
 
-    // Cleanup function to remove event listener
+    socket.on(
+      'left group',
+      (msg: { user_id: number; conversation_id: number }) => {
+        const { user_id, conversation_id } = msg;
+        console.log('user left group id: ', user_id, conversation_id);
+        setParticipants((prevMembers) =>
+          prevMembers.filter((member) => member.user_id !== user_id),
+        );
+      },
+    );
+
     return () => {
       socket?.off('added to group');
     };
-  }, [contact, participants]); // Add participants to dependency array
+  }, [contact, participants]);
 
   const ParticipantsList = participants?.map(
     (participant: ParticipantsProps) => (

server/db/db.js

@@ -534,7 +534,6 @@ async function getContacts(user_id) {
       type: row.type,
       read: row.read,
     }));
-    console.log("Get contacts for: ", user_id, contacts);
     return contacts;
   } catch (e) {
     console.error("Failed to get contacts:", e);
@@ -542,7 +541,7 @@ async function getContacts(user_id) {
   }
 }
 
-async function deleteContact(user_id, contact_id, conversation_id) {
+async function deleteContact(user_id, conversation_id) {
   // Check if the conversation is a group
   const checkConversationTypeQuery = `
     SELECT conversation_type FROM Conversations WHERE conversation_id = $1;
@@ -558,7 +557,10 @@ async function deleteContact(user_id, contact_id, conversation_id) {
         "No conversation found with conversation_id: ",
         conversation_id,
       );
-      return;
+      return {
+        message: "No conversation found with conversation_id: ",
+        conversation_id,
+      };
     }
 
     const conversationType = conversationTypeResult.rows[0].conversation_type;
@@ -582,6 +584,9 @@ async function deleteContact(user_id, contact_id, conversation_id) {
           conversation_id,
           user_id,
         });
+        return {
+          message: `No matching contact found with conversation id: ${conversation_id}, user id: ${user_id}`,
+        };
       }
 
       const removeConversationResult = await client.query(
@@ -593,17 +598,26 @@ async function deleteContact(user_id, contact_id, conversation_id) {
           conversation_id,
           user_id,
         });
+        return {
+          message: `No matching membership found with conversation id: ${conversation_id} , user id: ${user_id}`,
+        };
       } else {
         console.log("Successfully removed user from group for: ", user_id);
       }
     } else {
       // For direct conversations, proceed with deleting the contact
       const query = `
-        DELETE FROM Contacts WHERE (user_id = $1 AND contact_id = $2);
+        DELETE FROM Contacts WHERE (user_id = $1 AND conversation_id = $2);
       `;
-      const result = await client.query(query, [user_id, contact_id]);
+      const result = await client.query(query, [user_id, conversation_id]);
       if (result.rowCount === 0) {
-        console.log("No matching contact found with:", { user_id, contact_id });
+        console.log("No matching contact found with:", {
+          user_id,
+          conversation_id,
+        });
+        return {
+          message: `No matching contact found with user id: ${user_id}, conversation id: ${conversation_id}`,
+        };
       } else {
         console.log("Successfully deleted contact for: ", user_id);
       }

server/socket/socket.js

@@ -181,6 +181,23 @@ function initializeSocket(io) {
       }
     });
 
+    socket.on("delete contact", async (conversation_id, callback) => {
+      console.log(
+        "(socket) delete contact, conversation_id: ",
+        conversation_id,
+      );
+      const user_id = socket.user_id;
+      if (!conversation_id) {
+        callback({ status: "error", message: "No conversation id provided" });
+      }
+      const result = await deleteContact(user_id, conversation_id);
+
+      if (result?.message) {
+        callback({ status: "error", message: result.message });
+      }
+      callback({ status: "ok", message: "Successfully deleted contact" });
+      io.to(conversation_id).emit("left group", { conversation_id, user_id });
+    });
     socket.on("disconnect", (reason) => {
       console.log("(socket)", socket.id, " disconnected due to: ", reason);
     });