From 09c5caba5d3d58cec578b1813e93351bdb3ad417 Mon Sep 17 00:00:00 2001
From: Simerus Mahesh <63352151+SimerusM@users.noreply.github.com>
Date: Wed, 28 Aug 2024 22:59:37 -0400
Subject: [PATCH] re-render chat component on chat submit

---
 client/src/components/Chat.js      | 75 ++++++++++++++++++++++++++++++
 client/src/components/ChatInput.js | 16 +++----
 client/src/pages/MeetingPage.js    | 74 ++++++-----------------------
 3 files changed, 97 insertions(+), 68 deletions(-)
 create mode 100644 client/src/components/Chat.js

diff --git a/client/src/components/Chat.js b/client/src/components/Chat.js
new file mode 100644
index 0000000..091154a
--- /dev/null
+++ b/client/src/components/Chat.js
@@ -0,0 +1,75 @@
+// src/components/Chat.js
+import React, { useState, useRef, useCallback, useEffect } 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();
+  };
+
+  useEffect(() => {
+    initializeChat();
+  }, [meeting_id, username, socket]);
+
+  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]);
+
+  const getProfilePicture = (name) => {
+    return `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random`;
+  };
+
+  return (
+    <div className="w-1/4 bg-white p-4 flex flex-col">
+      <h2 className="text-xl mb-4">Chat</h2>
+      <div className="flex-1 overflow-y-auto mb-4">
+        {chatHistory.map((msg, index) => (
+          <div key={index} className="mb-2 flex items-center">
+            <img 
+              src={getProfilePicture(msg.sender)} 
+              alt={`${msg.sender}'s avatar`} 
+              className="w-8 h-8 rounded-full mr-2"
+            />
+            <div>
+              <strong>{msg.sender}:</strong> {msg.text}
+            </div>
+          </div>
+        ))}
+      </div>
+      <ChatInput onSend={handleSendMessage} />
+    </div>
+  );
+};
+
+Chat.propTypes = {
+  meeting_id: PropTypes.string.isRequired,
+  username: PropTypes.string.isRequired,
+  socket: PropTypes.object.isRequired,
+};
+
+export default Chat;
diff --git a/client/src/components/ChatInput.js b/client/src/components/ChatInput.js
index f5dc353..6c9beb3 100644
--- a/client/src/components/ChatInput.js
+++ b/client/src/components/ChatInput.js
@@ -2,35 +2,33 @@ import React, { useRef } from 'react';
 import Button from '../components/Button';
 import PropTypes from 'prop-types';
 
