Function Discussion

client/src/component/Discussion.jsx:9–248

({ mode })

// eslint-disable-next-line
const Discussion = ({ mode }) => {
  const [messages, setMessages] = useState([]);
  const [messageInput, setMessageInput] = useState('');
  // eslint-disable-next-line
  const [userName, setUserName] = useState('');
  const [showModal, setShowModal] = useState(true);
  // eslint-disable-next-line
  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 emojis = ['😊', '😂', '❤️', '👍', '🎉', '🔥', '✨', '🌟'];

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSubmit = (e) => {
    e.preventDefault();
    const message = messageInput.trim();
    if (message) {
      setMessages(prev => [...prev, {
        id: Date.now(),
        content: message,
        position: 'right',
        sender: 'You',
        timestamp: new Date(),
        status: 'sent'
      }]);
      setMessageInput('');
    }
  };

  const handleEmojiClick = (emoji) => {
    setMessageInput(prev => prev + emoji);
    setShowEmoji(false);
  };

  const handleJoin = (e) => {
    e.preventDefault();
    const name = e.target.username.value.trim();
    if (name) {
      setUserName(name);
      setShowModal(false);
    }
  };

  return (