chats and messages

src/backend/api.js

@@ -2,8 +2,7 @@ import {getConfigValue} from "@brojs/cli";
 
 
 const LOCAL = "http://localhost:8099";
-const DEV = "https://dev.bro-js.ru";
-const SERVER = "";
+const DEV = "";
 
 export const BASE_API_URL = LOCAL + getConfigValue("enterfront.api") + "/enterfront";
 

src/pages/Chat.jsx

@@ -2,6 +2,9 @@ import React, { useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import "./css/Chat.css";
 import { FaPaperPlane, FaSmile } from "react-icons/fa";
+import {get, post} from "../backend/api";
+import {displayMessage} from "../backend/notifications/notifications";
+import {MessageType} from "../backend/notifications/message";
 
 const emojis = [
   "😀",
@@ -82,11 +85,21 @@ const Chat = () => {
   const chatRef = useRef(null);
   const navigate = useNavigate();
 
+  const [myId, setMyId] = useState("");
+
   useEffect(() => {
     // const id = parseInt(localStorage.getItem("interlocutorId"), 10) || 0;
     const id = localStorage.getItem("interlocutorId")
     setInterlocutorId(id);
 
+    const username = localStorage.getItem("username");
+    setMyId(username);
+
+    if (!id || !username) {
+      displayMessage("You are not logged in!", MessageType.WARN);
+      return () => {};
+    }
+
     socket.current = new WebSocket("ws://localhost:8080");
 
     socket.current.onopen = () => {
@@ -114,23 +127,53 @@ const Chat = () => {
     };
   }, []);
 
+  useEffect(() => {
+    retrieveMessages().then();
+  }, [myId, interlocutorId])
+
   useEffect(() => {
     if (chatRef.current) {
       chatRef.current.scrollTop = chatRef.current.scrollHeight;
     }
   }, [messages]);
 
+  // The function for sending message to the DB
+  async function sendMessageToDB (messageData) {
+    const { ok, data } = post('/chat/message/' + myId + '/' + interlocutorId, { message: messageData });
+
+    if (!ok) {
+      displayMessage(data.message, MessageType.ERROR);
+    }
+  }
+
+  // The function retrieves messages from the DB for the current chat
+  async function retrieveMessages () {
+    if (!myId || !interlocutorId) {return;}
+    const { ok, data } = await get('/chat/item/' + myId + '/' + interlocutorId);
+
+    if (!ok) {
+      displayMessage(data.message, MessageType.ERROR);
+      return;
+    }
+
+    setMessages(data.chat.messages);
+  }
+
   const sendMessage = () => {
     if (newMessage.trim()) {
       const messageData = {
-        type: "message",
-        senderId: "yourUserId",
+        senderId: myId,
         recipientId: interlocutorId,
-        message: newMessage,
+        data: newMessage,
         timestamp: new Date().toLocaleTimeString(),
       };
       socket.current.send(JSON.stringify(messageData));
       setMessages((prev) => [...prev, messageData]);
+
+      sendMessageToDB(messageData).then();
+
+      console.log('format:', messageData);
+
       setNewMessage("");
     }
   };
@@ -163,12 +206,12 @@ const Chat = () => {
           <div
             key={index}
             className={`message-bubble ${
-              msg.senderId === "yourUserId" ? "sent" : "received"
+              msg.senderId === myId ? "sent" : "received"
             }`}
           >
             <div className="message-content">
-              <b>{msg.senderId === "yourUserId" ? "You" : "Interlocutor"}:</b>{" "}
-              {msg.message}
+              <b>{msg.senderId === myId ? "You" : "They"}:</b>{" "}
+              {msg.data}
             </div>
             <span className="message-timestamp">{msg.timestamp}</span>
           </div>
@@ -181,7 +224,7 @@ const Chat = () => {
           onChange={(e) => setNewMessage(e.target.value)}
           placeholder="Type a message..."
           className="chat-input"
-          onKeyPress={handleKeyPress}
+          onKeyDown={handleKeyPress}
         />
         <button
           className="emoji-button"