enterfront/front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chats and messages

Browse Source
This commit is contained in:
Nikolai Petukhov 2024-10-05 11:46:18 +03:00
parent 22a549e269
commit 13f4d43761
5 changed files with 367 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/backend/api.js
View File

@ -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";

57
src/pages/Chat.jsx
View File

@ -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"

368
stubs/api/chat/chats.json
View File

@ -5,19 +5,27 @@
"messages": [
{
"data": "Hello Bob!",
"senderId": "alice"
"senderId": "alice",
"recipientId": "bobsm",
"timestamp": "07:00:00 AM"
},
{
"data": "Hey Alice, how are you?",
"senderId": "bobsm"
"senderId": "bobsm",
"recipientId": "alice",
"timestamp": "07:05:00 AM"
},
{
"data": "I'm good, thanks for asking.",
"senderId": "alice"
"senderId": "alice",
"recipientId": "bobsm",
"timestamp": "07:10:00 AM"
},
{
"data": "Glad to hear!",
"senderId": "bobsm"
"senderId": "bobsm",
"recipientId": "alice",
"timestamp": "07:15:00 AM"
}
]
},
@ -27,19 +35,27 @@
"messages": [
{
"data": "How's the project going?",
"senderId": "alice"
"senderId": "alice",
"recipientId": "charl",
"timestamp": "07:20:00 AM"
},
{
"data": "It's coming along, almost done!",
"senderId": "charl"
"senderId": "charl",
"recipientId": "alice",
"timestamp": "07:25:00 AM"
},
{
"data": "That's great to hear!",
"senderId": "alice"
"senderId": "alice",
"recipientId": "charl",
"timestamp": "07:30:00 AM"
},
{
"data": "Thanks for checking in.",
"senderId": "charl"
"senderId": "charl",
"recipientId": "alice",
"timestamp": "07:35:00 AM"
}
]
},
@ -49,19 +65,27 @@
"messages": [
{
"data": "Did you get the files?",
"senderId": "david"
"senderId": "david",
"recipientId": "alice",
"timestamp": "07:40:00 AM"
},
{
"data": "Yes, I did. Thank you!",
"senderId": "alice"
"senderId": "alice",
"recipientId": "david",
"timestamp": "07:45:00 AM"
},
{
"data": "You're welcome.",
"senderId": "david"
"senderId": "david",
"recipientId": "alice",
"timestamp": "07:50:00 AM"
},
{
"data": "Let me know if you need anything else.",
"senderId": "alice"
"senderId": "alice",
"recipientId": "david",
"timestamp": "07:55:00 AM"
}
]
},
@ -71,19 +95,27 @@
"messages": [
{
"data": "Eve, do you have the meeting details?",
"senderId": "alice"
"senderId": "alice",
"recipientId": "evead",
"timestamp": "08:00:00 AM"
},
{
"data": "Yes, I just sent them to you.",
"senderId": "evead"
"senderId": "evead",
"recipientId": "alice",
"timestamp": "08:05:00 AM"
},
{
"data": "Got it, thanks!",
"senderId": "alice"
"senderId": "alice",
"recipientId": "evead",
"timestamp": "08:10:00 AM"
},
{
"data": "You're welcome.",
"senderId": "evead"
"senderId": "evead",
"recipientId": "alice",
"timestamp": "08:15:00 AM"
}
]
},
@ -93,19 +125,27 @@
"messages": [
{
"data": "Can you review this document for me?",
"senderId": "alice"
"senderId": "alice",
"recipientId": "frank",
"timestamp": "08:20:00 AM"
},
{
"data": "Sure, I'll take a look.",
"senderId": "frank"
"senderId": "frank",
"recipientId": "alice",
"timestamp": "08:25:00 AM"
},
{
"data": "Thanks, much appreciated!",
"senderId": "alice"
"senderId": "alice",
"recipientId": "frank",
"timestamp": "08:30:00 AM"
},
{
"data": "No problem.",
"senderId": "frank"
"senderId": "frank",
"recipientId": "alice",
"timestamp": "08:35:00 AM"
}
]
},
@ -115,19 +155,27 @@
"messages": [
{
"data": "Hey Grace, let's meet up for coffee!",
"senderId": "alice"
"senderId": "alice",
"recipientId": "grace",
"timestamp": "08:40:00 AM"
},
{
"data": "Sounds good, when are you free?",
"senderId": "grace"
"senderId": "grace",
"recipientId": "alice",
"timestamp": "08:45:00 AM"
},
{
"data": "How about tomorrow afternoon?",
"senderId": "alice"
"senderId": "alice",
"recipientId": "grace",
"timestamp": "08:50:00 AM"
},
{
"data": "Works for me!",
"senderId": "grace"
"senderId": "grace",
"recipientId": "alice",
"timestamp": "08:55:00 AM"
}
]
},
@ -137,19 +185,27 @@
"messages": [
{
"data": "Hannah, do you have a moment?",
"senderId": "alice"
"senderId": "alice",
"recipientId": "hanna",
"timestamp": "09:00:00 AM"
},
{
"data": "Sure, what's up?",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "alice",
"timestamp": "09:05:00 AM"
},
{
"data": "Just wanted to check on the report.",
"senderId": "alice"
"senderId": "alice",
"recipientId": "hanna",
"timestamp": "09:10:00 AM"
},
{
"data": "I'll send it soon.",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "alice",
"timestamp": "09:15:00 AM"
}
]
},
@ -159,19 +215,27 @@
"messages": [
{
"data": "Ian, have you completed the review?",
"senderId": "alice"
"senderId": "alice",
"recipientId": "ianda",
"timestamp": "09:20:00 AM"
},
{
"data": "Yes, I sent my feedback.",
"senderId": "ianda"
"senderId": "ianda",
"recipientId": "alice",
"timestamp": "09:25:00 AM"
},
{
"data": "Thanks for that.",
"senderId": "alice"
"senderId": "alice",
"recipientId": "ianda",
"timestamp": "09:30:00 AM"
},
{
"data": "Anytime!",
"senderId": "ianda"
"senderId": "ianda",
"recipientId": "alice",
"timestamp": "09:35:00 AM"
}
]
},
@ -181,19 +245,27 @@
"messages": [
{
"data": "Jill, let's schedule a catch-up meeting.",
"senderId": "alice"
"senderId": "alice",
"recipientId": "jillt",
"timestamp": "09:40:00 AM"
},
{
"data": "Sounds good, when works for you?",
"senderId": "jillt"
"senderId": "jillt",
"recipientId": "alice",
"timestamp": "09:45:00 AM"
},
{
"data": "Tomorrow afternoon?",
"senderId": "alice"
"senderId": "alice",
"recipientId": "jillt",
"timestamp": "09:50:00 AM"
},
{
"data": "That works for me!",
"senderId": "jillt"
"senderId": "jillt",
"recipientId": "alice",
"timestamp": "09:55:00 AM"
}
]
},
@ -203,19 +275,27 @@
"messages": [
{
"data": "Eve, did you send the schedule?",
"senderId": "alice"
"senderId": "alice",
"recipientId": "evead",
"timestamp": "10:00:00 AM"
},
{
"data": "Yes, just sent it.",
"senderId": "evead"
"senderId": "evead",
"recipientId": "alice",
"timestamp": "10:05:00 AM"
},
{
"data": "Thanks, much appreciated!",
"senderId": "alice"
"senderId": "alice",
"recipientId": "evead",
"timestamp": "10:10:00 AM"
},
{
"data": "No problem!",
"senderId": "evead"
"senderId": "evead",
"recipientId": "alice",
"timestamp": "10:15:00 AM"
}
]
},
@ -225,19 +305,27 @@
"messages": [
{
"data": "How's everything going?",
"senderId": "bobsm"
"senderId": "bobsm",
"recipientId": "charl",
"timestamp": "10:20:00 AM"
},
{
"data": "Pretty good, how about you?",
"senderId": "charl"
"senderId": "charl",
"recipientId": "bobsm",
"timestamp": "10:25:00 AM"
},
{
"data": "Can't complain!",
"senderId": "bobsm"
"senderId": "bobsm",
"recipientId": "charl",
"timestamp": "10:30:00 AM"
},
{
"data": "Glad to hear that.",
"senderId": "charl"
"senderId": "charl",
"recipientId": "bobsm",
"timestamp": "10:35:00 AM"
}
]
},
@ -247,19 +335,27 @@
"messages": [
{
"data": "Can you send the report?",
"senderId": "bobsm"
"senderId": "bobsm",
"recipientId": "david",
"timestamp": "10:40:00 AM"
},
{
"data": "I'll send it in an hour.",
"senderId": "david"
"senderId": "david",
"recipientId": "bobsm",
"timestamp": "10:45:00 AM"
},
{
"data": "Perfect, thanks.",
"senderId": "bobsm"
"senderId": "bobsm",
"recipientId": "david",
"timestamp": "10:50:00 AM"
},
{
"data": "No problem.",
"senderId": "david"
"senderId": "david",
"recipientId": "bobsm",
"timestamp": "10:55:00 AM"
}
]
},
@ -269,19 +365,27 @@
"messages": [
{
"data": "Hey Eve, how's it going?",
"senderId": "charl"
"senderId": "charl",
"recipientId": "evead",
"timestamp": "11:00:00 AM"
},
{
"data": "Good, how about you?",
"senderId": "evead"
"senderId": "evead",
"recipientId": "charl",
"timestamp": "11:05:00 AM"
},
{
"data": "Can't complain!",
"senderId": "charl"
"senderId": "charl",
"recipientId": "evead",
"timestamp": "11:10:00 AM"
},
{
"data": "Glad to hear.",
"senderId": "evead"
"senderId": "evead",
"recipientId": "charl",
"timestamp": "11:15:00 AM"
}
]
},
@ -291,19 +395,27 @@
"messages": [
{
"data": "Do you have time to talk today?",
"senderId": "charl"
"senderId": "charl",
"recipientId": "frank",
"timestamp": "11:20:00 AM"
},
{
"data": "I have a meeting, but I can chat afterward.",
"senderId": "frank"
"senderId": "frank",
"recipientId": "charl",
"timestamp": "11:25:00 AM"
},
{
"data": "Sounds good.",
"senderId": "charl"
"senderId": "charl",
"recipientId": "frank",
"timestamp": "11:30:00 AM"
},
{
"data": "I'll message you after.",
"senderId": "frank"
"senderId": "frank",
"recipientId": "charl",
"timestamp": "11:35:00 AM"
}
]
},
@ -313,19 +425,27 @@
"messages": [
{
"data": "Did you review the document?",
"senderId": "david"
"senderId": "david",
"recipientId": "frank",
"timestamp": "11:40:00 AM"
},
{
"data": "Yes, it's all good.",
"senderId": "frank"
"senderId": "frank",
"recipientId": "david",
"timestamp": "11:45:00 AM"
},
{
"data": "Great, thanks for the quick turnaround!",
"senderId": "david"
"senderId": "david",
"recipientId": "frank",
"timestamp": "11:50:00 AM"
},
{
"data": "No worries!",
"senderId": "frank"
"senderId": "frank",
"recipientId": "david",
"timestamp": "11:55:00 AM"
}
]
},
@ -335,19 +455,27 @@
"messages": [
{
"data": "Grace, can you send the updated schedule?",
"senderId": "david"
"senderId": "david",
"recipientId": "grace",
"timestamp": "12:00:00 PM"
},
{
"data": "Yes, I'll send it in a few minutes.",
"senderId": "grace"
"senderId": "grace",
"recipientId": "david",
"timestamp": "12:05:00 PM"
},
{
"data": "Thanks, much appreciated!",
"senderId": "david"
"senderId": "david",
"recipientId": "grace",
"timestamp": "12:10:00 PM"
},
{
"data": "You're welcome!",
"senderId": "grace"
"senderId": "grace",
"recipientId": "david",
"timestamp": "12:15:00 PM"
}
]
},
@ -357,19 +485,27 @@
"messages": [
{
"data": "How are you today?",
"senderId": "frank"
"senderId": "frank",
"recipientId": "grace",
"timestamp": "12:20:00 PM"
},
{
"data": "I'm doing well, thanks for asking.",
"senderId": "grace"
"senderId": "grace",
"recipientId": "frank",
"timestamp": "12:25:00 PM"
},
{
"data": "Glad to hear that.",
"senderId": "frank"
"senderId": "frank",
"recipientId": "grace",
"timestamp": "12:30:00 PM"
},
{
"data": "How about you?",
"senderId": "grace"
"senderId": "grace",
"recipientId": "frank",
"timestamp": "12:35:00 PM"
}
]
},
@ -379,19 +515,27 @@
"messages": [
{
"data": "Did you attend the meeting?",
"senderId": "frank"
"senderId": "frank",
"recipientId": "hanna",
"timestamp": "12:40:00 PM"
},
{
"data": "Yes, it was productive.",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "frank",
"timestamp": "12:45:00 PM"
},
{
"data": "Good to hear!",
"senderId": "frank"
"senderId": "frank",
"recipientId": "hanna",
"timestamp": "12:50:00 PM"
},
{
"data": "Indeed, lots to follow up on.",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "frank",
"timestamp": "12:55:00 PM"
}
]
},
@ -401,19 +545,27 @@
"messages": [
{
"data": "Can we meet later today?",
"senderId": "grace"
"senderId": "grace",
"recipientId": "hanna",
"timestamp": "01:00:00 PM"
},
{
"data": "Sure, what's a good time?",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "grace",
"timestamp": "01:05:00 PM"
},
{
"data": "How about 3 PM?",
"senderId": "grace"
"senderId": "grace",
"recipientId": "hanna",
"timestamp": "01:10:00 PM"
},
{
"data": "Works for me.",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "grace",
"timestamp": "01:15:00 PM"
}
]
},
@ -423,19 +575,27 @@
"messages": [
{
"data": "Ian, did you get the message I sent?",
"senderId": "grace"
"senderId": "grace",
"recipientId": "ianda",
"timestamp": "01:20:00 PM"
},
{
"data": "Yes, I'll respond soon.",
"senderId": "ianda"
"senderId": "ianda",
"recipientId": "grace",
"timestamp": "01:25:00 PM"
},
{
"data": "Thanks, appreciate it!",
"senderId": "grace"
"senderId": "grace",
"recipientId": "ianda",
"timestamp": "01:30:00 PM"
},
{
"data": "You're welcome!",
"senderId": "ianda"
"senderId": "ianda",
"recipientId": "grace",
"timestamp": "01:35:00 PM"
}
]
},
@ -445,19 +605,27 @@
"messages": [
{
"data": "Ian, do you have a minute?",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "ianda",
"timestamp": "01:40:00 PM"
},
{
"data": "Yes, what do you need?",
"senderId": "ianda"
"senderId": "ianda",
"recipientId": "hanna",
"timestamp": "01:45:00 PM"
},
{
"data": "Just a quick update on the project.",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "ianda",
"timestamp": "01:50:00 PM"
},
{
"data": "I'll email you the details.",
"senderId": "ianda"
"senderId": "ianda",
"recipientId": "hanna",
"timestamp": "01:55:00 PM"
}
]
},
@ -467,19 +635,27 @@
"messages": [
{
"data": "Jill, can we talk tomorrow?",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "jillt",
"timestamp": "02:00:00 PM"
},
{
"data": "Yes, I'm free after 2 PM.",
"senderId": "jillt"
"senderId": "jillt",
"recipientId": "hanna",
"timestamp": "02:05:00 PM"
},
{
"data": "Perfect, see you then.",
"senderId": "hanna"
"senderId": "hanna",
"recipientId": "jillt",
"timestamp": "02:10:00 PM"
},
{
"data": "Looking forward to it.",
"senderId": "jillt"
"senderId": "jillt",
"recipientId": "hanna",
"timestamp": "02:15:00 PM"
}
]
},
@ -489,19 +665,27 @@
"messages": [
{
"data": "Jill, I have the files you requested.",
"senderId": "ianda"
"senderId": "ianda",
"recipientId": "jillt",
"timestamp": "02:20:00 PM"
},
{
"data": "Thanks, please send them over.",
"senderId": "jillt"
"senderId": "jillt",
"recipientId": "ianda",
"timestamp": "02:25:00 PM"
},
{
"data": "I'll send them right now.",
"senderId": "ianda"
"senderId": "ianda",
"recipientId": "jillt",
"timestamp": "02:30:00 PM"
},
{
"data": "Great, thanks again!",
"senderId": "jillt"
"senderId": "jillt",
"recipientId": "ianda",
"timestamp": "02:35:00 PM"
}
]
}

