diff --git a/client/src/component/Discussion.jsx b/client/src/component/Discussion.jsx
index bc38429..c871e6f 100644
--- a/client/src/component/Discussion.jsx
+++ b/client/src/component/Discussion.jsx
@@ -1,127 +1,155 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import './css/Discussion.css';
-import { io } from 'socket.io-client';
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import "./css/Discussion.css";
+import { io } from "socket.io-client";
// AUDIO
-import recieveMsg from '../assets/music/recieveMsg.mp3';
-import userJoin from '../assets/music/userJoin.mp3';
-import userLeft from '../assets/music/userLeft.mp3';
-import InputModal from './InputModal';
+import recieveMsg from "../assets/music/recieveMsg.mp3";
+import userJoin from "../assets/music/userJoin.mp3";
+import userLeft from "../assets/music/userLeft.mp3";
+import InputModal from "./InputModal";
// Create a Socket
const socket = io("http://localhost:5000", { transports: ["websocket"] });
const Discussion = (props) => {
- const [messages, setMessages] = useState([]); // State to store chat messages
- const [messageInput, setMessageInput] = useState(''); // State to store user input message
- const [userName, setUserName] = useState(''); // State to store user's name
- const [isModalOpen, setIsModalOpen] = useState(false);
+ const [messages, setMessages] = useState([]); // State to store chat messages
+ const [messageInput, setMessageInput] = useState(""); // State to store user input message
+ const [userName, setUserName] = useState(""); // State to store user's name
+ const [isModalOpen, setIsModalOpen] = useState(false);
- useEffect(() => {
- setIsModalOpen(true);
+ useEffect(() => {
+ setIsModalOpen(true);
- socket.on('user-joined', name => {
- // Update messages state with the new user's joining message
- setMessages(prevMessages => [...prevMessages, { content: `${name} joined the chat`, position: 'center1' }]);
- // Play audio when a user joins
- playAudio(userJoin);
- });
+ socket.on("user-joined", (name) => {
+ // Update messages state with the new user's joining message
+ setMessages((prevMessages) => [
+ ...prevMessages,
+ { content: `${name} joined the chat`, position: "center1" },
+ ]);
+ // Play audio when a user joins
+ playAudio(userJoin);
+ });
- // Event listener for receiving a message from the server
- socket.on('receive', data => {
- // Update messages state with the received message
- setMessages(prevMessages => [...prevMessages, { content: `${data.name}: ${data.message}`, position: 'left' }]);
- // Play audio when receiving a message
- playAudio(recieveMsg);
- });
+ // Event listener for receiving a message from the server
+ socket.on("receive", (data) => {
+ // Update messages state with the received message
+ setMessages((prevMessages) => [
+ ...prevMessages,
+ { content: `${data.name}: ${data.message}`, position: "left" },
+ ]);
+ // Play audio when receiving a message
+ playAudio(recieveMsg);
+ });
- // Event listener for a user leaving the chat
- socket.on('left', name => {
- // Update messages state with the user's leaving message
- setMessages(prevMessages => [...prevMessages, { content: `${name} left the chat`, position: 'center2' }]);
- // Play audio when a user leaves
- playAudio(userLeft);
- });
+ // Event listener for a user leaving the chat
+ socket.on("left", (name) => {
+ // Update messages state with the user's leaving message
+ setMessages((prevMessages) => [
+ ...prevMessages,
+ { content: `${name} left the chat`, position: "center2" },
+ ]);
+ // Play audio when a user leaves
+ playAudio(userLeft);
+ });
- // Clean up socket listeners when component unmounts
- return () => {
- socket.off('user-joined');
- socket.off('receive');
- socket.off('left');
- };
-
- }, []);
-
- // Function to handle audio playback
- const playAudio = (audio) => {
- const audioElement = new Audio(audio); // Create new Audio object
- audioElement.play(); // Play the audio
+ // Clean up socket listeners when component unmounts
+ return () => {
+ socket.off("user-joined");
+ socket.off("receive");
+ socket.off("left");
};
+ }, []);
- // Function to handle form submission
- const handleSubmit = (e) => {
- e.preventDefault();
- const message = messageInput.trim();
- if (message !== '') {
- // Append your own message immediately to avoid waiting for the server
- setMessages(prevMessages => [...prevMessages, { content: `You: ${message}`, position: 'right' }]);
- socket.emit('send', message); // Emit 'send' event to the server
- setMessageInput(''); // Clear the message input field
- }
- };
- const handleJoin = (name) => {
- setUserName(name);
- socket.emit('join', name); // Notify the server that a user has joined
- setIsModalOpen(false); // Close the modal after a successful join
- };
- return (
-
- setIsModalOpen(false)}
- onSubmit={handleJoin}
- />
+ // Function to handle audio playback
+ const playAudio = (audio) => {
+ const audioElement = new Audio(audio); // Create new Audio object
+ audioElement.play(); // Play the audio
+ };
-
- {/* Container for displaying chat messages */}
-
-
{`Welcome ${userName} to the Bitbox Community`}
- {messages.map((message, index) => (
-
{message.content}
- ))}
-
+ // Function to handle form submission
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ const message = messageInput.trim();
+ if (message !== "") {
+ // Append your own message immediately to avoid waiting for the server
+ setMessages((prevMessages) => [
+ ...prevMessages,
+ { content: `You: ${message}`, position: "right" },
+ ]);
+ socket.emit("send", message); // Emit 'send' event to the server
+ setMessageInput(""); // Clear the message input field
+ }
+ };
+ const handleJoin = (name) => {
+ setUserName(name);
+ socket.emit("join", name); // Notify the server that a user has joined
+ setIsModalOpen(false); // Close the modal after a successful join
+ };
+ return (
+
+ setIsModalOpen(false)}
+ onSubmit={handleJoin}
+ />
- {/* Form for sending messages */}
-
-
-
+
+ {/* Container for displaying chat messages */}
+