From 82178399db6278993c5059c4dbc757452f7a4c5e Mon Sep 17 00:00:00 2001 From: Ayush Majumder Date: Mon, 18 Nov 2024 23:39:39 +0530 Subject: [PATCH 1/2] feat: Separate routes for Searching and Found User --- client/src/App.jsx | 5 +- client/src/components/BuddyMatcher.jsx | 83 +------------- client/src/pages/MatchFound.jsx | 13 +++ client/src/pages/Searching.jsx | 147 ++++++++++++++++++++++++- client/src/pages/Start.jsx | 4 +- 5 files changed, 168 insertions(+), 84 deletions(-) create mode 100644 client/src/pages/MatchFound.jsx diff --git a/client/src/App.jsx b/client/src/App.jsx index 6e0a17fb..131894e1 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -15,6 +15,7 @@ import Start from 'pages/Start'; import { useApp } from 'src/context/AppContext'; import { useAuth } from 'context/AuthContext'; import useIsTabActive from './hooks/useIsTabActive'; +import MatchFound from './pages/MatchFound'; function App() { ReactGA.initialize(import.meta.env.VITE_GOOGLE_ANALYTICS); @@ -57,8 +58,8 @@ function App() { } /> - {/* TODO: Sepreate searching and foundUser into different routes */} - } /> + } /> + } /> } /> } /> } /> diff --git a/client/src/components/BuddyMatcher.jsx b/client/src/components/BuddyMatcher.jsx index 439911b5..da2eb196 100644 --- a/client/src/components/BuddyMatcher.jsx +++ b/client/src/components/BuddyMatcher.jsx @@ -5,14 +5,11 @@ import { NEW_EVENT_INACTIVE, NEW_EVENT_JOIN, NEW_EVENT_JOINED, - NEW_EVENT_STOP_SEARCH, - NEW_EVENT_STOP_SEARCH_SUCCESS, } from '../../../constants.json'; import { connectWithId, socket } from 'src/lib/socketConnection'; import { useCallback, useEffect, useRef, useState } from 'react'; import Anonymous from 'components/Anonymous'; -import { ThreeDots } from 'react-loading-icons'; import { createBrowserNotification } from 'src/lib/browserNotification'; import { isExplicitDisconnection } from 'src/lib/utils'; import { useApp } from 'src/context/AppContext'; @@ -22,7 +19,6 @@ import useCloseChat from 'src/hooks/useCloseChat'; import { useNotification } from 'src/lib/notification'; import ReconnectBanner from './ReconnectBanner'; -const stoppingSearchLoadingText =

Stopping the search

; const defaultLoadingText =

Looking for a random buddy

