Merge branch 'new-chat-component'

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;

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;

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 = () => {
             )
           ))}
         </div>
-        <Chat meeting_id={meeting_id} username={username} socket={socketRef.current} />
+        <Chat chatHandler={chatHandler.current} initialChatHistory={chatHistory} />
       </main>
       <footer className="bg-gray-200 p-4 flex justify-center space-x-4">
         <Button onClick={toggleMute}>{isMuted ? 'Unmute' : 'Mute'}</Button>

client/src/services/chatHandler.js

@@ -36,6 +36,10 @@ class ChatHandler {
   sendMessage(text) {
     this.socket.emit('chat_message', { meeting_id: this.meeting_id, text: text, sender: this.username });
   }
+
+  setChatHistoryListener(listener) {
+    this.setChatHistory = listener;
+  }
 }
 
 export default ChatHandler;