facing db issues, connecting real-time almost done

ramanuj07 · Aug 17, 2024 · 63784bc · 63784bc
1 parent 4109c90
commit 63784bc
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 47 deletions.
diff --git a/backend/src/db/db.ts b/backend/src/db/db.ts
@@ -1,9 +1,18 @@
 import { drizzle } from "drizzle-orm/node-postgres";
 import { Pool } from "pg";
 import * as schema from "./schema";
+import dotenv from "dotenv";
+dotenv.config();
+
+const DATABASE_URL = process.env.DATABASE_URL;
+
+if (!DATABASE_URL) {
+  console.error("DATABASE_URL is not defined in the environment variables");
+  process.exit(1);
+}
 
 const pool = new Pool({
-  connectionString: process.env.DATABASE_URL,
+  connectionString: DATABASE_URL,
 });
 
 export const db = drizzle(pool, { schema });
diff --git a/backend/src/services/socket.ts b/backend/src/services/socket.ts
@@ -27,8 +27,8 @@ class SocketService {
     console.log("Initialised socket server");
     this._io = new Server({
       cors: {
+        allowedHeaders: ["*"],
         origin: "*",
-        methods: ["GET", "POST"],
       },
     });
   }
@@ -54,9 +54,19 @@ class SocketService {
 
       socket.on("chat:message", async (message: Message) => {
         console.log("New message received", message);
-        const savedMessage = await this.saveMessage(message);
-        if (savedMessage) {
-          this.sendMessage(savedMessage);
+        try {
+          const savedMessage = await this.saveMessage(message);
+          if (savedMessage) {
+            this.sendMessage(savedMessage);
+          } else {
+            socket.emit("error", "Failed to save message");
+          }
+        } catch (error) {
+          console.error("Error in chat:message handler:", error);
+          socket.emit(
+            "error",
+            "An error occurred while processing the message"
+          );
         }
       });
 
@@ -111,26 +121,32 @@ class SocketService {
     this._io.emit("users:online", onlineUsers);
   }
 
-  private async saveMessage(message: Message) {
+  private async saveMessage(message: Message): Promise<Message | null> {
     try {
       const [savedMessage] = await db
         .insert(messages)
         .values({
           senderId: parseInt(message.senderId),
           recipientId: parseInt(message.recipientId),
           content: message.content,
-          timestamp: message.timestamp,
-          read: message.read,
+          timestamp: new Date(),
+          read: false,
           fileUrl: message.fileUrl || null,
           fileType: message.fileType || null,
         })
         .returning();
+
       console.log("Message saved to database", savedMessage);
+
       return {
-        ...savedMessage,
         id: savedMessage.id.toString(),
         senderId: savedMessage.senderId.toString(),
         recipientId: savedMessage.recipientId.toString(),
+        content: savedMessage.content,
+        timestamp: savedMessage.timestamp,
+        read: savedMessage.read,
+        fileUrl: savedMessage.fileUrl,
+        fileType: savedMessage.fileType,
       };
     } catch (error) {
       console.error("Error saving message to database", error);

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.1"
+    "react-router-dom": "^6.26.1",
+    "socket.io-client": "^4.7.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,9 +1,12 @@
 import Body from "./components/Body";
+import { SocketProvider } from "./context/SocketProvider";
 
 function App() {
   return (
     <div>
-      <Body />
+      <SocketProvider>
+        <Body />
+      </SocketProvider>
     </div>
   );
 }

diff --git a/frontend/src/components/ChatInterface.tsx b/frontend/src/components/ChatInterface.tsx
@@ -1,18 +1,12 @@
 import React, { useState, useEffect, useRef } from "react";
 import AttachmentIcon from "../assets/AttachmentIcon.png";
 import SendIcon from "../assets/SendIcon.png";
-import DefaultProfilePic from "../assets/DefaultProfilePic.jpg"; // Add a default profile picture
-
-interface Message {
-  id: number;
-  text: string;
-  sender: "user" | "other";
-}
+import DefaultProfilePic from "../assets/DefaultProfilePic.jpg";
+import { useSocket } from "../context/SocketProvider";
 
 const ChatInterface = () => {
-  const [messages, setMessages] = useState<Message[]>([]);
+  const { sendMessage, messages } = useSocket();
   const [inputMessage, setInputMessage] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -27,26 +21,15 @@ const ChatInterface = () => {
     e.preventDefault();
     if (inputMessage.trim() === "") return;
 
-    const newMessage: Message = {
-      id: messages.length + 1,
-      text: inputMessage,
-      sender: "user",
-    };
+    sendMessage({
+      senderId: "user", // Replace with actual user ID
+      recipientId: "recipient", // Replace with actual recipient ID
+      text: inputMessage.trim(),
+      fileUrl: null,
+      fileType: null,
+    });
 
-    setMessages([...messages, newMessage]);
     setInputMessage("");
-
-    // Simulating a reply from the other user
-    setIsTyping(true);
-    setTimeout(() => {
-      const replyMessage: Message = {
-        id: messages.length + 2,
-        text: "This is a simulated reply.",
-        sender: "other",
-      };
-      setMessages((prevMessages) => [...prevMessages, replyMessage]);
-      setIsTyping(false);
-    }, 2000);
   };
 
   return (
@@ -60,9 +43,7 @@ const ChatInterface = () => {
         />
         <div>
           <h2 className="font-semibold text-xs">User Name</h2>
-          <p className="text-xs text-gray-500">
-            {isTyping ? "Typing..." : "Online"}
-          </p>
+          <p className="text-xs text-gray-500">Online</p>
         </div>
       </div>
 
@@ -72,12 +53,12 @@ const ChatInterface = () => {
           <div
             key={message.id}
             className={`mb-4 ${
-              message.sender === "user" ? "text-right" : "text-left"
+              message.senderId === "user" ? "text-right" : "text-left"
             }`}
           >
             <div
               className={`inline-block p-2 text-xs rounded-lg ${
-                message.sender === "user"
+                message.senderId === "user"
                   ? "bg-[#EF6144] text-white"
                   : "bg-gray-100 text-gray-800"
               }`}