join room on initialize contact

client/assets/group.svg

@@ -1,18 +1,10 @@
-<?xml version="1.0" ?>
-<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <style>.cls-1{fill:#101820;}</style>
-    </defs>
-    <title/>
-    <g data-name="Layer 20" id="Layer_20">
-        <path class="cls-1" d="M16,22a6,6,0,1,1,6-6A6,6,0,0,1,16,22Zm0-10a4,4,0,1,0,4,4A4,4,0,0,0,16,12Z"/>
-        <path class="cls-1"
-              d="M21,31H11a4,4,0,0,1-4-4V24.45a1,1,0,0,1,.63-.92l3.64-1.46A1,1,0,1,1,12,23.93l-3,1.2V27a2,2,0,0,0,2,2H21a2,2,0,0,0,2-2V25.13l-3-1.2a1,1,0,0,1,.74-1.86l3.64,1.46a1,1,0,0,1,.63.92V27A4,4,0,0,1,21,31Z"/>
-        <path class="cls-1" d="M9,11a5,5,0,1,1,5-5A5,5,0,0,1,9,11ZM9,3a3,3,0,1,0,3,3A3,3,0,0,0,9,3Z"/>
-        <path class="cls-1"
-              d="M8,19.39H5a4,4,0,0,1-4-4V13.64a1,1,0,0,1,.63-.93l3.19-1.25A1,1,0,0,1,6.11,12a1,1,0,0,1-.56,1.3L3,14.32v1.07a2,2,0,0,0,2,2H8a1,1,0,0,1,0,2Z"/>
-        <path class="cls-1" d="M23,11a5,5,0,1,1,5-5A5,5,0,0,1,23,11Zm0-8a3,3,0,1,0,3,3A3,3,0,0,0,23,3Z"/>
-        <path class="cls-1"
-              d="M27,19.39H24a1,1,0,0,1,0-2h3a2,2,0,0,0,2-2V14.32l-2.55-1a1,1,0,0,1-.56-1.3,1,1,0,0,1,1.29-.57l3.19,1.25a1,1,0,0,1,.63.93v1.75A4,4,0,0,1,27,19.39Z"/>
-    </g>
-</svg>
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'
+        'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
+<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M9,9c0-1.7,1.3-3,3-3s3,1.3,3,3c0,1.7-1.3,3-3,3S9,10.7,9,9z M12,14c-4.6,0-6,3.3-6,3.3V19h12v-1.7C18,17.3,16.6,14,12,14z   "/></g>
+    <g><g><circle cx="18.5" cy="8.5" r="2.5"/></g>
+        <g><path d="M18.5,13c-1.2,0-2.1,0.3-2.8,0.8c2.3,1.1,3.2,3,3.2,3.2l0,0.1H23v-1.3C23,15.7,21.9,13,18.5,13z"/></g></g>
+    <g><g><circle cx="18.5" cy="8.5" r="2.5"/></g>
+        <g><path d="M18.5,13c-1.2,0-2.1,0.3-2.8,0.8c2.3,1.1,3.2,3,3.2,3.2l0,0.1H23v-1.3C23,15.7,21.9,13,18.5,13z"/></g></g>
+    <g><g><circle cx="5.5" cy="8.5" r="2.5"/></g>
+        <g><path d="M5.5,13c1.2,0,2.1,0.3,2.8,0.8c-2.3,1.1-3.2,3-3.2,3.2l0,0.1H1v-1.3C1,15.7,2.1,13,5.5,13z"/></g></g></svg>

client/src/components/chat/AddGroupMember.tsx

@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { axiosClient } from '../../App.tsx';
 import { ContactsProps } from '../../pages/Chat.tsx';
+import { socket } from '../../socket/socket.tsx';
 
 type Inputs = {
   username: string;
@@ -16,13 +17,12 @@ interface AddGroupMemberProps {
 function AddGroupMember({ contact }: AddGroupMemberProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const modalRef = useRef<HTMLDialogElement | null>(null);
-
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm<Inputs>();
-
+  if (!socket) return;
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
     try {
       setIsLoading(true);
@@ -32,6 +32,7 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
       });
       console.log(response.data);
       setIsLoading(false);
+      socket?.emit('added to group', { group_id: contact?.conversation_id });
       if (modalRef.current) {
         modalRef.current.close();
       }

client/src/components/chat/ContactsList.tsx

@@ -2,7 +2,8 @@ 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 { joinRoom, socket } from '../../socket/socket.tsx';
+import GroupIcon from '../../../assets/group.svg';
 
 type ContactsListProps = {
   InitializeContact: (contact: ContactsProps) => void;
@@ -85,7 +86,9 @@ function ContactsList({
       key={contact.conversation_id}
     >
       <span className="flex-shrink-0">{contact.username}</span>
-
+      {contact.type === 'group' ? (
+        <img src={GroupIcon} alt="Group icon" className="ml-2 invert w-5" />
+      ) : null}
       <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 ? '' : '•'}

client/src/components/chat/MessagesArea.tsx

@@ -4,7 +4,6 @@ import { useOutletContext } from 'react-router-dom';
 import { sendContact } from '../../api/contactsApi.tsx';
 import LoadingWheel from './LoadingWheel.tsx';
 import { ChatMessages } from '../../pages/Chat.tsx';
-import FileBox from './FileBox.tsx';
 import { ContactsProps } from '../../pages/Chat.tsx';
 import { Trash2 } from 'lucide-react';
 import { axiosClient } from '../../App.tsx';
@@ -14,13 +13,11 @@ type MessagesAreaProps = {
   messages: ChatMessages[];
   setMessages: React.Dispatch<React.SetStateAction<ChatMessages[]>>;
   currentContact: ContactsProps | null;
-  setContactStatus: (contact: string, read: boolean) => void;
   updateContactStatus: (contact: ContactsProps, read: boolean) => void;
   messageHandler: (msg: ChatMessages) => void;
   setContactsList: React.Dispatch<React.SetStateAction<ContactsProps[]>>;
   fetchPreviousMessages: (contact: number | null) => Promise<void>;
   errorMessage: string | null;
-  hasMoreMessages: boolean;
 };
 
 function MessagesArea({
@@ -32,7 +29,6 @@ function MessagesArea({
   fetchPreviousMessages,
   errorMessage,
   setMessages,
-  hasMoreMessages,
 }: MessagesAreaProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const { username }: { username: string } = useOutletContext();
@@ -113,6 +109,7 @@ function MessagesArea({
                 read: false,
                 id: msg.message_id,
                 user_id: msg.sender_id,
+                conversation_id: msg.conversation_id,
               },
             ];
           }

client/src/pages/Chat.tsx

@@ -5,7 +5,7 @@ import ContactForm from '../components/chat/ContactForm.tsx';
 import MessagesArea from '../components/chat/MessagesArea.tsx';
 import { useEffect, useState } from 'react';
 import ContactsList from '../components/chat/ContactsList.tsx';
-import { initializeSocket } from '../socket/socket.tsx';
+import { initializeSocket, joinRoom } from '../socket/socket.tsx';
 import Cookies from 'js-cookie';
 import { getMessages, setContactStatus } from '../api/contactsApi.tsx';
 
@@ -63,8 +63,8 @@ function Chat() {
     setMessages([]); // Clear messages from previous contact
     localStorage.setItem('contact', JSON.stringify(newContact)); // Set current contact in localstorage
     setCurrentContact(newContact);
-    console.log('Initialized contact');
-
+    console.log('Initialized contact: ', newContact);
+    joinRoom(newContact.conversation_id);
     fetchMessages(newContact.conversation_id).catch((e) =>
       console.error('Failed to fetch messages: ', e),
     );
@@ -79,20 +79,30 @@ function Chat() {
 
   const fetchMessages = async (conversation_id: number) => {
     console.log('Fetching messages for: ', conversation_id);
-    await getMessages(conversation_id)
-      .then((messages) => {
-        setCursor(() => {
-          return Math.min(
-            ...messages.messages.map((message) => message.message_id),
-          );
-        });
+    try {
+      const messages = await getMessages(conversation_id);
+      if (messages.messages.length < 50) {
+        setHasMoreMessages(false);
+        setErrorMessage('No more messages found');
+      }
 
-        messages.messages.forEach(messageHandler);
-      })
-      .catch((error) => setErrorMessage(error.response.data.message));
+      setCursor(() => {
+        return Math.min(
+          ...messages.messages.map((message) => message.message_id),
+        );
+      });
+
+      messages.messages.forEach(messageHandler);
+    } catch (e) {
+      setErrorMessage(e.response.data.message);
+    }
   };
 
   const fetchPreviousMessages = async (contact: number | null) => {
+    if (!hasMoreMessages) {
+      return;
+    }
+
     console.log(
       'Fetching messages for: ',
       contact,
@@ -102,13 +112,8 @@ function Chat() {
       hasMoreMessages,
     );
 
-    if (!hasMoreMessages) {
-      return;
-    }
-
     try {
       const messages = await getMessages(contact, cursor, 50);
-      console.log('fetchpreviousmessages: ', messages.messages.length);
       if (messages.messages.length < 50) {
         setHasMoreMessages(false);
         setErrorMessage('No more messages found');

client/src/socket/socket.tsx

@@ -44,6 +44,12 @@ function sendMessage(message: string, recipient: string, tempId: string) {
   });
 }
 
+function joinRoom(conversation_id: number) {
+  if (!socket) return;
+  socket.emit('join room', conversation_id);
+  console.log('sent on join room: ', conversation_id);
+}
+
 async function createRoom(
   roomName: string,
 ): Promise<{ status: string } | undefined> {
@@ -59,4 +65,4 @@ async function createRoom(
   });
 }
 
-export { initializeSocket, sendMessage, createRoom, socket };
+export { initializeSocket, sendMessage, createRoom, joinRoom, socket };

server/socket/socket.js

@@ -62,14 +62,20 @@ function initializeSocket(io) {
       return;
     }
 
+    let conversations = [];
     try {
-      const conversations = await getConversationsForUser(socket.user_id);
+      conversations = await getConversationsForUser(socket.user_id);
       conversations.push(socket.user_id);
       socket.join(conversations);
     } catch (e) {
       console.error("(socket) Failed to get user conversations");
     }
 
+    socket.on("join room", (msg) => {
+      console.log("Join room for: ", username, "room: ", msg);
+      socket.join(msg);
+    });
+
     socket.on("chat message", async (msg, callback) => {
       const { message, recipient, recipient_id, attachment_urls } = msg;
       const sender = socket.username;