added new contact update feature

client/src/App.js

@@ -4,7 +4,7 @@ import ChatPage from './ChatPage';
 import LoginPage from './LoginPage';
 import SignupPage from './SignupPage';
 import PrivateRoutes from './PrivateRoutes';
-import { UserProvider } from './UserProvider';
+import { UserProvider } from './contexts/UserProvider';
 
 function App() {
 

client/src/ChatPage/ChatPage.jsx

@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import Chat from '../components/Chat';
 import SideBar from '../components/SideBar';
-import { SocketProvider } from '../SocketProvider';
+import { SocketProvider } from '../contexts/SocketProvider';
+import { ChatProvider } from '../contexts/ChatProvider';
 
 function ChatPage() {
-
-  const [contacts, setContacts] = useState([]);
-  const [currentContact, setCurrentContact] = useState({});
   return (
     <>
       <SocketProvider>
-        <SideBar contacts={contacts} setContacts={setContacts} currentContact={currentContact} setCurrentContact={setCurrentContact} />
-        <Chat contacts={contacts} setContacts={setContacts} currentContact={currentContact} setCurrentContact={setCurrentContact} />
+        <ChatProvider>
+          <SideBar />
+          <Chat />
+        </ChatProvider>
       </SocketProvider>
     </>
   );

client/src/PrivateRoutes.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react'
 import { Outlet, Navigate } from "react-router-dom";
-import { UserContext } from './UserProvider';
+import { UserContext } from './contexts/UserProvider';
 
 function PrivateRoutes() {
 

client/src/components/Chat/Chat.jsx

@@ -3,23 +3,34 @@ import "./Chat.css";
 import ChatHeader from '../ChatHeader';
 import ChatMain from '../ChatMain';
 import ChatFooter from '../ChatFooter';
-import { SocketContext } from '../../SocketProvider';
-
-function Chat({
-    contacts,
-    setContacts,
-    currentContact,
-    setCurrentContact,
-}) {
+import { SocketContext } from '../../contexts/SocketProvider';
+import { ChatContext } from '../../contexts/ChatProvider';
+import { UserContext } from '../../contexts/UserProvider';
+
+function Chat({ }) {
+
+    const {
+        contacts,
+        setContacts,
+        lastMessages,
+        setLastMessages,
+        currentChat,
+    } = useContext(ChatContext);
+
     const [messages, setMessages] = useState([]);
     const socket = useContext(SocketContext);
+    const {user} = useContext(UserContext);
     const chatMainRef = useRef();
+    
+    
+
 
     // to get Messages of currently opened chat
     //--------------------------------------------------------------------------------------------------------------//
     useEffect(() => {
 
-        if (Object.keys(currentContact).length === 0) return;
+        if (Object.keys(currentChat).length === 0) return;
+
         const fetchData = async () => {
 
             if (!socket) return;
@@ -29,7 +40,7 @@ function Chat({
                 setMessages(messages);
             });
 
-            socket.emit("get_messages", currentContact.id);
+            socket.emit("get_messages", currentChat.id);
         }
         fetchData();
 
@@ -37,38 +48,41 @@ function Chat({
             if (!socket) return;
             socket.off("messages");
         }
-    }, [currentContact, socket]);
+    }, [currentChat, socket]);
 
     // to add receive_message listener
     useEffect(() => {
         if (socket) {
             socket.on("receive_message", (message) => {
-                // console.log(message);
-                // console.log(message.send_from,currentContact.id);
-                // console.log(message.send_from == currentContact.id);
-                if (currentContact && message.send_from == currentContact.id) {
+                if (message.send_from == currentChat.id || message.send_from == user.id) {
                     setMessages((prev) => [...prev, message]);
                 }
-                else {
-                    // contacts.find
-                    var updatedContacts = structuredClone(contacts);
-                    const idx = updatedContacts.findIndex((contact)=>message.send_from==contact.id);
-                    updatedContacts[idx] = {
-                        ...updatedContacts[idx],
-                        last_message:message,
-                    }
-                    // console.log(contacts);
-                    // console.log(updatedContacts);
-                    
-                    setContacts(updatedContacts);
+
+                const ismessageOfContact = (contact) => (contact.id == message.send_to) || (contact.id == message.send_from);
+                var updatedContacts = contacts.map((contact) => (
+                    ismessageOfContact(contact) ?
+                        { ...contact, last_message: message } : contact
+                ));
+
+                updatedContacts.sort((a,b)=>b.last_message.send_at - a.last_message.send_at);
+                // console.log(updatedContacts);
+
+                setContacts(updatedContacts);
+                
+                // if message from a new Contact
+                const contact = contacts.find(contact=>contact.id==message.send_from);
+                if(!contact && message.send_from !=user.id){
+                    socket.emit("get_contact",message.send_from);
                 }
+
             });
 
+
             return () => {
                 socket.off("receive_message");
             };
         }
-    }, [socket,contacts,currentContact]);
+    }, [socket, contacts, currentChat]);
 
     const scrollToBottom = () => {
         if (chatMainRef.current) {
@@ -84,7 +98,7 @@ function Chat({
 
 
     // Until no chat is selected
-    if (Object.keys(currentContact).length === 0) {
+    if (Object.keys(currentChat).length === 0) {
 
         return (
             <div className='chat_dummy'>
@@ -93,12 +107,14 @@ function Chat({
         )
     }
 
+    // console.log("currentChat",currentChat);
+    // console.log("currentChat",currentChat.id);
     // once a chat is selected
-    return (
+    return ( 
         <div className='chat'>
-            <ChatHeader name={currentContact.username} />
+            <ChatHeader name={currentChat.username} />
             <ChatMain messages={messages} ref={chatMainRef} />
-            <ChatFooter currentContactId={currentContact.id} setMessages={setMessages} />
+            <ChatFooter currentChatId={currentChat.id} />
         </div>
     )
 }

client/src/components/ChatFooter/ChatFooter.jsx

@@ -1,13 +1,12 @@
 import React, { useContext, useEffect, useRef } from 'react'
 import "./ChatFooter.css";
 import { PaperAirplaneIcon, PhotoIcon, PaperClipIcon, FaceSmileIcon } from "@heroicons/react/24/solid";
-import { SocketContext } from '../../SocketProvider';
+import { SocketContext } from '../../contexts/SocketProvider';
 
 function ChatFooter({
-  setMessages,
-  currentContactId,
+  currentChatId,
 }) {
-
+  // console.log(currentChatId)
   const socket = useContext(SocketContext);
   const messageRef = useRef();
 
@@ -27,10 +26,8 @@ function ChatFooter({
     const message_bundle= {
       message,
       send_at:curr_time,
-      send_to:currentContactId,
+      send_to:currentChatId,
     }
-    
-    setMessages((prev) => [...prev, message_bundle]);
 
     if(socket){
       socket.emit("send_message",message_bundle);

client/src/components/ChatMain/ChatMain.jsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react'
 import Message from '../Message';
 import "./ChatMain.css";
-import { UserContext } from '../../UserProvider';
+import { UserContext } from '../../contexts/UserProvider';
 
 const ChatMain = React.forwardRef(({
   messages,
-},ref) => {
+}, ref) => {
 
   const { user } = useContext(UserContext);
 
@@ -16,9 +16,6 @@ const ChatMain = React.forwardRef(({
   }
 
   const isReceived = (message) => {
-    // console.log("message",message.send_to);
-    // console.log("user",user.id);
-    // && user.id==message.from
     return user && message.send_to == user.id;
   };
 

client/src/components/Contacts/Contacts.jsx

@@ -1,36 +1,62 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import Contact from '../Contact';
 import "./Contacts.css";
-import { UserContext } from '../../UserProvider';
+import { UserContext } from '../../contexts/UserProvider';
+import { ChatContext } from '../../contexts/ChatProvider';
+import { SocketContext } from '../../contexts/SocketProvider';
 
 
 
-function Contacts({
-    allContacts,
-    currentContact,
-    setCurrentContact,
-}) {
+function Contacts({ }) {
 
     // const [activeContact, setActiveContact] = useState({});
-    const {user} = useContext(UserContext);
+    const {
+        contacts,
+        setContacts,
+        currentChat,
+        setCurrentChat,
+        lastMessages,
+    } = useContext(ChatContext);
+    const { user } = useContext(UserContext);
+    const socket = useContext(SocketContext);
     // handleClick
 
+
+    useEffect(() => {
+        if (!socket) return;
+        socket.on("contact", (contact) => {
+            var newContacts = [...contacts, contact];
+            
+            newContacts.sort((a,b)=>b.last_message.send_at - a.last_message.send_at);
+
+            
+            setContacts(newContacts);
+        });
+
+        const cleanUp = () => {
+            if (!socket) return;
+            socket.off("contact");
+        }
+        return cleanUp;
+    }, [socket])
+
+
     return (
         <div className='contacts'>
 
 
             {
-                allContacts.map((contact) => (
+                contacts.map((contact) => (
                     // console.log("contact.last_message",contact,contact.last_message),
                     // console.log(user.id),
                     <Contact
                         key={contact.id}
-                        onClick={() => { setCurrentContact(contact) }}
+                        onClick={() => { setCurrentChat(contact) }}
                         profile_pic={"logo512.png"}
                         name={contact.username}
                         lastmessage={contact.last_message.message}
                         is_new={user.id == contact.last_message.send_to && contact.last_message.is_seen == 0}
-                        isActive={currentContact.id == contact.id}
+                        isActive={currentChat.id == contact.id}
                     />
                 ))
             }

client/src/components/SideBar/SideBar.jsx

@@ -1,36 +1,42 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect } from 'react'
 import Search from '../Search';
 import Contacts from '../Contacts';
 import "./SideBar.css";
-import { SocketContext } from '../../SocketProvider';
+import { SocketContext } from '../../contexts/SocketProvider';
+import { ChatContext } from '../../contexts/ChatProvider';
 
 
-function SideBar({
-    contacts,
-    setContacts,
-    setCurrentContact,
-    currentContact,
-}) {
+function SideBar() {
 
     const socket = useContext(SocketContext);
 
+    const {
+        setContacts,
+        // setLastMessages,
+    } = useContext(ChatContext);
+
     useEffect(() => {
 
         const fetchData = async () => {
-            
-            if(!socket) return;
-            // console.log()
-            socket.on("contacts",(contacts)=>{
+
+            if (!socket) return;
+            socket.on("contacts", (contacts) => {
                 // console.log(contacts);
-                setContacts(contacts);
+                var newContacts = contacts; 
+                
+                newContacts.sort((a,b)=>b.last_message.send_at - a.last_message.send_at);
+
+                setContacts(newContacts);  // set Contacts
+                // setLastMessages(contacts.map((contact) => contact.last_message)); // set Last messages
             });
 
             socket.emit("get_contacts");
         }
+
         fetchData();
 
-        return ()=>{
-            if(!socket) return;
+        return () => {
+            if (!socket) return;
             socket.off("contacts");
         }
     }, [socket]);
@@ -39,7 +45,7 @@ function SideBar({
 
         <div className='side_bar'>
             <Search />
-            <Contacts allContacts={contacts} currentContact={currentContact} setCurrentContact={setCurrentContact} />
+            <Contacts />
         </div>
     )
 }

client/src/contexts/ChatProvider.jsx

@@ -0,0 +1,19 @@
+import React, { createContext, useState } from "react";
+
+export const ChatContext = createContext();
+
+export const ChatProvider = ({ children }) => {
+    const [contacts, setContacts] = useState([]);
+    const [currentChat, setCurrentChat] = useState({});
+    const [lastMessages, setLastMessages] = useState([]);
+
+    return (
+        <ChatContext.Provider value={{
+            contacts, setContacts,
+            currentChat, setCurrentChat,
+            lastMessages, setLastMessages,
+        }}>
+            {children}
+        </ChatContext.Provider>
+    );
+}

server/index.ts

@@ -352,22 +352,34 @@ io.on("connection", async (socket) => {
     console.log("saved message:", data.message);
 
     const sockets = await io.fetchSockets();
-
-
+    const message_bundle = {
+      ...data,
+      "id":msg_id,
+      "send_to": data.send_to,
+      "send_from": socket.data.user.id,
+      "is_seen": 0,
+    };
+
+    socket.emit("receive_message",message_bundle);
     sockets.forEach((client) => {
       if (client.data.user.id == data.send_to) {
         // console.log("heyy");
-        return socket.to(client.id).emit("receive_message", {
-          ...data,
-          "send_to": data.send_to,
-          "send_from": socket.data.user.id,
-          "is_seen": 0,
-        });
+        return socket.to(client.id).emit("receive_message", message_bundle);
       }
     })
 
   });
 
+  socket.on("get_contact",async contact_id=>{
+    const contact = await db.prepare("select * from users where id = ?").get(contact_id);
+    
+
+    socket.emit("contact",{
+      ...contact,
+      last_message: await getLastMessage({ user_id: socket.data.user.id, contact_id: contact_id }),
+    });
+  })
+
   // upon disconnection
   socket.on("disconnect", (reason) => {
     console.log(`socket ${socket.id} disconnected due to ${reason}`);