worked on making messages work

client/src/App.js

@@ -4,6 +4,7 @@ import ChatPage from './ChatPage';
 import LoginPage from './LoginPage';
 import SignupPage from './SignupPage';
 import PrivateRoutes from './PrivateRoutes';
+import { UserProvider } from './UserProvider';
 
 function App() {
 
@@ -11,18 +12,22 @@ function App() {
 
   return (
     <div className="App">
+
       <Router>
         <Routes>
           <Route element={<LoginPage />} path="/login" />
             <Route element={<SignupPage />} path="/signup" />
           {/* <Route element={<ChatPage />} path="/" /> */}
 
+      
           <Route element={<PrivateRoutes />}>
             <Route element={<ChatPage />} path="/" />
           </Route>
+      
 
         </Routes>
       </Router>
+      
 
 
 

client/src/PrivateRoutes.jsx

@@ -1,8 +1,12 @@
-import React, { useState,useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Outlet, Navigate } from "react-router-dom";
 
 function PrivateRoutes() {
+  
   const [isAuth, setIsAuth] = useState(undefined);
+  // const [user, setUser] = useState(null);
+
+
   const getAuthStatus = async () => {
 
     const res = await fetch(process.env.REACT_APP_BACKEND_URL + "/session", {
@@ -12,12 +16,12 @@ function PrivateRoutes() {
     return res.ok;
   }
 
-  useEffect(()=>{
-    getAuthStatus().then((status)=>{
+  useEffect(() => {
+    getAuthStatus().then((status) => {
       console.log(status);
       setIsAuth(status);
     })
-  },[])
+  }, [])
 
 
   if (isAuth === undefined) {
@@ -25,12 +29,12 @@ function PrivateRoutes() {
       Loading ...
     </p>
   }
-  else{
+  else {
 
     return (
       isAuth ? <Outlet /> : <Navigate to="/login" />
     );
-    
+
   }
 
 }

client/src/UserProvider.jsx

@@ -0,0 +1,39 @@
+import React, { createContext, useEffect, useState } from "react";
+
+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}>
+            {children}
+        </UserContext.Provider>
+    );
+}

client/src/components/Chat/Chat.jsx

@@ -1,12 +1,33 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import "./Chat.css";
 import ChatHeader from '../ChatHeader';
 import ChatMain from '../ChatMain';
 import ChatFooter from '../ChatFooter';
+import { SocketContext } from '../../SocketProvider';
 
 function Chat({
     currentContact,
 }) {
+    const [messages, setMessages] = useState([]);
+    const socket = useContext(SocketContext);
+
+    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);
+        }
+    }
+
+    useEffect(() => {
+
+        if (Object.keys(currentContact).length === 0) return;
+
+        getMessages();
+
+
+    }, [currentContact])
 
     if (Object.keys(currentContact).length === 0) {
 
@@ -19,8 +40,8 @@ function Chat({
     return (
         <div className='chat'>
             <ChatHeader name={currentContact.username} />
-            <ChatMain />
-            <ChatFooter />
+            <ChatMain messages={messages} />
+            <ChatFooter currentContactId={currentContact.id} setMessages={setMessages} />
         </div>
     )
 }

client/src/components/ChatFooter/ChatFooter.jsx

@@ -1,16 +1,46 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import "./ChatFooter.css";
 import { PaperAirplaneIcon, PhotoIcon, PaperClipIcon, FaceSmileIcon } from "@heroicons/react/24/solid";
 import { SocketContext } from '../../SocketProvider';
 
-function ChatFooter() {
+function ChatFooter({
+  setMessages,
+  currentContactId,
+}) {
+
   const socket = useContext(SocketContext);
-  useEffect(()=>{
-    if(socket){
+  const messageRef = useRef();
+
+  useEffect(() => {
+    if (socket) {
       console.log(socket);
       socket.emit("foobar");
     }
-  },[socket])
+  }, [socket])
+
+  const sendMessage = (message) => {
+
+    const curr_time = Math.floor(new Date().getTime() / 1000); 
+    const message_bundle= {
+      message,
+      send_at:curr_time,
+      to:currentContactId,
+    }
+    
+    setMessages((prev) => [...prev, message_bundle]);
+
+    if(socket){
+
+      socket.emit("send_message",message_bundle);
+    }
+
+  }
+
+  const handleEnter = (e) => {
+    if (e.key == "Enter") {
+      sendMessage(messageRef.current.value);
+    }
+  }
 
   return (
     <footer className='chat_footer'>
@@ -20,8 +50,8 @@ function ChatFooter() {
         <PhotoIcon className='send_options_btn' />
         <PaperClipIcon className='send_options_btn' />
       </div>
-      <input className="text_box" type="text" placeholder='Message' />
-      <PaperAirplaneIcon className='send_icon' />
+      <input className="text_box" type="text" placeholder='Message' onKeyUp={handleEnter} ref={messageRef} />
+      <PaperAirplaneIcon onClick={() => { sendMessage(messageRef.current.value) }} className='send_icon' />
     </footer>
   )
 }

client/src/components/ChatMain/ChatMain.jsx

@@ -2,24 +2,24 @@ import React from 'react'
 import Message from '../Message';
 import "./ChatMain.css";
 
-function ChatMain() {
+function ChatMain({
+  messages,
+}) {
 
-  const getMessages = () => {
-
-    var messages = [];
-    for (var i = 0; i < 10; i++) {
-      messages.push(<Message key={i} message={"Hello"} time="10AM" isReceived={false} />);
-    }
-    return messages;
+  const timeToReadable = (timestamp)=>{
+    var d = new Date(timestamp*1000);
+    return d.toLocaleTimeString();
+    // return timestamp;
   }
+
   return (
     <div className='chat_main'>
       {
-        getMessages()
+
+        messages.map((message,idx) => (
+          <Message key={idx} message={message.message} time={timeToReadable(message.send_at)} isReceived={message.isReceived} />
+        ))
       }
-      <Message message={"Hi"} time="11AM" isReceived={true} />
-      <Message message={"How are you"} time="11:10AM" isReceived={false} />
-      <Message message={"I am good what about you..."} time="11AM" isReceived={true} />
     </div>
   )
 }

server/index.ts

@@ -220,6 +220,27 @@ app.get("/contacts", isAuthAPIMiddleware, async (req, res) => {
   res.json({ "contacts": contacts });
 })
 
+// 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
+   (send_to=? and send_from=?)`).all(
+    res.locals.user.id,
+    req.params.userid,
+
+    req.params.userid,
+    res.locals.user.id,
+    );
+  // const messages = await db.prepare("select * from messages").all();
+
+  res.json({ "messages": messages });
+})
+
+
 const io = new Server(server, {
   cors: {
     origin: allowed_origins,
@@ -266,6 +287,37 @@ io.on("connection", async (socket) => {
     // an event was received from the client
     console.log("received:" + data, socket.data.user);
   });
+  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,
+      data.to,
+      socket.data.user.id,
+      data.send_at,
+    );
+    
+    console.log("saved message:" , data.message);
+
+    const sockets = await io.fetchSockets();
+
+    
+    sockets.forEach((client)=>{
+      if(client.data.user.id==data.to)
+      {
+        return socket.to(client.data.user.id).emit("receive_message",{
+          ...data,
+          "from":socket.data.user.id,
+        });
+      }
+    })
+    
+  });
 
   // upon disconnection
   socket.on("disconnect", (reason) => {