Skip to content

Commit

Permalink
feat: Separate routes for Searching and Found User (#719)
Browse files Browse the repository at this point in the history 
Co-authored-by: Ayush Majumder <[email protected]>
Co-authored-by: Dunsin <[email protected]>
  • Loading branch information
@ayushmaz @Dun-sin
3 people authored Nov 19, 2024
1 parent 391e842 commit b8efb6e
Show file tree
Hide file tree
Showing 5 changed files with 168 additions and 84 deletions.
5 changes: 3 additions & 2 deletions client/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 />} />
Expand Down
83 changes: 6 additions & 77 deletions client/src/components/BuddyMatcher.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 = () => {
Expand All @@ -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) {
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
Expand All @@ -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 />
Expand Down
13 changes: 13 additions & 0 deletions client/src/pages/MatchFound.jsx
View file
Original file line number Diff line number Diff line change
@@ -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;
147 changes: 144 additions & 3 deletions client/src/pages/Searching.jsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
Expand Down
4 changes: 2 additions & 2 deletions client/src/pages/Start.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Start = () => {

useEffect(() => {
if (app.isSearching) {
navigate('/founduser');
navigate('/searching');
}

requestBrowserNotificationPermissions();
Expand All @@ -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',
Expand Down

0 comments on commit b8efb6e

Please sign in to comment.