diff --git a/client/src/component/Discussion.jsx b/client/src/component/Discussion.jsx index 29b2ef6..0df0a45 100644 --- a/client/src/component/Discussion.jsx +++ b/client/src/component/Discussion.jsx @@ -1,155 +1,234 @@ -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 React, { useEffect, useState, useRef } from 'react'; +import { MessageCircle, Users, Send, Smile, Image, Paperclip, Moon, Sun, ChevronDown } from 'lucide-react'; -// Create a Socket -const socket = io("https://bitbox-uxbo.onrender.com", { transports: ["websocket"] }); +const Discussion = ({ mode }) => { + const [messages, setMessages] = useState([]); + const [messageInput, setMessageInput] = useState(''); + const [userName, setUserName] = useState(''); + const [showModal, setShowModal] = useState(true); + const [onlineUsers, setOnlineUsers] = useState([ + { id: 1, name: 'Alice', status: 'active' }, + { id: 2, name: 'Bob', status: 'idle' }, + { id: 3, name: 'Charlie', status: 'active' } + ]); + const [showEmoji, setShowEmoji] = useState(false); + const [isDarkMode, setIsDarkMode] = useState(false); + const [showUserList, setShowUserList] = useState(false); + const messagesEndRef = useRef(null); -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 emojis = ['😊', '😂', '❤️', '👍', '🎉', '🔥', '✨', '🌟']; - 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); - }); - - // 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); - }); - - // 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 + const scrollToBottom = () => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }; - // Function to handle form submission + useEffect(() => { + scrollToBottom(); + }, [messages]); + 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 + if (message) { + setMessages(prev => [...prev, { + id: Date.now(), + content: message, + position: 'right', + sender: 'You', + timestamp: new Date(), + status: 'sent' + }]); + setMessageInput(''); } }; - 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 + + const handleEmojiClick = (emoji) => { + setMessageInput(prev => prev + emoji); + setShowEmoji(false); }; - return ( -
- setIsModalOpen(false)} - onSubmit={handleJoin} - /> -
- {/* Container for displaying chat messages */} -
-
{`Welcome ${userName} to the Bitbox Community`}
- {messages.map((message, index) => ( -
- {message.content} + const handleJoin = (e) => { + e.preventDefault(); + const name = e.target.username.value.trim(); + if (name) { + setUserName(name); + setShowModal(false); + } + }; + + return ( +
+ {/* Main Chat Container */} +
+ {/* Chat Header */} +
+
+
+ +
+

Bitbox Community

+

Where ideas come alive

+
+
+
+ +
- ))} +
- {/* Form for sending messages */} -
-
- setMessageInput(e.target.value)} - /> - -
+
+ {/* Users Sidebar - Slides in/out */} +
+
+

Online Users

+
+ {onlineUsers.map(user => ( +
+
+ {user.name} +
+ ))} +
+
+
+ + {/* Messages Container */} +
+
+ {messages.map((message) => ( +
+
+
+ {message.sender} + + {new Date(message.timestamp).toLocaleTimeString()} + +
+

{message.content}

+ {message.position === 'right' && ( +
+ ✓✓ +
+ )} +
+
+ ))} +
+
+ + {/* Message Input */} +
+
+
+ setMessageInput(e.target.value)} + placeholder="Type your message..." + className={`w-full px-4 py-3 pr-12 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 + ${isDarkMode ? 'bg-gray-700 text-white border-gray-600' : 'bg-gray-50 text-gray-800 border-gray-300'} + border transition-colors`} + /> + +
+ + +
+ + {/* Emoji Picker */} + {showEmoji && ( +
+ {emojis.map((emoji) => ( + + ))} +
+ )} +
+
+ + {/* Join Modal */} + {showModal && ( +
+
+

+ Join the Discussion +

+
+
+ + +
+ +
+
+
+ )}
); }; -// Props Validation -Discussion.propTypes = { - title: PropTypes.string, - home: PropTypes.string, - community: PropTypes.string, - discussion: PropTypes.string, - myProjects: PropTypes.string, - about: PropTypes.string, - mode: PropTypes.string, - toggleMode: PropTypes.func, - showAlert: PropTypes.func, - isAuthenticated: PropTypes.bool, -}; - -export default Discussion; +export default Discussion; \ No newline at end of file