38
stubs/api/chat/index.js
View File

@ -2,11 +2,17 @@ const chatRouter = require('express').Router();
module.exports = chatRouter;
const { getChatFromDB, getUsersChats, addChatToDB, getUserFromDB } = require('../db');
const { getChatFromDB, getUsersChats, addChatToDB, getUserFromDB,
addMessageToChat} = require('../db');
chatRouter.get('/item/:id1/:id2', (req, res) => {
const { id1, id2 } = req.params;
console.log("Request get in /chat:", id1, id2)
console.log("Request get in /chat:", id1, id2);
if (id1 === id2) {
res.status(400).send({message: 'Ids should be different'});
return;
}
const chat = getChatFromDB(id1, id2);
@ -19,7 +25,12 @@ chatRouter.get('/item/:id1/:id2', (req, res) => {
chatRouter.post('/item/:id1/:id2', (req, res) => {
const { id1, id2 } = req.params;
console.log("Request post in /chat:", id1, id2)
console.log("Request post in /chat:", id1, id2);
if (id1 === id2) {
res.status(400).send({message: 'Ids should be different'});
return;
}
const chat = getChatFromDB(id1, id2);
@ -57,3 +68,24 @@ chatRouter.get('/list/:id', (req, res) => {
res.status(200).send({chats: userChats});
}
})
chatRouter.post('/message/:sender/:receiver', (req, res) => {
const { sender, receiver } = req.params;
const { message } = req.body;
console.log("Request post /message in /chat:", sender, receiver, message);
const chat = getChatFromDB(sender, receiver);
if (!chat) {
// Chat already exists
res.status(400).send({message: "Such chat does not exist"});
} else {
if (!getUserFromDB(sender) || !getUserFromDB(receiver)) {
res.status(404).send({message: 'Such people do not exist'});
} else {
// Add new message
addMessageToChat(chat, message);
res.status(200).send({});
}
}
})

6
stubs/api/db.js
View File

@ -52,6 +52,10 @@ const getUsersChats = (userID) => {
}
}
const addMessageToChat = (chat, msg) => {
chat.messages.push(msg);
}
const deleteChatFromDB = (firstID, secondID) => {
const index = chats.findIndex(item =>
(item.id1 === firstID && item.id2 === secondID) || (item.id1 === secondID && item.id2 === firstID));
@ -67,4 +71,4 @@ const addChatToDB = (chat) => {
module.exports = {users, chats, getUserFromDB, getChatFromDB, addUserToDB,
deleteUserFromDB, addChatToDB, deleteChatFromDB, getUsersChats}
deleteUserFromDB, addChatToDB, deleteChatFromDB, getUsersChats, addMessageToChat}