made it working

client/src/App.js

@@ -12,23 +12,23 @@ function App() {
 
   return (
     <div className="App">
-
-      <Router>
-        <Routes>
-          <Route element={<LoginPage />} path="/login" />
+      <UserProvider>
+        <Router>
+          <Routes>
+            <Route element={<LoginPage />} path="/login" />
             <Route element={<SignupPage />} path="/signup" />
-          {/* <Route element={<ChatPage />} path="/" /> */}
+            {/* <Route element={<ChatPage />} path="/" /> */}
+
+
+            <Route element={<PrivateRoutes />}>
+              <Route element={<ChatPage />} path="/" />
+            </Route>
 
-      
-          <Route element={<PrivateRoutes />}>
-            <Route element={<ChatPage />} path="/" />
-          </Route>
-      
 
-        </Routes>
-      </Router>
-      
+          </Routes>
+        </Router>
 
+      </UserProvider>
 
 
     </div>

client/src/PrivateRoutes.jsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { Outlet, Navigate } from "react-router-dom";
+import { UserContext } from './UserProvider';
 
 function PrivateRoutes() {
-  
+
   const [isAuth, setIsAuth] = useState(undefined);
-  // const [user, setUser] = useState(null);
+  const { user, setUser } = useContext(UserContext);
 
 
   const getAuthStatus = async () => {
@@ -13,6 +14,7 @@ function PrivateRoutes() {
       credentials: "include"
     })
 
+    if (res.ok) { setUser(await res.json()) };
     return res.ok;
   }
 
@@ -23,7 +25,6 @@ function PrivateRoutes() {
     })
   }, [])
 
-
   if (isAuth === undefined) {
     return <p>
       Loading ...

client/src/UserProvider.jsx

@@ -5,34 +5,8 @@ export const UserContext = createContext();
 export const UserProvider = ({ children }) => {
     const [user, setUser] = useState(null);
 
-
-    const getUser = async () => {
-
-        const res = await fetch(process.env.REACT_APP_BACKEND_URL + "/session", {
-          credentials: "include"
-        })
-        var data;
-        if(res.ok){
-            data = await res.json();
-            setUser(data);
-        }
-        else{
-            setUser({});
-        }
-        console.log("user",data);
-
-
-      }
-    
-      useEffect(()=>{
-          getUser();
-      },[])
-    
-    
-
-
     return (
-        <UserContext.Provider value={user}>
+        <UserContext.Provider value={{user, setUser}}>
             {children}
         </UserContext.Provider>
     );

client/src/components/Chat/Chat.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 import "./Chat.css";
 import ChatHeader from '../ChatHeader';
 import ChatMain from '../ChatMain';
@@ -10,25 +10,52 @@ function Chat({
 }) {
     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);
+            // console.log(data.messages);
             setMessages(data.messages);
         }
     }
 
-    useEffect(() => {
+    const scrollToBottom = () => {
+        if(chatMainRef.current){
+            chatMainRef.current.scrollTo(0, chatMainRef.current.scrollHeight);
+        }
+    };
 
-        if (Object.keys(currentContact).length === 0) return;
 
+    // to get Messages of currently opened chat
+    useEffect(() => {
+        if (Object.keys(currentContact).length === 0) return;
         getMessages();
+    }, [currentContact])
 
+    // to add receive_message listener
+    useEffect(() => {
+        if (socket) {
+            socket.on("receive_message", (message) => {
+                // console.log(message);
+                setMessages((prev) => [...prev, message]);
+            });
+
+            return () => {
+                socket.off("receive-message");
+            };
+        }
+    }, [socket]);
+
+    // when ever a chat's messages are updated, scrollToBottom
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
 
-    }, [currentContact])
 
