send notification to refresh contacts list on adding member to group

client/src/components/chat/ContactsList.tsx

@@ -2,6 +2,7 @@ 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';
 
 type ContactsListProps = {
   InitializeContact: (contact: ContactsProps) => void;
@@ -21,28 +22,35 @@ function ContactsList({
   updateContactStatus,
   setMessages,
 }: ContactsListProps) {
-  function contactHandler(contactsList: ContactsProps) {
-    setContactsList((prevContacts) => {
-      // Check if the contact already exists in the state
-      if (!prevContacts.some((c) => c.username === contactsList.username)) {
-        return [...prevContacts, contactsList];
-      }
-      return prevContacts;
-    });
-  }
-
-  const fetchContacts = async () => {
-    const contacts: ContactsProps[] = await getContactsList();
-    console.log('Fetching contacts list');
-    contacts.forEach(contactHandler);
-  };
-
   useEffect(() => {
     fetchContacts().catch((e) =>
       console.error('Failed to fetch contacts: ', e),
     );
+
+    if (!socket) return;
+
+    socket?.on('added to group', () => {
+      fetchContacts();
+    });
+
+    // Cleanup socket event listener
+    return () => {
+      socket?.off('added to group');
+    };
   }, []);
 
+  const fetchContacts = async () => {
+    const contacts: ContactsProps[] = await getContactsList();
+    console.log('Fetching contacts list');
+    setContactsList((prevContacts) => {
+      // Filter out contacts that are already in the list
+      const newContacts = contacts.filter(
+        (contact) => !prevContacts.some((c) => c.username === contact.username),
+      );
+      return [...prevContacts, ...newContacts];
+    });
+  };
+
   async function removeContact(contact_id: number) {
     try {
       const response = await axiosClient.delete(
@@ -76,14 +84,7 @@ function ContactsList({
       }}
       key={contact.conversation_id}
     >
-      {/*{contact.type == 'group' ? (*/}
-      {/*  <img className="w-6 invert m-1" src={GroupIco} alt="group icon" />*/}
-      {/*) : null}*/}
-
-      <span className="flex-shrink-0">
-        {/*user_id: {contact.user_id}, contact id: {contact.id}, group_id: {contact.group_id} username: */}
-        {contact.username}
-      </span>
+      <span className="flex-shrink-0">{contact.username}</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">

server/db/db.js

@@ -192,10 +192,11 @@ async function createGroup(user_id, groupname) {
     const result = await client.query(query, [groupname]);
     const group_id = result.rows[0].group_id;
 
-    await addMemberToGroup(group_id, user_id);
-    return group_id;
+    const contact_user_id = await addMemberToGroup(group_id, user_id);
+    return { group_id, contact_user_id };
   } catch (e) {
     console.error("Failed to create conversation ", e);
+    return null;
   }
 }
 
@@ -210,8 +211,10 @@ async function addMemberToGroup(conversation_id, user_id) {
     console.log(
       `Added user_id ${user_id} to conversation_id ${conversation_id}`,
     );
+    return user_id;
   } catch (e) {
     console.error("Failed to add member to group ", e);
+    return null;
   }
 }
 

server/server.js

@@ -340,10 +340,11 @@ app.post("/api/chat/groups/create", authorizeUser, async (req, res) => {
   if (!groupname) {
     return res.status(400).json({ message: "Groupname not provided" });
   }
-  const group_id = await createGroup(user_id, groupname);
+  const { group_id, contact_user_id } = await createGroup(user_id, groupname);
   if (!group_id) {
     return res.status(500).json({ message: "Failed to create group" });
   }
+  io.to(contact_user_id).emit("added to group");
   return res.status(200).json({
     message: `Successfully created group: ${groupname}`,
     group_id: group_id,
@@ -361,6 +362,8 @@ app.post("/api/chat/groups/addMember", async (req, res) => {
   }
   const result = await addMemberToGroupByUsername(group_id, username);
   if (result !== null) {
+    io.to(result).emit("added to group");
+    console.log("added to group: ", result);
     return res.status(200).json({ message: "Successfully added member" });
   }
   res.status(500).json({ message: "Failed to add member" });

server/socket/socket.js

@@ -65,17 +65,11 @@ function initializeSocket(io) {
     try {
       const conversations = await getConversationsForUser(socket.user_id);
       conversations.push(socket.user_id);
-      console.log("join conversations: ", conversations);
       socket.join(conversations);
     } catch (e) {
       console.error("(socket) Failed to get user conversations");
     }
 
-    socket.on("join socket", (msg) => {
-      socket.join(msg.conversation_id);
-      console.log("joinsocket: ", msg.conversation_id);
-    });
-
     socket.on("chat message", async (msg, callback) => {
       const { message, recipient, recipient_id, attachment_url } = msg;
       const sender = socket.username;