removing contact is working

client/src/components/chat/ContactProfile.tsx

@@ -1,7 +1,7 @@
 import zdjecie from '../../../assets/walter.png';
 
 type Contact = {
-  contact: string;
+  contact: string | null;
 };
 function ContactProfile({ contact }: Contact) {
   return (
@@ -17,7 +17,7 @@ function ContactProfile({ contact }: Contact) {
         {/*  />*/}
         {/*</div>*/}
         <div className="text-center text-gray-200">
-          <p>{contact}</p>
+          <p>{contact ? contact : null}</p>
         </div>
       </div>
     </>

client/src/components/chat/ContactsList.tsx

@@ -1,6 +1,7 @@
 import { sendRequestContactsList, socket } from '../../socket/socket.tsx';
 import { useEffect } from 'react';
 import axios from 'axios';
+import Cookies from 'js-cookie';
 
 type ContactsProps = {
   usernamecontact: string;
@@ -10,13 +11,15 @@ type ContactsProps = {
 type ContactsListProps = {
   InitializeContact: (contact: string) => void;
   setContactsList: React.Dispatch<React.SetStateAction<ContactsProps[]>>;
-  contactsList: ContactsProps[]; // Changed from string[] to ContactsProps[]
+  contactsList: ContactsProps[];
+  setCurrentContact: React.Dispatch<React.SetStateAction<string | null>>;
 };
 
 function ContactsList({
   InitializeContact,
   contactsList,
   setContactsList,
+  setCurrentContact,
 }: ContactsListProps) {
   function contactHandler(contactsList: ContactsProps[]) {
     setContactsList((prevContacts) => [...prevContacts, ...contactsList]);
@@ -75,6 +78,8 @@ function ContactsList({
         onClick={(e) => {
           e.stopPropagation();
           deleteContact(contact.usernamecontact);
+          setCurrentContact(null);
+          localStorage.removeItem('contact');
         }}
         className="ml-auto mr-2 text-gray-400 w-6 h-6 rounded-full hover:text-red-500 flex items-center justify-center"
       >

client/src/pages/Chat.tsx

@@ -26,7 +26,7 @@ type ContactsProps = {
 
 function Chat() {
   const [contactsList, setContactsList] = useState<ContactsProps[]>([]);
-  const [currentContact, setCurrentContact] = useState<string>('');
+  const [currentContact, setCurrentContact] = useState<string | null>('');
   const [messages, setMessages] = useState<ChatMessages[]>([]);
 
   useEffect(() => {
@@ -61,6 +61,7 @@ function Chat() {
             InitializeContact={InitializeContact}
             contactsList={contactsList}
             setContactsList={setContactsList}
+            setCurrentContact={setCurrentContact}
           />
           <hr />
           <UserProfile />