; const BuddyMatcher = () => { @@ -31,15 +27,11 @@ const BuddyMatcher = () => { const { authState } = useAuth(); const { createChat, closeChat, closeAllChats } = useChat(); const { startSearch, endSearch, app } = useApp(); - const { setLoadingText, startNewSearch, loadingText } = useCloseChat(); + const { setLoadingText, startNewSearch } = useCloseChat(); const [disconnected, setDisconnected] = useState(false); const reconnectAttempts = useRef(0); - const [isStoppingSearch, setIsStoppingSearch] = useState(false); - - let timeout = null; - function disconnect() { reconnectAttempts.current = 0; if (app.currentChatId) { @@ -51,18 +43,6 @@ const BuddyMatcher = () => { endSearch(); } - const emitStopSearch = useCallback(() => { - socket.emit(NEW_EVENT_STOP_SEARCH, { - loginId: authState.loginId, - email: authState.email, - }); - }, []); - - const handleStopSearch = () => { - emitStopSearch(); - setIsStoppingSearch(true); - }; - async function handleReconnect() { if (socket.connected) { return; @@ -90,11 +70,6 @@ const BuddyMatcher = () => { endSearch(currentChatId); }, []); - const onStopSearch = useCallback(() => { - setIsStoppingSearch(false); - endSearch(); - navigate('/'); - }, []); const onConnect = useCallback(() => { // Here server will be informed that user is searching for @@ -142,40 +117,6 @@ const BuddyMatcher = () => { } }, []); - useEffect(() => { - setLoadingText(isStoppingSearch ? stoppingSearchLoadingText : defaultLoadingText); - }, [isStoppingSearch]); - - useEffect(() => { - if (loadingText === defaultLoadingText) { - timeout = setTimeout(() => { - setLoadingText( - <> -

- Taking too long?
- No chat buddy is currently available :({' '} -

-

- - Tweet - {' '} - about this app and get more people to use it! -

- - ); - }, 15000); - } - - return () => { - clearTimeout(timeout); - }; - }, [loadingText]); - useEffect(() => { const setupSocket = async () => { if (!app.currentChatId) { @@ -198,7 +139,6 @@ const BuddyMatcher = () => { socket.on(NEW_EVENT_JOINED, onUserJoined); socket.on(NEW_EVENT_CHAT_RESTORE, onRestoreChat); socket.on(NEW_EVENT_INACTIVE, onInactive); - socket.on(NEW_EVENT_STOP_SEARCH_SUCCESS, onStopSearch); socket.on('disconnect', onDisconnect); socket.io.on('reconnect_attempt', onReconnectAttempt); socket.io.on('reconnect_error', onReconnectError); @@ -220,22 +160,11 @@ const BuddyMatcher = () => { }; }, [app.currentChatId]); - return app.isSearching || !app.currentChatId ? ( -
- -
{loadingText}
- {!isStoppingSearch && ( - - )} -
- ) : disconnected ? ( + if(app.isSearching || !app.currentChatId){ + navigate('/searching'); + } + + return disconnected ? ( ) : ( diff --git a/client/src/pages/MatchFound.jsx b/client/src/pages/MatchFound.jsx new file mode 100644 index 00000000..2f89970f --- /dev/null +++ b/client/src/pages/MatchFound.jsx @@ -0,0 +1,13 @@ +import BuddyMatcher from "src/components/BuddyMatcher"; +import { ChatProvider } from "src/context/ChatContext"; + + +const MatchFound = () => { + return ( + + + + ); +}; + +export default MatchFound; \ No newline at end of file diff --git a/client/src/pages/Searching.jsx b/client/src/pages/Searching.jsx index 15324206..5c90c350 100644 --- a/client/src/pages/Searching.jsx +++ b/client/src/pages/Searching.jsx @@ -1,10 +1,151 @@ -import { ChatProvider } from 'src/context/ChatContext'; -import BuddyMatcher from 'src/components/BuddyMatcher'; +import { useCallback, useEffect, useState } from 'react'; +import ThreeDots from 'react-loading-icons/dist/esm/components/three-dots'; +import { useNavigate } from 'react-router-dom'; +import { useApp } from 'src/context/AppContext'; +import { ChatProvider, useChat } from 'src/context/ChatContext'; +import useCloseChat from 'src/hooks/useCloseChat'; +import { createBrowserNotification } from 'src/lib/browserNotification'; +import { useNotification } from 'src/lib/notification'; +import { connectWithId, socket } from 'src/lib/socketConnection'; +import { + NEW_EVENT_JOIN, + NEW_EVENT_JOINED, + NEW_EVENT_STOP_SEARCH, + NEW_EVENT_STOP_SEARCH_SUCCESS, +} from '../../../constants.json'; +import { useAuth } from 'src/context/AuthContext'; + +const stoppingSearchLoadingText =

Stopping the search

; +const defaultLoadingText =

Looking for a random buddy

; const Searching = () => { + const { startSearch, endSearch, app } = useApp(); + const { setLoadingText, loadingText } = useCloseChat(); + const { createChat } = useChat(); + const { authState } = useAuth(); + const { playNotification } = useNotification(); + const navigate = useNavigate(); + + const [isStoppingSearch, setIsStoppingSearch] = useState(false); + + let timeout = null; + + const onConnect = useCallback(() => { + socket.emit(NEW_EVENT_JOIN, { + loginId: authState.loginId, + email: authState.email, + }); + + }, []); + + 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); + navigate('/founduser') + }, []); + + const onStopSearch = useCallback(() => { + setIsStoppingSearch(false); + endSearch(); + navigate('/'); + }, []); + + const emitStopSearch = useCallback(() => { + socket.emit(NEW_EVENT_STOP_SEARCH, { + loginId: authState.loginId, + email: authState.email, + }); + }, []); + + const handleStopSearch = () => { + emitStopSearch(); + setIsStoppingSearch(true); + }; + + useEffect(() => { + setLoadingText(isStoppingSearch ? stoppingSearchLoadingText : defaultLoadingText); + }, [isStoppingSearch]); + + useEffect(() => { + if (loadingText === defaultLoadingText) { + timeout = setTimeout(() => { + setLoadingText( + <> +

+ Taking too long?
+ No chat buddy is currently available :({' '} +

+

+ + Tweet + {' '} + about this app and get more people to use it! +

+ + ); + }, 15000); + } + + return () => { + clearTimeout(timeout); + }; + }, [loadingText]); + + 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_JOINED, onUserJoined); + socket.on(NEW_EVENT_STOP_SEARCH_SUCCESS, onStopSearch); + + return () => { + socket + .off('connect', onConnect) + .off(NEW_EVENT_JOINED, onUserJoined) + + socket.disconnect(); + }; + }, [app.currentChatId]); return ( - +
+ +
{loadingText}
+ {!isStoppingSearch && ( + + )} +
); }; diff --git a/client/src/pages/Start.jsx b/client/src/pages/Start.jsx index f897d735..80f85cef 100644 --- a/client/src/pages/Start.jsx +++ b/client/src/pages/Start.jsx @@ -16,7 +16,7 @@ const Start = () => { useEffect(() => { if (app.isSearching) { - navigate('/founduser'); + navigate('/searching'); } requestBrowserNotificationPermissions(); @@ -40,7 +40,7 @@ const Start = () => {
{/* from the below link user will trigger search of another user*/} Date: Tue, 19 Nov 2024 07:01:31 +0100 Subject: [PATCH 2/2] Update client/src/pages/MatchFound.jsx --- client/src/pages/MatchFound.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/pages/MatchFound.jsx b/client/src/pages/MatchFound.jsx index 2f89970f..82870211 100644 --- a/client/src/pages/MatchFound.jsx +++ b/client/src/pages/MatchFound.jsx @@ -10,4 +10,4 @@ const MatchFound = () => { ); }; -export default MatchFound; \ No newline at end of file +export default MatchFound;