instant adding new contact to list

client/src/components/chat/ContactForm.tsx

@@ -5,11 +5,22 @@ type Input = {
   contact: string;
 };
 
-type InitializeContactsProps = {
-  InitializeContact: (contact: string) => void;
+type ContactsProps = {
+  usernamecontact: string;
+  read: boolean;
 };
 
-function ContactForm({ InitializeContact }: InitializeContactsProps) {
+type InitializeContactsProps = {
+  InitializeContact: (contact: string) => void;
+  setContactsList: React.Dispatch<React.SetStateAction<ContactsProps[]>>;
+  contactsList: ContactsProps[];
+};
+
+function ContactForm({
+  InitializeContact,
+  setContactsList,
+  contactsList,
+}: InitializeContactsProps) {
   const { register, handleSubmit, reset } = useForm<Input>();
 
   useEffect(() => {
@@ -22,6 +33,10 @@ function ContactForm({ InitializeContact }: InitializeContactsProps) {
   const submitContact: SubmitHandler<Input> = (data) => {
     const contact = data.contact.toLowerCase().trim();
     InitializeContact(contact);
+    setContactsList([
+      ...contactsList,
+      { usernamecontact: contact, read: true },
+    ]);
     reset({ contact: '' });
   };
 

client/src/components/chat/ContactsList.tsx

@@ -36,6 +36,7 @@ function ContactsList({
     // socket.on('contact', (contactInf) => {
     //   console.log('received contact: ', contactInf);
     // });
+
     return () => {
       if (!socket) {
         console.error('Socket not initialized');

client/src/pages/Chat.tsx

@@ -51,7 +51,11 @@ function Chat() {
         {/*Sidebar*/}
         <div className="h-screen bg-[#1E1E1E] flex flex-col">
           {/*Contact input*/}
-          <ContactForm InitializeContact={InitializeContact} />
+          <ContactForm
+            contactsList={contactsList}
+            setContactsList={setContactsList}
+            InitializeContact={InitializeContact}
+          />
           {/*Contact list*/}
           <ContactsList
             InitializeContact={InitializeContact}

server/socket/socket.js

@@ -87,17 +87,14 @@ function initializeSocket(io) {
 
     socket.on("add contact", (contactInf) => {
       let { contact, read } = contactInf;
-      if (contact) {
+      if (contact.trim()) {
         if (contact.length < 4 || contact.length > 20) {
+          console.log("blocked");
           return;
         }
       }
-      if (contact) {
-        contact = contact.trim().toLowerCase();
-      }
-
-      insertContact(username, contact, read);
-      io.to(username).emit("contact", [{ contact, read }]);
+      insertContact(username, contact.trim().toLowerCase(), read);
+      io.to(username).emit("contact", { contact, read });
       console.log("(socket) sent on 'contact' socket: ", { contact, read });
     });