diff --git a/package-lock.json b/package-lock.json index 42d1498..31b584d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16460,20 +16460,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "license": "Apache-2.0", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz", diff --git a/src/components/Chat/LiveChat.js b/src/components/Chat/LiveChat.js index e3a2b01..7ecefd7 100644 --- a/src/components/Chat/LiveChat.js +++ b/src/components/Chat/LiveChat.js @@ -1,60 +1,71 @@ -import React, { useState, useEffect, useRef } from 'react'; -import { FiSend, FiDollarSign, FiMessageCircle, FiWifi, FiWifiOff, FiLoader, FiRefreshCw } from 'react-icons/fi'; -import { toast } from 'react-toastify'; -import { useAuth } from '../../context/AuthContext'; -import ChatMessage from './ChatMessage'; -import SuperChatModal from './SuperChatModal'; -import useWebSocket from '../../hooks/useWebSocket'; -import api from '../../services/api'; +import { useRef, useState } from "react"; +import { + FiDollarSign, + FiLoader, + FiMessageCircle, + FiRefreshCw, + FiSend, + FiWifi, + FiWifiOff, +} from "react-icons/fi"; +import { toast } from "react-toastify"; +import { useAuth } from "../../context/AuthContext"; +import { useChatScroll } from "../../hooks/useChatScroll"; +import useWebSocket from "../../hooks/useWebSocket"; +import ChatMessage from "./ChatMessage"; +import SuperChatModal from "./SuperChatModal"; const LiveChat = () => { const { user } = useAuth(); const [messages, setMessages] = useState([]); - const [inputMessage, setInputMessage] = useState(''); + const [inputMessage, setInputMessage] = useState(""); const [showSuperChatModal, setShowSuperChatModal] = useState(false); const [superChats, setSuperChats] = useState([]); const messagesEndRef = useRef(null); - - const { sendMessage, isConnected, connectionStatus, manualReconnect } = useWebSocket({ - onMessage: (message) => { - console.log('LiveChat received message:', message); - setMessages(prev => { - console.log('Previous messages:', prev.length); - const updated = [...prev, message]; - console.log('Updated messages:', updated.length); - return updated; - }); - scrollToBottom(); - }, - onConnect: () => { - console.log('WebSocket connected in LiveChat'); - fetchRecentMessages(); - }, - onDisconnect: () => { - console.log('WebSocket disconnected in LiveChat'); - } - }); - useEffect(() => { - // fetchSuperChats(); - // const interval = setInterval(fetchSuperChats, 30000); - // return () => clearInterval(interval); - }, []); + const chatWindowRef = useChatScroll(messages); + + const { sendMessage, isConnected, connectionStatus, manualReconnect } = + useWebSocket({ + onMessage: (message) => { + console.log("LiveChat received message:", message); + setMessages((prev) => { + console.log("Previous messages:", prev.length); + const updated = [...prev, message]; + console.log("Updated messages:", updated.length); + return updated; + }); + // scrollToBottom(); + }, + onConnect: () => { + console.log("WebSocket connected in LiveChat"); + fetchRecentMessages(); + }, + onDisconnect: () => { + console.log("WebSocket disconnected in LiveChat"); + }, + }); - useEffect(() => { - scrollToBottom(); - }, [messages]); + // useEffect(() => { + // // fetchSuperChats(); + // // const interval = setInterval(fetchSuperChats, 30000); + // // return () => clearInterval(interval); + // }, []); + + // useEffect(() => { + // // scrollToBottom(); + // }, [messages]); const fetchRecentMessages = async () => { try { // Recent messages will come through WebSocket connection, not HTTP API // This function is called onConnect, but recent messages are sent automatically // by the WebSocket server when client connects, so we don't need to fetch separately - console.log('WebSocket connected - waiting for recent messages...'); + console.log("WebSocket connected - waiting for recent messages..."); // Clear messages when reconnecting to avoid duplicates setMessages([]); } catch (error) { - console.error('Error in fetchRecentMessages:', error); + console.error("Error in fetchRecentMessages:", error); } }; @@ -69,66 +80,69 @@ const LiveChat = () => { const handleSendMessage = (e) => { e.preventDefault(); - + if (!user) { - toast.warning('Please login to send messages'); + toast.warning("Please login to send messages"); return; } - + if (!inputMessage.trim()) return; - + if (isConnected) { sendMessage({ - type: 'text', + type: "text", message: inputMessage, - username: user.email?.split('@')[0] || 'Anonymous', - user_id: user.id + username: user.email?.split("@")[0] || "Anonymous", + user_id: user.id, }); - setInputMessage(''); + setInputMessage(""); } else { - toast.error('Chat connection lost. Please refresh the page.'); + toast.error("Chat connection lost. Please refresh the page."); } }; const handleSuperChatSuccess = (superchat) => { sendMessage({ - type: 'superchat', + type: "superchat", message: superchat.message, - username: user.email?.split('@')[0] || 'Anonymous', + username: user.email?.split("@")[0] || "Anonymous", user_id: user.id, - amount: superchat.amount + amount: superchat.amount, }); setShowSuperChatModal(false); // fetchSuperChats(); - toast.success('SuperChat sent successfully!'); + toast.success("SuperChat sent successfully!"); }; const scrollToBottom = () => { setTimeout(() => { - messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, 100); }; return ( -
+

Live Chat
- {connectionStatus === 'connected' && ( + {connectionStatus === "connected" && ( Connected )} - {connectionStatus === 'connecting' && ( + {connectionStatus === "connecting" && ( Connecting... )} - {connectionStatus === 'disconnected' && ( + {connectionStatus === "disconnected" && ( <> @@ -150,12 +164,16 @@ const LiveChat = () => {
- ℹ️ Chat Info: All messages are completely anonymous. - Inappropriate words are censored. Mods will remove personal targeted messages. + ℹ️ Chat Info: All messages are + completely anonymous. Inappropriate words are censored. Mods will + remove personal targeted messages.
-
+
{messages.length === 0 ? (
@@ -163,10 +181,13 @@ const LiveChat = () => {
) : ( messages.map((msg, index) => ( - + )) )} -
+ {/*
*/}
@@ -177,17 +198,17 @@ const LiveChat = () => { value={inputMessage} onChange={(e) => setInputMessage(e.target.value)} placeholder={ - connectionStatus === 'connected' - ? "Type your message..." - : connectionStatus === 'connecting' + connectionStatus === "connected" + ? "Type your message..." + : connectionStatus === "connecting" ? "Connecting to chat..." : "Chat disconnected - click retry to reconnect" } - disabled={connectionStatus !== 'connected'} + disabled={connectionStatus !== "connected"} className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-theme-accent-yellow disabled:bg-gray-100 disabled:text-gray-500" maxLength={200} /> -
@@ -227,4 +248,4 @@ const LiveChat = () => { ); }; -export default LiveChat; \ No newline at end of file +export default LiveChat; diff --git a/src/hooks/useChatScroll.js b/src/hooks/useChatScroll.js new file mode 100644 index 0000000..58de700 --- /dev/null +++ b/src/hooks/useChatScroll.js @@ -0,0 +1,22 @@ +import React from "react"; + +export function useChatScroll(dep) { + const ref = React.useRef(null); + + React.useLayoutEffect(() => { + const node = ref.current; + if (node) { + const shouldScroll = + node.scrollTop + node.clientHeight + 20 >= node.scrollHeight; + + if (shouldScroll) { + node.scrollTo({ + top: node.scrollHeight, + behavior: "smooth", + }); + } + } + }, [dep]); // The effect runs whenever the dependency 'dep' changes. + + return ref; +}