+    
+    // Until no chat is selected
     if (Object.keys(currentContact).length === 0) {
 
         return (
@@ -37,10 +64,12 @@ function Chat({
             </div>
         )
     }
+
+    // once a chat is selected
     return (
         <div className='chat'>
             <ChatHeader name={currentContact.username} />
-            <ChatMain messages={messages} />
+            <ChatMain messages={messages} ref={chatMainRef} />
             <ChatFooter currentContactId={currentContact.id} setMessages={setMessages} />
         </div>
     )

client/src/components/ChatFooter/ChatFooter.css

@@ -24,6 +24,7 @@
 
 .text_box{
     height:100%;
+    min-width:20px;
     flex-grow:1;
     border:1px solid var(--BORDER-COLOR);
     border-radius: 5px;

client/src/components/ChatFooter/ChatFooter.jsx

@@ -11,29 +11,33 @@ function ChatFooter({
   const socket = useContext(SocketContext);
   const messageRef = useRef();
 
-  useEffect(() => {
-    if (socket) {
-      console.log(socket);
-      socket.emit("foobar");
+  
+
+  useEffect(()=>{
+    if(messageRef.current){
+      messageRef.current.focus();
     }
-  }, [socket])
+  }) // risky this running all the time
 
   const sendMessage = (message) => {
 
+    if(message.trim()==="") return;
+
     const curr_time = Math.floor(new Date().getTime() / 1000); 
     const message_bundle= {
       message,
       send_at:curr_time,
-      to:currentContactId,
+      send_to:currentContactId,
     }
     
     setMessages((prev) => [...prev, message_bundle]);
 
     if(socket){
-
       socket.emit("send_message",message_bundle);
     }
 
+    messageRef.current.value = "";
+
   }
 
   const handleEnter = (e) => {

client/src/components/ChatMain/ChatMain.jsx

@@ -1,27 +1,42 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import Message from '../Message';
 import "./ChatMain.css";
+import { UserContext } from '../../UserProvider';
 
-function ChatMain({
+const ChatMain = React.forwardRef(({
   messages,
-}) {
+},ref) => {
 
-  const timeToReadable = (timestamp)=>{
-    var d = new Date(timestamp*1000);
+  const { user } = useContext(UserContext);
+
+  const timeToReadable = (timestamp) => {
+    var d = new Date(timestamp * 1000);
     return d.toLocaleTimeString();
     // return timestamp;
   }
 
+  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;
+  };
+
   return (
-    <div className='chat_main'>
+    <div className='chat_main' ref={ref}>
       {
 
-        messages.map((message,idx) => (
-          <Message key={idx} message={message.message} time={timeToReadable(message.send_at)} isReceived={message.isReceived} />
+        messages.map((message, idx) => (
+          <Message
+            key={idx}
+            message={message.message}
+            time={timeToReadable(message.send_at)}
+            isReceived={isReceived(message)}
+          />
         ))
       }
     </div>
   )
-}
+})
 
 export default ChatMain

client/src/index.css

@@ -2,6 +2,7 @@
   margin:0;
   padding:0;
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 body {

client/src/index.js

@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>
+  // <React.StrictMode>
+  // </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

server/index.ts

@@ -43,11 +43,6 @@ app.use(mutler().array(""));
 // The entire build/web directory is statically served.
 app.use(express.static(path.join(__dirname, "../client/build")));
 
-// Catch all. If we want to add pages later, then we should probably change this.
-app.get("/", (_req, res) => {
-  res.sendFile(path.join(__dirname + "/../client/build/index.html"));
-});
-
 // middleware
 // app.use((req,res,next)=>{
 //   if(req.method==="GET"){
@@ -146,7 +141,7 @@ app.post("/signup", async (req, res) => {
     })
   }
 
-  // save to database
+  // save to data se
   const userId = generateId(15);
   const hashedPassword = await bcrypt.hash(data.password, 10);
 
@@ -240,6 +235,11 @@ app.get("/messages/:userid", isAuthAPIMiddleware, async (req, res) => {
   res.json({ "messages": messages });
 })
 
+// Catch all. If we want to add pages later, then we should probably change this.
+app.get("*", (_req, res) => {
+  res.sendFile(path.join(__dirname + "/../client/build/index.html"));
+});
+
 
 const io = new Server(server, {
   cors: {
@@ -297,7 +297,7 @@ io.on("connection", async (socket) => {
     await stmt.run(
       msg_id,
       data.message,
-      data.to,
+      data.send_to,
       socket.data.user.id,
       data.send_at,
     );
@@ -308,9 +308,10 @@ io.on("connection", async (socket) => {
 
     
     sockets.forEach((client)=>{
-      if(client.data.user.id==data.to)
+      if(client.data.user.id==data.send_to)
       {
-        return socket.to(client.data.user.id).emit("receive_message",{
+        // console.log("heyy");
+        return socket.to(client.id).emit("receive_message",{
           ...data,
           "from":socket.data.user.id,
         });