feat: Separate routes for Searching and Found User

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() {
 							</ChatProvider>
 						}
 					/>
-					{/* TODO: Sepreate searching and foundUser into different routes */}
-					<Route exact path="/founduser" element={<Searching />} />
+					<Route exact path="/searching" element={<Searching />} />
+					<Route exact path="/founduser" element={<MatchFound />} />
 					<Route exact path="/friends" element={<ComingSoon />} />
 					<Route exact path="/profile" element={<Profile />} />
 					<Route exact path="/settings" element={<Settings />} />

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 = <p>Stopping the search</p>;
 const defaultLoadingText = <p>Looking for a random buddy</p>;
 
 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(
-					<>
-						<p>
-							Taking too long? <br className="md:hidden" />
-							No <span className="hidden sm:inline">chat</span> buddy is currently available :({' '}
-						</p>
-						<p>
-							<a
-								href="https://ctt.ac/US0h0"
-								target="_blank"
-								rel="noreferrer"
-								className="text-blue-500 underline"
-							>
-								Tweet
-							</a>{' '}
-							about this app and get more people to use it!
-						</p>
-					</>
-				);
-			}, 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 ? (
-		<div className="flex w-full justify-center items-center min-h-[calc(100vh-70px)] flex-col bg-light dark:bg-primary">
-			<ThreeDots fill="rgb(255 159 28)" />
-			<div className="text-lg text-center text-primary dark:text-white">{loadingText}</div>
-			{!isStoppingSearch && (
-				<button
-					onClick={handleStopSearch}
-					className={
-						'hover:no-underline hover:text-white font-medium text-white text-[1.5em] w-[8em] h-[2.3em] mt-4 rounded-[30px] bg-[#FF3A46] flex flex-col items-center justify-center'
-					}
-				>
-					Stop
-				</button>
-			)}
-		</div>
-	) : disconnected ? (
+	if(app.isSearching || !app.currentChatId){
+		navigate('/searching');
+	}
+
+	return disconnected ? (
 		<ReconnectBanner handleReconnect={handleReconnect} />
 	) : (
 		<Anonymous />

client/src/pages/MatchFound.jsx

@@ -0,0 +1,13 @@
+import BuddyMatcher from "src/components/BuddyMatcher";
+import { ChatProvider } from "src/context/ChatContext";
+
+
+const MatchFound = () => {
+	return (
+		<ChatProvider>
+			<BuddyMatcher />
+		</ChatProvider>
+	);
+};
+
+export default MatchFound;

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 = <p>Stopping the search</p>;
+const defaultLoadingText = <p>Looking for a random buddy</p>;
 
 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(
+					<>
+						<p>
+							Taking too long? <br className="md:hidden" />
+							No <span className="hidden sm:inline">chat</span> buddy is currently available :({' '}
+						</p>
+						<p>
+							<a
+								href="https://ctt.ac/US0h0"
+								target="_blank"
+								rel="noreferrer"
+								className="text-blue-500 underline"
+							>
+								Tweet
+							</a>{' '}
+							about this app and get more people to use it!
+						</p>
+					</>
+				);
+			}, 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 (
 		<ChatProvider>
-			<BuddyMatcher />
+			<div className="flex w-full justify-center items-center min-h-[calc(100vh-70px)] flex-col bg-light dark:bg-primary">
+			<ThreeDots fill="rgb(255 159 28)" />
+			<div className="text-lg text-center text-primary dark:text-white">{loadingText}</div>
+			{!isStoppingSearch && (
+				<button
+					onClick={handleStopSearch}
+					className={
+						'hover:no-underline hover:text-white font-medium text-white text-[1.5em] w-[8em] h-[2.3em] mt-4 rounded-[30px] bg-[#FF3A46] flex flex-col items-center justify-center'
+					}
+				>
+					Stop
+				</button>
+			)}
+		</div>
 		</ChatProvider>
 	);
 };

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 = () => {
 			<div className="flex items-center gap-6">
 				{/* from the below link user will trigger search of another user*/}
 				<Link
-					to="/founduser"
+					to={app.currentChatId ? '/founduser' : '/searching'}
 					className={createClassesFromArray([
 						centerElement,
 						'hover:no-underline',