diff --git a/client/src/components/Chat.js b/client/src/components/Chat.js
index 091154a..329f6bc 100644
--- a/client/src/components/Chat.js
+++ b/client/src/components/Chat.js
@@ -1,44 +1,24 @@
-// src/components/Chat.js
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import toast from 'react-hot-toast';
-import Button from './Button';
-import ChatHandler from '../services/chatHandler';
import ChatInput from './ChatInput';
-
-const Chat = ({ meeting_id, username, socket }) => {
- const [chatHistory, setChatHistory] = useState([]);
- const chatHandler = useRef(null);
-
- const initializeChat = () => {
- if (!username) {
- toast.error('Please enter a username before joining a meeting.');
- return;
- }
-
- const errorHandler = (error) => {
- console.error(error);
- toast.error(error.message);
- }
-
- // Assuming ChatHandler is a utility to handle the chat logic
- chatHandler.current = new ChatHandler(meeting_id, username, socket, setChatHistory, errorHandler);
- chatHandler.current.initialize();
- };
+const Chat = ({ chatHandler, initialChatHistory }) => {
+ const [chatHistory, setChatHistory] = useState(initialChatHistory);
useEffect(() => {
- initializeChat();
- }, [meeting_id, username, socket]);
+ // Setting the listener so that chatHandler can update chatHistory when new messages arrive
+ chatHandler.setChatHistoryListener(setChatHistory);
+ }, [chatHandler]);
const handleSendMessage = useCallback((message) => {
if (!message.trim()) {
toast.error('Please enter a message before sending.');
return;
}
- chatHandler.current.sendMessage(message);
- setChatHistory(prevHistory => [...prevHistory, { sender: username, text: message }]);
- }, [username]);
+ chatHandler.sendMessage(message);
+ setChatHistory(prevHistory => [...prevHistory, { sender: chatHandler.username, text: message }]);
+ }, [chatHandler]);
const getProfilePicture = (name) => {
return `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random`;
@@ -67,9 +47,8 @@ const Chat = ({ meeting_id, username, socket }) => {
};
Chat.propTypes = {
- meeting_id: PropTypes.string.isRequired,
- username: PropTypes.string.isRequired,
- socket: PropTypes.object.isRequired,
+ chatHandler: PropTypes.object.isRequired,
+ initialChatHistory: PropTypes.array.isRequired,
};
export default Chat;
diff --git a/client/src/components/ChatInput.js b/client/src/components/ChatInput.js
index 6c9beb3..3599b6f 100644
--- a/client/src/components/ChatInput.js
+++ b/client/src/components/ChatInput.js
@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
import Button from '../components/Button';
import PropTypes from 'prop-types';
-const ChatInputSection = ({ onSend }) => {
+const ChatInput = ({ onSend }) => {
const inputRef = useRef();
const handleSendMessage = (e) => {
@@ -27,8 +27,8 @@ const ChatInputSection = ({ onSend }) => {
);
};
-ChatInputSection.propTypes = {
+ChatInput.propTypes = {
onSend: PropTypes.func.isRequired,
};
-export default ChatInputSection;
+export default ChatInput;
diff --git a/client/src/pages/MeetingPage.js b/client/src/pages/MeetingPage.js
index f1bc1e8..3387d93 100644
--- a/client/src/pages/MeetingPage.js
+++ b/client/src/pages/MeetingPage.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import { useParams, useLocation, useNavigate } from 'react-router-dom';
import io from 'socket.io-client';
import RTCHandler from '../services/rtcHandler';
@@ -21,7 +21,10 @@ const MeetingPage = () => {
const [isMuted, setIsMuted] = useState(false);
const [isVideoOff, setIsVideoOff] = useState(false);
- const initializeMeeting = () => {
+ const chatHandler = useRef(null);
+ const [chatHistory, setChatHistory] = useState([]);
+
+ const initializeMeeting = async () => {
if (!username) {
toast.error('Please enter a username before joining a meeting.');
navigate('/');
@@ -39,13 +42,26 @@ const MeetingPage = () => {
newSocket.emit('join', { meeting_id: meeting_id, username: username });
});
- const errorHandler = (error) => {
- console.error(error);
- navigate('/');
- toast.error(error.message);
- };
+ // Fetch chat history manually
+ try {
+ const response = await fetch(`${apiUrl}/api/chat_history/${meeting_id}`);
+ const history = await response.json();
+ console.log('Fetched chat history:', history);
+ setChatHistory(history); // Set the fetched chat history
+ } catch (error) {
+ console.error('Failed to fetch chat history:', error);
+ toast.error('Failed to load chat history');
+ }
+
+ // Initialize the ChatHandler after fetching history
+ chatHandler.current = new ChatHandler(meeting_id, username, socketRef.current, setChatHistory);
+ chatHandler.current.initialize();
- rtcHandler.current = new RTCHandler(meeting_id, username, socketRef.current, setPeers, errorHandler);
+ const handlePeerUpdate = (update) => {
+ setPeers(prevPeers => ({ ...prevPeers, ...update }));
+ console.debug('Updated peers:', peers);
+ }
+ rtcHandler.current = new RTCHandler(meeting_id, username, socketRef.current, handlePeerUpdate);
rtcHandler.current.initialize();
};
@@ -82,6 +98,10 @@ const MeetingPage = () => {
});
};
+ if (!username || !rtcHandler.current) {
+ return null;
+ }
+
const VideoElement = React.memo(({ stream, muted, peerName }) => {
const videoRef = useRef();
@@ -126,7 +146,7 @@ const MeetingPage = () => {
)
))}
-
+