adjusted client to contacts object

client/src/components/chat/ContactForm.tsx

@@ -7,7 +7,7 @@ type Input = {
 };
 
 type ContactFormProps = {
-  InitializeContact: (contact: string) => void;
+  InitializeContact: (contact: ContactsProps) => void;
   setContactsList: React.Dispatch<React.SetStateAction<ContactsProps[]>>;
 };
 

client/src/components/chat/ContactProfile.tsx

@@ -1,18 +1,27 @@
 import profile from '../../../assets/profile.svg';
 import CreateGroupButton from './CreateGroupButton.tsx';
+import AddGroupMember from './AddGroupMember.tsx';
+import { ContactsProps } from '../../pages/Chat.tsx';
 
-function ContactProfile({ contact }: { contact: string | null }) {
+type ContactProfileProps = {
+  username: ContactsProps | null;
+};
+
+function ContactProfile({ username }: ContactProfileProps) {
   return (
     <div className="flex items-center">
       <div className="flex items-center p-2">
         <img className="w-4 mr-2 invert" src={profile} alt="profile img" />
-        <p>{contact ? contact : null}</p>
+        <p>{username ? username.username : null}</p>
       </div>
       <div className="flex-grow"></div>
 
       <div>
         <CreateGroupButton />
       </div>
+      <div>
+        <AddGroupMember />
+      </div>
     </div>
   );
 }

client/src/components/chat/ContactsList.tsx

@@ -1,17 +1,16 @@
-import { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { getContactsList } from '../../api/contactsApi.tsx';
-import { ChatMessages } from '../../pages/Chat.tsx';
-import { ContactsProps } from '../../pages/Chat.tsx';
+import { ChatMessages, ContactsProps } from '../../pages/Chat.tsx';
 import { axiosClient } from '../../App.tsx';
 
 type ContactsListProps = {
-  InitializeContact: (contact: string) => void;
+  InitializeContact: (contact: ContactsProps) => void;
   setContactsList: React.Dispatch<React.SetStateAction<ContactsProps[]>>;
   contactsList: ContactsProps[];
-  setCurrentContact: React.Dispatch<React.SetStateAction<string | null>>;
-  updateContactStatus: (contactObj: ContactsProps, read: true) => void;
+  setCurrentContact: React.Dispatch<React.SetStateAction<ContactsProps | null>>;
+  updateContactStatus: (contactObj: ContactsProps, read: boolean) => void;
   setMessages: React.Dispatch<React.SetStateAction<ChatMessages[]>>;
-  currentContact: string | null;
+  currentContact: ContactsProps | null;
 };
 
 function ContactsList({
@@ -60,6 +59,7 @@ function ContactsList({
       prevContacts.filter((contact) => contact.id !== contact_id),
     );
   }
+
   const sortedContacts = [...contactsList].sort((a, b) => {
     if (a.read !== b.read) {
       return a.read ? 1 : -1;
@@ -71,7 +71,7 @@ function ContactsList({
     <li
       className="flex hover:bg-green-700 p-2 rounded cursor-pointer justify-between items-center min-h-[40px]"
       onClick={() => {
-        InitializeContact(contact.username);
+        InitializeContact(contact);
         updateContactStatus(contact, true);
       }}
       key={contact.conversation_id}
@@ -100,6 +100,7 @@ function ContactsList({
       </button>
     </li>
   ));
+
   return (
     <div className="flex-grow overflow-y-auto w-64">
       <ul className="items-center text-center ml-1 mt-2 flex-grow-1">

client/src/components/chat/MessageForm.tsx

@@ -4,7 +4,7 @@ import type { KeyboardEventHandler } from 'react';
 import { socket } from '../../socket/socket.tsx';
 import { customAlphabet } from 'nanoid';
 import { useOutletContext } from 'react-router-dom';
-import { ChatMessages } from '../../pages/Chat.tsx';
+import { ChatMessages, ContactsProps } from '../../pages/Chat.tsx';
 import { axiosClient } from '../../App.tsx';
 
 const nanoid = customAlphabet('1234567890', 5);
@@ -15,12 +15,12 @@ type Input = {
 };
 
 type MessageFormProps = {
-  contact: string;
+  contactUsername: ContactsProps | null;
   setMessages: React.Dispatch<React.SetStateAction<ChatMessages[]>>;
   messages: ChatMessages[];
 };
 
-const MessageForm = ({ contact, setMessages }: MessageFormProps) => {
+const MessageForm = ({ contactUsername, setMessages }: MessageFormProps) => {
   const { username }: { username: string } = useOutletContext();
   const [file, setFile] = useState<File | null>(null);
   const [isUploading, setIsUploading] = useState(false);
@@ -100,7 +100,7 @@ const MessageForm = ({ contact, setMessages }: MessageFormProps) => {
     const tempMessage: ChatMessages = {
       sender: username,
       message: data.message.trim(),
-      recipient: contact,
+      recipient: contactUsername,
       message_id: 0, // Set to 0 because of key={msg.message_id || msg.tempId} in messages list
       pending: true,
       tempId: tempId,
@@ -115,7 +115,7 @@ const MessageForm = ({ contact, setMessages }: MessageFormProps) => {
       'chat message',
       {
         message: data.message.trim(),
-        recipient: contact,
+        recipient: contactUsername,
         tempId: tempId,
         attachment_url: attachmentUrl,
       },
@@ -151,7 +151,7 @@ const MessageForm = ({ contact, setMessages }: MessageFormProps) => {
 
     console.log('sent message: ', {
       message: data.message.trim(),
-      recipient: contact,
+      recipient: contactUsername,
       tempId: tempId,
       attachment_url: attachmentUrl,
     });
@@ -197,8 +197,8 @@ const MessageForm = ({ contact, setMessages }: MessageFormProps) => {
               }}
               className={`w-full overflow-y-hidden resize-none bg-green-50 text-black rounded-md p-2 min-h-[40px] max-h-96
               ${isOverLimit ? 'border-2 border-red-500' : isNearLimit ? 'border-2 border-yellow-500' : ''} mx-auto`}
-              autoFocus={!!contact}
-              disabled={!contact}
+              autoFocus={!!contactUsername}
+              disabled={!contactUsername}
               placeholder="Enter message"
               onKeyDown={handleKeyPress}
               rows={1}

client/src/components/chat/MessagesArea.tsx

@@ -10,7 +10,7 @@ import { ContactsProps } from '../../pages/Chat.tsx';
 type MessagesAreaProps = {
   messages: ChatMessages[];
   setMessages: React.Dispatch<React.SetStateAction<ChatMessages[]>>;
-  currentContact: string | null;
+  currentContact: ContactsProps | null;
   setContactStatus: (contact: string, read: boolean) => void;
   updateContactStatus: (contact: ContactsProps, read: boolean) => void;
   messageHandler: (msg: ChatMessages) => void;

client/src/pages/Chat.tsx

@@ -27,11 +27,14 @@ export type ContactsProps = {
   user_id: number;
   id: number;
   conversation_id: number;
+  type: 'direct' | 'group';
 };
 
 function Chat() {
   const [contactsList, setContactsList] = useState<ContactsProps[]>([]);
-  const [currentContact, setCurrentContact] = useState<string | null>(null);
+  const [currentContact, setCurrentContact] = useState<ContactsProps | null>(
+    null,
+  );
   const [cursor, setCursor] = useState<number>(0);
   const [messages, setMessages] = useState<ChatMessages[]>([]);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -43,22 +46,30 @@ function Chat() {
     }
     const storedContact = localStorage.getItem('contact');
     if (storedContact) {
-      InitializeContact(storedContact);
+      try {
+        const parsedContact = JSON.parse(storedContact);
+        if (parsedContact) {
+          InitializeContact(parsedContact);
+        }
+      } catch (error) {
+        console.error('Failed to parse stored contact:', error);
+        localStorage.removeItem('contact');
+      }
     }
   }, []);
 
-  function InitializeContact(newContact: string) {
+  function InitializeContact(newContact: ContactsProps) {
     setMessages([]); // Clear messages from previous contact
-    localStorage.setItem('contact', newContact); // Set current contact in localstorage
+    localStorage.setItem('contact', JSON.stringify(newContact)); // Set current contact in localstorage
     setCurrentContact(newContact); // Set state for current user (used in contactProfile.tsx and for filtering messages)
     console.log('Initialized contact');
 
-    fetchMessages(newContact).catch((e) =>
+    fetchMessages(newContact.username).catch((e) =>
       console.error('Failed to fetch messages: ', e),
     );
     setContactsList((prevContacts) =>
       prevContacts.map((c) =>
-        c.username === newContact ? { ...c, read: true } : c,
+        c.username === newContact.username ? { ...c, read: true } : c,
       ),
     );
 
@@ -152,7 +163,7 @@ function Chat() {
         {/*Chat area */}
         <div className="text-white bg-[#121212] flex flex-col h-screen w-full">
           <div className="flex-shrink-0">
-            <ContactProfile contact={currentContact} />
+            <ContactProfile username={currentContact} />
           </div>
           <hr className="flex-shrink-0" />
           <div className="flex-grow overflow-x-hidden overflow-y-auto m-2">
@@ -169,9 +180,9 @@ function Chat() {
             />
           </div>
           <div className="flex-shrink-0 mb-2 mt-0">
-            {currentContact && currentContact.length >= 4 ? (
+            {currentContact && currentContact.username.length >= 4 ? (
               <MessageForm
-                contact={currentContact}
+                contactUsername={currentContact}
                 setMessages={setMessages}
                 messages={messages}
               />