From 13f4d43761e748a17add73da3861ac853ac63a6a Mon Sep 17 00:00:00 2001 From: Nikolai Petukhov Date: Sat, 5 Oct 2024 11:46:18 +0300 Subject: [PATCH] chats and messages --- src/backend/api.js | 3 +- src/pages/Chat.jsx | 57 +++++- stubs/api/chat/chats.json | 368 ++++++++++++++++++++++++++++---------- stubs/api/chat/index.js | 38 +++- stubs/api/db.js | 6 +- 5 files changed, 367 insertions(+), 105 deletions(-) diff --git a/src/backend/api.js b/src/backend/api.js index 6e34813..1a7f089 100644 --- a/src/backend/api.js +++ b/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"; diff --git a/src/pages/Chat.jsx b/src/pages/Chat.jsx index b94ea38..b8ad2ef 100644 --- a/src/pages/Chat.jsx +++ b/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 = () => {
- {msg.senderId === "yourUserId" ? "You" : "Interlocutor"}:{" "} - {msg.message} + {msg.senderId === myId ? "You" : "They"}:{" "} + {msg.data}
{msg.timestamp}
@@ -181,7 +224,7 @@ const Chat = () => { onChange={(e) => setNewMessage(e.target.value)} placeholder="Type a message..." className="chat-input" - onKeyPress={handleKeyPress} + onKeyDown={handleKeyPress} />