made working

client/src/ChatPage/ChatPage.jsx

@@ -5,31 +5,13 @@ import { SocketProvider } from '../SocketProvider';
 
 function ChatPage() {
 
-  useEffect(() => {
-    // const socket = io("ws://localhost:3000", {
-    //   withCredentials: true,
-    // });
-
-    // socket.on("connect", () => {
-    //   console.log("connected", socket.id);
-    // })
-
-    // socket.on("error", () => {
-    //   console.log("socket error");
-    // })
-
-    // setInterval(() => {
-    //   socket.emit("foobar", "im alive")
-    // }, 2000);
-
-  }, [])
-
+  const [contacts, setContacts] = useState([]);
   const [currentContact, setCurrentContact] = useState({});
   return (
     <>
       <SocketProvider>
-        <SideBar currentContact={currentContact} setCurrentContact={setCurrentContact} />
-        <Chat currentContact={currentContact} />
+        <SideBar contacts={contacts} setContacts={setContacts} currentContact={currentContact} setCurrentContact={setCurrentContact} />
+        <Chat contacts={contacts} setContacts={setContacts} currentContact={currentContact} setCurrentContact={setCurrentContact} />
       </SocketProvider>
     </>
   );

client/src/components/Chat/Chat.jsx

@@ -6,47 +6,75 @@ import ChatFooter from '../ChatFooter';
 import { SocketContext } from '../../SocketProvider';
 
 function Chat({
+    contacts,
+    setContacts,
     currentContact,
+    setCurrentContact,
 }) {
     const [messages, setMessages] = useState([]);
     const socket = useContext(SocketContext);
     const chatMainRef = useRef();
 
-    const getMessages = async () => {
-        const res = await fetch(process.env.REACT_APP_BACKEND_URL + `/messages/${currentContact.id}`, { credentials: "include" });
-        const data = await res.json();
-        if (res.ok) {
-            // console.log(data.messages);
-            setMessages(data.messages);
-        }
-    }
-
-    const scrollToBottom = () => {
-        if(chatMainRef.current){
-            chatMainRef.current.scrollTo(0, chatMainRef.current.scrollHeight);
-        }
-    };
-
-
     // to get Messages of currently opened chat
+    //--------------------------------------------------------------------------------------------------------------//
     useEffect(() => {
+
         if (Object.keys(currentContact).length === 0) return;
-        getMessages();
-    }, [currentContact])
+        const fetchData = async () => {
+
+            if (!socket) return;
+            // console.log()
+            socket.on("messages", (messages) => {
+                // console.log(messages);
+                setMessages(messages);
+            });
+
+            socket.emit("get_messages", currentContact.id);
+        }
+        fetchData();
+
+        return () => {
+            if (!socket) return;
+            socket.off("messages");
+        }
+    }, [currentContact, socket]);
 
     // to add receive_message listener
     useEffect(() => {
         if (socket) {
             socket.on("receive_message", (message) => {
                 // console.log(message);
-                setMessages((prev) => [...prev, message]);
+                // console.log(message.send_from,currentContact.id);
+                // console.log(message.send_from == currentContact.id);
+                if (currentContact && message.send_from == currentContact.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);
+                }
             });
 
             return () => {
-                socket.off("receive-message");
+                socket.off("receive_message");
             };
         }
-    }, [socket]);
+    }, [socket,contacts,currentContact]);
+
+    const scrollToBottom = () => {
+        if (chatMainRef.current) {
+            chatMainRef.current.scrollTo(0, chatMainRef.current.scrollHeight);
+        }
+    };
 
     // when ever a chat's messages are updated, scrollToBottom
     useEffect(() => {
@@ -54,7 +82,7 @@ function Chat({
     }, [messages]);
 
 
-    
+
     // Until no chat is selected
     if (Object.keys(currentContact).length === 0) {
 

client/src/components/Contact/Contact.css

@@ -48,4 +48,9 @@
     color:rgb(234, 234, 234);
     font-size:0.9em;
     white-space: nowrap;
-}
+}
+.contact__lastmsg.new{
+    /* color:rgb(0, 255, 132); */
+    font-weight: 700;
+    font-size:1.1em;
+}

client/src/components/Contact/Contact.jsx

@@ -7,6 +7,7 @@ function Contact({
   lastmessage = "",
   onClick,
   isActive = false,
+  is_new = false,
 }) {
 
 
@@ -16,7 +17,7 @@ function Contact({
       <div>
         <h4 className='contact__name'>{name}</h4>
         {lastmessage != "" &&
-          <p className='contact__lastmsg'>{lastmessage}</p>
+          <p className={(is_new ? "new":"") + ' contact__lastmsg'}>{lastmessage}</p>
         }
       </div>
     </div>

client/src/components/Contacts/Contacts.jsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useState } from 'react'
 import Contact from '../Contact';
 import "./Contacts.css";
+import { UserContext } from '../../UserProvider';
 
 
 
@@ -10,8 +11,8 @@ function Contacts({
     setCurrentContact,
 }) {
 
-    const [activeContact, setActiveContact] = useState({});
-
+    // const [activeContact, setActiveContact] = useState({});
+    const {user} = useContext(UserContext);
     // handleClick
 
     return (
@@ -20,12 +21,15 @@ function Contacts({
 
             {
                 allContacts.map((contact) => (
+                    // console.log("contact.last_message",contact,contact.last_message),
+                    // console.log(user.id),
                     <Contact
                         key={contact.id}
                         onClick={() => { setCurrentContact(contact) }}
                         profile_pic={"logo512.png"}
                         name={contact.username}
-                        lastmessage={"good morning"}
+                        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}
                     />
                 ))

client/src/components/SideBar/SideBar.jsx

@@ -1,32 +1,39 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import Search from '../Search';
 import Contacts from '../Contacts';
 import "./SideBar.css";
+import { SocketContext } from '../../SocketProvider';
+
 
 function SideBar({
+    contacts,
+    setContacts,
     setCurrentContact,
     currentContact,
 }) {
-    const [contacts, setContacts] = useState([]);
+
+    const socket = useContext(SocketContext);
 
     useEffect(() => {
 
         const fetchData = async () => {
-
-            const res = await fetch(process.env.REACT_APP_BACKEND_URL + "/contacts", { credentials: "include" });
-            const data = await res.json();
-
-            if (res.ok) {
-                // console.log(data);
-                setContacts(data.contacts);
-            }
-            else {
-                console.error(data);
-            }
+            
+            if(!socket) return;
+            // console.log()
+            socket.on("contacts",(contacts)=>{
+                // console.log(contacts);
+                setContacts(contacts);
+            });
+
+            socket.emit("get_contacts");
         }
         fetchData();
 
-    }, []);
+        return ()=>{
+            if(!socket) return;
+            socket.off("contacts");
+        }
+    }, [socket]);
 
     return (
 

server/index.ts

@@ -217,9 +217,9 @@ app.get("/contacts", isAuthAPIMiddleware, async (req, res) => {
 
 // get currentContact's messsages route
 app.get("/messages/:userid", isAuthAPIMiddleware, async (req, res) => {
-  
+
   // req.query.id
-  
+
   var messages = await db.prepare(`select * from messages
    where (send_to=? and send_from=?) 
    or
@@ -229,7 +229,7 @@ app.get("/messages/:userid", isAuthAPIMiddleware, async (req, res) => {
 
     req.params.userid,
     res.locals.user.id,
-    );
+  );
   // const messages = await db.prepare("select * from messages").all();
 
   res.json({ "messages": messages });
@@ -268,32 +268,77 @@ const isAuth = async (req: Request, res: Response, next) => {
 
 io.engine.use(isAuth);
 
+async function getLastMessage({ user_id, contact_id }: { user_id: string, contact_id: string }) {
+
+  var last_message = await db.prepare(`select * from messages
+   where (send_to=? and send_from=?) 
+   or
+   (send_to=? and send_from=?)
+   ORDER BY send_at DESC
+   `).get(
+    user_id,
+    contact_id,
+
+    contact_id,
+    user_id,
+  );
+
+  // console.log(last_message);
+  if (last_message) {
+    return last_message;
+  }
+  else {
+    return {};
+  }
+
+}
 
 io.on("connection", async (socket) => {
   console.log(`socket ${socket.id} connected`);
-  
+
   // add user and session to the socket.data object
   const sessionId = lucia.readSessionCookie(socket.handshake.headers.cookie ?? "");
   const { session, user } = await lucia.validateSession(sessionId as string);
   socket.data.user = user;
   socket.data.session = session;
 
-  
+  socket.on("get_contacts", async () => {
 
-  // send an event to the client
-  socket.emit("foo", "bar");
-  // socket.on("")
-  socket.on("foobar", (data) => {
-    // an event was received from the client
-    console.log("received:" + data, socket.data.user);
+    // get all contacts to client
+    var contacts = await db.prepare("select id,username from users where id!=?").all(socket.data.user.id);
+    contacts = await Promise.all(contacts.map(async (contact: any) => {
+      return { ...contact, last_message: await getLastMessage({ user_id: socket.data.user.id, contact_id: contact.id }) }
+    }))
+
+    // console.log(contacts);
+    socket.emit("contacts", contacts);
+    // socket 
+  })
+
+
+
+  socket.on("get_messages", async (contact_id) => {
+    var messages = await db.prepare(`select * from messages
+    where (send_to=? and send_from=?) 
+    or
+    (send_to=? and send_from=?)`).all(
+      socket.data.user.id,
+      contact_id,
+
+      contact_id,
+      socket.data.user.id,
+    );
+
+    socket.emit("messages", messages);
   });
+
   socket.on("send_message", async (data) => {
     // an event was received from the client
 
     const msg_id = generateId(15);
-  
+
     const stmt = db.prepare("insert into messages(id,message,send_to,send_from,send_at) values(?,?,?,?,?)");
-    
+
     await stmt.run(
       msg_id,
       data.message,
@@ -301,23 +346,24 @@ io.on("connection", async (socket) => {
       socket.data.user.id,
       data.send_at,
     );
-    
-    console.log("saved message:" , data.message);
+
+    console.log("saved message:", data.message);
 
     const sockets = await io.fetchSockets();
 
-    
-    sockets.forEach((client)=>{
-      if(client.data.user.id==data.send_to)
-      {
+
+    sockets.forEach((client) => {
+      if (client.data.user.id == data.send_to) {
         // console.log("heyy");
-        return socket.to(client.id).emit("receive_message",{
+        return socket.to(client.id).emit("receive_message", {
           ...data,
-          "from":socket.data.user.id,
+          "send_to": data.send_to,
+          "send_from": socket.data.user.id,
+          "is_seen": 0,
         });
       }
     })
-    
+
   });
 
   // upon disconnection