added InitializeContact function

client/src/components/chat/ContactForm.tsx

@@ -1,45 +1,27 @@
 import { useForm, SubmitHandler } from 'react-hook-form';
-import {
-  sendContact,
-  sendRequestHistoricalMessages,
-} from '../../socket/socket.tsx';
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { useEffect } from 'react';
 
 type Input = {
   contact: string;
 };
-type ChatMessages = {
-  sender: string;
-  message: string;
-  recipient: string;
-  message_id: number;
-  timestamp: string;
-};
-interface ContactInputProps {
-  contact: string;
-  setContact: Dispatch<SetStateAction<string>>;
-  setMessages: React.Dispatch<React.SetStateAction<ChatMessages[]>>;
-}
 
-function ContactForm({ contact, setContact, setMessages }: ContactInputProps) {
+type InitializeContactsProps = {
+  InitializeContact: (contact: string) => void;
+};
+
+function ContactForm({ InitializeContact }: InitializeContactsProps) {
   const { register, handleSubmit, reset } = useForm<Input>();
 
-  let storedContact: string | null = '';
   useEffect(() => {
-    storedContact = storedContact = localStorage.getItem('contact');
+    const storedContact = localStorage.getItem('contact');
     if (storedContact) {
-      setContact(storedContact);
-      sendRequestHistoricalMessages(storedContact);
+      InitializeContact(storedContact);
     }
-  }, [setContact]);
+  }, []);
 
   const submitContact: SubmitHandler<Input> = (data) => {
-    setMessages([]);
-    sendRequestHistoricalMessages(data.contact);
-    localStorage.setItem('contact', data.contact);
-    setContact(data.contact);
-    sendContact({ contact: data.contact, read: true });
-    console.log('Contact submitted:', data.contact);
+    const contact = data.contact;
+    InitializeContact(contact);
     reset({ contact: '' });
   };
 
@@ -50,7 +32,6 @@ function ContactForm({ contact, setContact, setMessages }: ContactInputProps) {
           <input
             className="text-black bg-green-50 pl-2 shadow-lg rounded-md h-8 mb-2 mt-2"
             type="text"
-            autoFocus={!!contact}
             placeholder="Enter contact"
             {...register('contact', {
               // valid username length (validated on signup)

client/src/components/chat/ContactsList.tsx

@@ -1,22 +1,22 @@
 import { sendRequestContactsList, socket } from '../../socket/socket.tsx';
 import { useEffect, useState } from 'react';
-type ContactList = {
+type ContactsList = {
   username: string;
   usernamecontact: string;
   read: boolean;
 };
 
 function ContactsList() {
-  const [contacts, setContacts] = useState<ContactList[]>([]);
+  const [ContactsList, setContactsList] = useState<ContactsList[]>([]);
   useEffect(() => {
     if (!socket) {
       console.error('Socket not initialized');
       return;
     }
     sendRequestContactsList();
-    socket.on('get contacts list', (contactsList: ContactList[]) => {
+    socket.on('get contacts list', (contactsList: ContactsList[]) => {
       console.log('Received contacts list: ', contactsList);
-      setContacts(contactsList);
+      setContactsList(contactsList);
     });
 
     return () => {
@@ -29,7 +29,7 @@ function ContactsList() {
     };
   }, []);
 
-  const contactsList = contacts.map((contacts: ContactList, index) => (
+  const contactsList = ContactsList.map((contacts: ContactsList, index) => (
     <li className="hover:bg-green-700 p-2 rounded cursor-pointer" key={index}>
       {contacts.usernamecontact}
     </li>

client/src/pages/Chat.tsx

@@ -3,9 +3,13 @@ import ContactProfile from '../components/chat/ContactProfile.tsx';
 import UserProfile from '../components/chat/UserProfile.tsx';
 import ContactForm from '../components/chat/ContactForm.tsx';
 import MessagesArea from '../components/chat/MessagesArea.tsx';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import ContactsList from '../components/chat/ContactsList.tsx';
-import { initializeSocket } from '../socket/socket.tsx';
+import {
+  initializeSocket,
+  sendContact,
+  sendRequestHistoricalMessages,
+} from '../socket/socket.tsx';
 import Cookies from 'js-cookie';
 
 type ChatMessages = {
@@ -17,24 +21,32 @@ type ChatMessages = {
 };
 
 function Chat() {
-  const token = Cookies.get('token');
-  if (token) {
-    initializeSocket(token);
-  }
-
   const [contact, setContact] = useState<string>('');
   const [messages, setMessages] = useState<ChatMessages[]>([]);
+
+  useEffect(() => {
+    const token = Cookies.get('token');
+    if (token) {
+      initializeSocket(token);
+    }
+  }, []);
+
+  function InitializeContact(newContact: string) {
+    setMessages([]);
+    sendRequestHistoricalMessages(newContact);
+    localStorage.setItem('contact', newContact);
+    setContact(newContact);
+    sendContact({ contact: newContact, read: true });
+    console.log('Contact submitted:', newContact);
+  }
+
   return (
     <>
       <div className="text-white flex h-screen">
         {/*Sidebar*/}
         <div className="h-screen bg-[#1E1E1E] flex flex-col">
           {/*Contact input*/}
-          <ContactForm
-            contact={contact}
-            setContact={setContact}
-            setMessages={setMessages}
-          />
+          <ContactForm InitializeContact={InitializeContact} />
           {/*Contact list*/}
           <ContactsList />
           <hr />