From 75f7d177667dc40c74e42f333d4e2a3e41d6e24a Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Nain Date: Tue, 11 Feb 2025 21:52:25 +0530 Subject: [PATCH 1/3] refactor: Move socket functions to buddySocket file --- client/src/App.jsx | 4 +- client/src/components/BuddyMatcher.jsx | 160 ++--------------------- client/src/lib/buddySocket.js | 172 +++++++++++++++++++++++++ 3 files changed, 188 insertions(+), 148 deletions(-) create mode 100644 client/src/lib/buddySocket.js diff --git a/client/src/App.jsx b/client/src/App.jsx index 131894e1..20845867 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -8,7 +8,7 @@ import NavBar from 'components/NavBar'; import NoPage from './pages/NoPage'; import Profile from './pages/Profile'; import ProtectedRoutes from 'components/ProtectedRoutes'; -import ReactGA from 'react-ga4'; +// import ReactGA from 'react-ga4'; import Searching from 'pages/Searching'; import Settings from 'pages/Settings'; import Start from 'pages/Start'; @@ -18,7 +18,7 @@ import useIsTabActive from './hooks/useIsTabActive'; import MatchFound from './pages/MatchFound'; function App() { - ReactGA.initialize(import.meta.env.VITE_GOOGLE_ANALYTICS); + // ReactGA.initialize(import.meta.env.VITE_GOOGLE_ANALYTICS); const { isLoggedIn } = useAuth(); const { updateOnlineStatus, app } = useApp(); diff --git a/client/src/components/BuddyMatcher.jsx b/client/src/components/BuddyMatcher.jsx index e5f84445..9b35be22 100644 --- a/client/src/components/BuddyMatcher.jsx +++ b/client/src/components/BuddyMatcher.jsx @@ -1,163 +1,31 @@ import { useNavigate } from 'react-router-dom'; -import { - NEW_EVENT_CHAT_RESTORE, - NEW_EVENT_CLOSED, - NEW_EVENT_INACTIVE, - NEW_EVENT_JOIN, - NEW_EVENT_JOINED, -} from '../../../constants.json'; -import { connectWithId, socket } from 'src/lib/socketConnection'; -import { useCallback, useEffect, useRef, useState } from 'react'; - import Anonymous from 'components/Anonymous'; -import { createBrowserNotification } from 'src/lib/browserNotification'; -import { isExplicitDisconnection } from 'src/lib/utils'; import { useApp } from 'src/context/AppContext'; import { useAuth } from 'src/context/AuthContext'; import { useChat } from 'src/context/ChatContext'; import useCloseChat from 'src/hooks/useCloseChat'; -import { useNotification } from 'src/lib/notification'; import ReconnectBanner from './ReconnectBanner'; +import { useBuddySocket } from 'src/lib/buddySocket'; -const defaultLoadingText =

Looking for a random buddy