-const ChatInput = ({ onSend }) => {
+const ChatInputSection = ({ onSend }) => {
   const inputRef = useRef();
 
   const handleSendMessage = (e) => {
-    e.preventDefault();
+    e.preventDefault(); // Prevent the form from causing a page reload
     const message = inputRef.current.value.trim();
     if (message) {
       onSend(message);
       inputRef.current.value = ''; // Clear the input after sending
-    } else {
-      console.error('Message cannot be empty');
     }
   };
 
   return (
-    <div className="flex">
+    <form onSubmit={handleSendMessage} className="flex">
       <input
         ref={inputRef}
         type="text"
         className="flex-1 px-2 py-1 border rounded-l"
         placeholder="Type a message..."
       />
-      <Button onClick={handleSendMessage} className="rounded-l-none">Send</Button>
-    </div>
+      <Button type="submit" className="rounded-l-none">Send</Button>
+    </form>
   );
 };
 
-ChatInput.propTypes = {
+ChatInputSection.propTypes = {
   onSend: PropTypes.func.isRequired,
 };
 
-export default ChatInput;
+export default ChatInputSection;
diff --git a/client/src/pages/MeetingPage.js b/client/src/pages/MeetingPage.js
index 55f16d3..f1bc1e8 100644
--- a/client/src/pages/MeetingPage.js
+++ b/client/src/pages/MeetingPage.js
@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import io from 'socket.io-client';
-import ChatHandler from '../services/chatHandler';
 import RTCHandler from '../services/rtcHandler';
-import ChatInput from '../components/ChatInput';
+import Chat from '../components/Chat';
 
 import Button from '../components/Button';
 import toast, { Toaster } from 'react-hot-toast';
@@ -22,9 +21,6 @@ const MeetingPage = () => {
   const [isMuted, setIsMuted] = useState(false);
   const [isVideoOff, setIsVideoOff] = useState(false);
 
-  const chatHandler = useRef(null);
-  const [chatHistory, setChatHistory] = useState([]);
-
   const initializeMeeting = () => {
     if (!username) {
       toast.error('Please enter a username before joining a meeting.');
@@ -47,10 +43,8 @@ const MeetingPage = () => {
       console.error(error);
       navigate('/');
       toast.error(error.message);
-    }
+    };
 
-    chatHandler.current = new ChatHandler(meeting_id, username, socketRef.current, setChatHistory, errorHandler);
-    chatHandler.current.initialize();
     rtcHandler.current = new RTCHandler(meeting_id, username, socketRef.current, setPeers, errorHandler);
     rtcHandler.current.initialize();
   };
@@ -61,16 +55,14 @@ const MeetingPage = () => {
     return () => {
       rtcHandler.current.cleanup();
       socketRef.current.disconnect();
-    }
+    };
   }, []);
 
   const toggleMute = () => {
     setIsMuted(prevState => {
       const newMutedState = !prevState;
-      // Mute or unmute the audio track in the local stream
       if (rtcHandler.current && rtcHandler.current.localStream) {
         rtcHandler.current.localStream.getAudioTracks().forEach(track => {
-          console.log(track);
           track.enabled = !newMutedState;
         });
       }
@@ -81,10 +73,8 @@ const MeetingPage = () => {
   const toggleVideo = () => {
     setIsVideoOff(prevState => {
       const newVideoState = !prevState;
-      // Turn on or off the video track in the local stream
       if (rtcHandler.current && rtcHandler.current.localStream) {
         rtcHandler.current.localStream.getVideoTracks().forEach(track => {
-          console.log(track);
           track.enabled = !newVideoState;
         });
       }
@@ -92,24 +82,6 @@ const MeetingPage = () => {
     });
   };
 
-  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]);
-  
-
-  const getProfilePicture = (name) => {
-    return `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random`;
-  };
-
-  if (!username || !rtcHandler.current) {
-    return null;
-  }
-
   const VideoElement = React.memo(({ stream, muted, peerName }) => {
     const videoRef = useRef();
 
@@ -121,29 +93,15 @@ const MeetingPage = () => {
 
     return (
       <div className="video-container">
-        <video ref={videoRef} autoPlay playsInline muted={muted} className="video-element"/>
+        <video ref={videoRef} autoPlay playsInline muted={muted} className="video-element" />
         <p className="video-username">{peerName}</p>
       </div>
     );
   });
 
-  const ChatMessages = React.memo(({ chatHistory }) => (
-    <div className="flex-1 overflow-y-auto mb-4">
-      {chatHistory.map((msg, index) => (
-        <div key={index} className="mb-2 flex items-center">
-          <img 
-            src={getProfilePicture(msg.sender)} 
-            alt={`${msg.sender}'s avatar`} 
-            className="w-8 h-8 rounded-full mr-2"
-          />
-          <div>
-            <strong>{msg.sender}:</strong> {msg.text}
-          </div>
-        </div>
-      ))}
-    </div>
-  ));
-  
+  if (!username || !rtcHandler.current) {
+    return null;
+  }
 
   return (
     <div className="flex flex-col h-screen bg-gray-100">
@@ -154,23 +112,21 @@ const MeetingPage = () => {
       </header>
       <main className="flex flex-1 overflow-hidden">
         <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
-          <VideoElement stream={rtcHandler.current.localStream} muted={true} peerName="You" />
+          {rtcHandler.current.localStream && (
+            <VideoElement stream={rtcHandler.current.localStream} muted={true} peerName="You" />
+          )}
           {Object.entries(peers).map(([peerUsername, peer]) => (
             peerUsername !== username && (
-              <VideoElement 
-                key={peerUsername} 
-                stream={peer.stream} 
-                muted={false} 
+              <VideoElement
+                key={peerUsername}
+                stream={peer.stream}
+                muted={false}
                 peerName={peerUsername}
               />
             )
           ))}
         </div>
-        <div className="w-1/4 bg-white p-4 flex flex-col">
-          <h2 className="text-xl mb-4">Chat</h2>
-          <ChatMessages chatHistory={chatHistory} />
-          <ChatInput onSend={handleSendMessage} />
-        </div>
+        <Chat meeting_id={meeting_id} username={username} socket={socketRef.current} />
       </main>
       <footer className="bg-gray-200 p-4 flex justify-center space-x-4">
         <Button onClick={toggleMute}>{isMuted ? 'Unmute' : 'Mute'}</Button>