; const BuddyMatcher = () => { - const { playNotification } = useNotification(); const navigate = useNavigate(); const { authState } = useAuth(); const { createChat, closeChat, closeAllChats } = useChat(); const { startSearch, endSearch, app } = useApp(); const { setLoadingText, startNewSearch } = useCloseChat(); - - const [disconnected, setDisconnected] = useState(false); - const reconnectAttempts = useRef(0); - - function disconnect() { - reconnectAttempts.current = 0; - if (app.currentChatId) { - return; - } - - socket.disconnect(); - setDisconnected(true); - endSearch(); - } - - async function handleReconnect() { - if (socket.connected) { - return; - } - - startSearch(); - setLoadingText(defaultLoadingText); - await connectWithId(app.currentChatId); - } - - const onUserJoined = useCallback(({ roomId, userIds }) => { - playNotification('buddyPaired'); - createBrowserNotification( - "Let's Chat :)", - "You've found a match, don't keep your Partner waiting ⌛" - ); - createChat(roomId, userIds); - endSearch(roomId); - }, []); - - const onRestoreChat = useCallback(({ chats, currentChatId }) => { - Object.values(chats).forEach((chat) => { - createChat(chat.id, chat.userIds, chat.messages, chat.createdAt); - }); - endSearch(currentChatId); - }, []); - - const onConnect = useCallback(() => { - // Here server will be informed that user is searching for - // another user - socket.emit(NEW_EVENT_JOIN, { - loginId: authState.loginId, - email: authState.email, - }); - setDisconnected(false); - }, []); - - const onClose = useCallback((chatId) => { - endSearch(); - closeChat(chatId); - playNotification('chatClosed'); - - if (!confirm('This chat is closed! Would you like to search for a new buddy?')) { - navigate('/'); - return; - } - - createBrowserNotification('Chat Closed', 'Your buddy left the chat'); - startNewSearch(); - }, []); - - const onInactive = useCallback(() => { - closeAllChats(); - }, []); - - const onDisconnect = useCallback((reason) => { - if (isExplicitDisconnection(reason)) { - return; - } - - disconnect(); - }, []); - - const onReconnectAttempt = useCallback((attempts) => { - reconnectAttempts.current = attempts; - }, []); - - const onReconnectError = useCallback(() => { - if (reconnectAttempts.current >= 3) { - disconnect(); - } - }, []); - - useEffect(() => { - const setupSocket = async () => { - if (!app.currentChatId) { - startSearch(); - } - - if (!socket.connected) { - try { - await connectWithId(app.currentChatId); - } catch (error) { - console.error('Failed to connect:', error); - } - } - }; - - setupSocket(); - - socket.on('connect', onConnect); - socket.on(NEW_EVENT_CLOSED, onClose); - socket.on(NEW_EVENT_JOINED, onUserJoined); - socket.on(NEW_EVENT_CHAT_RESTORE, onRestoreChat); - socket.on(NEW_EVENT_INACTIVE, onInactive); - socket.on('disconnect', onDisconnect); - socket.io.on('reconnect_attempt', onReconnectAttempt); - socket.io.on('reconnect_error', onReconnectError); - - return () => { - socket - .off('connect', onConnect) - .off(NEW_EVENT_JOINED, onUserJoined) - .off(NEW_EVENT_CHAT_RESTORE, onRestoreChat) - .off(NEW_EVENT_CLOSED, onClose) - .off(NEW_EVENT_INACTIVE, onInactive) - .off('disconnect', onDisconnect); - - socket.io - .off('reconnect_attempt', onReconnectAttempt) - .off('reconnect_error', onReconnectError); - - socket.disconnect(); - }; - }, [app.currentChatId]); + + const { disconnected,handleReconnect } = useBuddySocket({ + authState, + createChat, + closeChat, + closeAllChats, + startSearch, + endSearch, + app, + setLoadingText, + startNewSearch + }); if (app.isSearching || !app.currentChatId) { navigate('/searching'); @@ -166,4 +34,4 @@ const BuddyMatcher = () => { return disconnected ? : ; }; -export default BuddyMatcher; +export default BuddyMatcher; \ No newline at end of file diff --git a/client/src/lib/buddySocket.js b/client/src/lib/buddySocket.js new file mode 100644 index 00000000..a8223778 --- /dev/null +++ b/client/src/lib/buddySocket.js @@ -0,0 +1,172 @@ +import { useCallback, useEffect, useRef, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { + NEW_EVENT_CHAT_RESTORE, + NEW_EVENT_CLOSED, + NEW_EVENT_INACTIVE, + NEW_EVENT_JOIN, + NEW_EVENT_JOINED, +} from '../../../constants.json'; +import { connectWithId, socket } from 'src/lib/socketConnection'; +import { createBrowserNotification } from 'src/lib/browserNotification'; +import { isExplicitDisconnection } from 'src/lib/utils'; +import { useNotification } from 'src/lib/notification'; + +const DEFAULT_LOADING_TEXT = 'Looking for a random buddy'; + +export const useBuddySocket = ({ +authState, +createChat, +closeChat, +closeAllChats, +startSearch, +endSearch, +app, +setLoadingText, +startNewSearch +}) =>{ + const { playNotification } = useNotification(); + const navigate = useNavigate(); + const [disconnected, setDisconnected] = useState(false); + const reconnectAttempts = useRef(0); + + // function disconnect() { + const disconnect = useCallback(()=>{ + reconnectAttempts.current = 0; + if (app.currentChatId) { + return; + } + + socket.disconnect(); + setDisconnected(true); + endSearch(); + },[app.currentChatId, endSearch]); + + const handleReconnect=useCallback(async()=>{ + if (socket.connected) { + return; + } + + startSearch(); + setLoadingText(DEFAULT_LOADING_TEXT); + await connectWithId(app.currentChatId); + },[app.currentChatId, startSearch, setLoadingText]); + + const onUserJoined = useCallback(({ roomId, userIds }) => { + playNotification('buddyPaired'); + createBrowserNotification( + "Let's Chat :)", + "You've found a match, don't keep your Partner waiting ⌛" + ); + createChat(roomId, userIds); + endSearch(roomId); + }, [playNotification,createChat,endSearch]); + const onRestoreChat = useCallback(({ chats, currentChatId }) => { + Object.values(chats).forEach((chat) => { + createChat(chat.id, chat.userIds, chat.messages, chat.createdAt); + }); + endSearch(currentChatId); + }, [createChat,endSearch]); + const onConnect = useCallback(() => { + // Here server will be informed that user is searching for + // another user + socket.emit(NEW_EVENT_JOIN, { + loginId: authState.loginId, + email: authState.email, + }); + setDisconnected(false); + }, [authState.loginId,authState.email]); + const onClose = useCallback((chatId) => { + endSearch(); + closeChat(chatId); + playNotification('chatClosed'); + + if (!confirm('This chat is closed! Would you like to search for a new buddy?')) { + navigate('/'); + return; + } + + createBrowserNotification('Chat Closed', 'Your buddy left the chat'); + startNewSearch(); + }, [endSearch,closeChat,playNotification,navigate,startNewSearch]); + + const onInactive = useCallback(() => { + closeAllChats(); + }, [closeAllChats]); + + const onDisconnect = useCallback((reason) => { + if (isExplicitDisconnection(reason)) { + return; + } + + disconnect(); + }, [disconnect]); + + const onReconnectAttempt = useCallback((attempts) => { + reconnectAttempts.current = attempts; + }, []); + + const onReconnectError = useCallback(() => { + if (reconnectAttempts.current >= 3) { + disconnect(); + } + }, [disconnect]); + + useEffect(() => { + const setupSocket = async () => { + if (!app.currentChatId) { + startSearch(); + } + + if (!socket.connected) { + try { + await connectWithId(app.currentChatId); + } catch (error) { + console.error('Failed to connect:', error); + } + } + }; + + setupSocket(); + + socket.on('connect', onConnect); + socket.on(NEW_EVENT_CLOSED, onClose); + socket.on(NEW_EVENT_JOINED, onUserJoined); + socket.on(NEW_EVENT_CHAT_RESTORE, onRestoreChat); + socket.on(NEW_EVENT_INACTIVE, onInactive); + socket.on('disconnect', onDisconnect); + socket.io.on('reconnect_attempt', onReconnectAttempt); + socket.io.on('reconnect_error', onReconnectError); + + return () => { + socket + .off('connect', onConnect) + .off(NEW_EVENT_JOINED, onUserJoined) + .off(NEW_EVENT_CHAT_RESTORE, onRestoreChat) + .off(NEW_EVENT_CLOSED, onClose) + .off(NEW_EVENT_INACTIVE, onInactive) + .off('disconnect', onDisconnect); + + socket.io + .off('reconnect_attempt', onReconnectAttempt) + .off('reconnect_error', onReconnectError); + + socket.disconnect(); + }; + }, [ + app.currentChatId, + startSearch, + onConnect, + onClose, + onUserJoined, + onRestoreChat, + onInactive, + onDisconnect, + onReconnectAttempt, + onReconnectError + ]); + return { + disconnected, + handleReconnect + }; +}; From 6eb0960c031761ef3f524723c5d95e0ec4dec618 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Nain <93258349+yuvrajinbhakti@users.noreply.github.com> Date: Wed, 12 Feb 2025 11:51:07 +0530 Subject: [PATCH 2/3] Update App.jsx --- client/src/App.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 20845867..131894e1 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -8,7 +8,7 @@ import NavBar from 'components/NavBar'; import NoPage from './pages/NoPage'; import Profile from './pages/Profile'; import ProtectedRoutes from 'components/ProtectedRoutes'; -// import ReactGA from 'react-ga4'; +import ReactGA from 'react-ga4'; import Searching from 'pages/Searching'; import Settings from 'pages/Settings'; import Start from 'pages/Start'; @@ -18,7 +18,7 @@ import useIsTabActive from './hooks/useIsTabActive'; import MatchFound from './pages/MatchFound'; function App() { - // ReactGA.initialize(import.meta.env.VITE_GOOGLE_ANALYTICS); + ReactGA.initialize(import.meta.env.VITE_GOOGLE_ANALYTICS); const { isLoggedIn } = useAuth(); const { updateOnlineStatus, app } = useApp(); From 3dbf6717ee7ddeded8f8dde712a394bcb71e113d Mon Sep 17 00:00:00 2001 From: Dunsin <78784850+Dun-sin@users.noreply.github.com> Date: Tue, 4 Mar 2025 10:10:42 +0100 Subject: [PATCH 3/3] Apply suggestions from code review --- client/src/components/BuddyMatcher.jsx | 2 +- client/src/lib/buddySocket.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/components/BuddyMatcher.jsx b/client/src/components/BuddyMatcher.jsx index 9b35be22..d5e28f48 100644 --- a/client/src/components/BuddyMatcher.jsx +++ b/client/src/components/BuddyMatcher.jsx @@ -34,4 +34,4 @@ const BuddyMatcher = () => { return disconnected ? : ; }; -export default BuddyMatcher; \ No newline at end of file +export default BuddyMatcher; diff --git a/client/src/lib/buddySocket.js b/client/src/lib/buddySocket.js index a8223778..f1aa056d 100644 --- a/client/src/lib/buddySocket.js +++ b/client/src/lib/buddySocket.js @@ -170,3 +170,4 @@ startNewSearch handleReconnect }; }; +