Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: move reconnect banner to a new component #692

Closed
wants to merge 6 commits into from
Closed

feat: move reconnect banner to a new component #692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2f0e2a6
Moving Reconnect banner to its own component.
LuseBiswas Sep 5, 2024
aa49715
Update ReconnectBanner.jsx
LuseBiswas Sep 6, 2024
8d84014
Update BuddyMatcher.jsx
LuseBiswas Sep 6, 2024
b0901c8
Updating all the things according to the instructions
LuseBiswas Sep 6, 2024
e880afa
remove all the files that I didn't work on
LuseBiswas Sep 7, 2024
823f687
Merge resolved: Your commit message here
LuseBiswas Sep 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 31 additions & 52 deletions client/src/components/BuddyMatcher.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { useState, useEffect, useRef, useCallback } from 'react';
import { ThreeDots } from 'react-loading-icons';
import { PiPlugsLight } from 'react-icons/pi';
import { connectWithId, socket } from 'src/lib/socketConnection';

import Anonymous from 'components/Anonymous';
import ReconnectBanner from 'components/ReconnectBanner';
import { useAuth } from 'src/context/AuthContext';
import { useChat } from 'src/context/ChatContext';
import { useNavigate, Link } from 'react-router-dom';
import { useNotification } from 'src/lib/notification';
import { useApp } from 'src/context/AppContext';
import { createBrowserNotification } from 'src/lib/browserNotification';
Expand All @@ -23,6 +21,7 @@ import {
NEW_EVENT_STOP_SEARCH,
NEW_EVENT_STOP_SEARCH_SUCCESS,
} from '../../../constants.json';
import { useNavigate } from 'react-router-dom';

const stoppingSearchLoadingText = <p>Stopping the search</p>;
const BuddyMatcher = () => {
Expand All @@ -38,7 +37,7 @@ const BuddyMatcher = () => {

const userID = authState.loginId;
const defaultLoadingText = <p>Looking for a random buddy</p>;
const [loadingText, setLoadingText] = useState(defaultLoadingText);
const [loadingText, setLoadingText] = useState(defaultLoadingText);
let timeout = null;

function disconnect() {
Expand All @@ -56,25 +55,25 @@ const BuddyMatcher = () => {
socket.volatile.emit(NEW_EVENT_JOIN, {
loginId: authState.loginId,
email: authState.email,
})
}, [])
});
}, []);

const emitStopSearch = useCallback(() => {
socket.emit(NEW_EVENT_STOP_SEARCH, {
loginId: authState.loginId,
email: authState.email,
});
}, [])
}, []);

const startNewSearch = () => {
startSearch();
setLoadingText(defaultLoadingText);

emitJoin()
emitJoin();
};

const handleStopSearch = () => {
emitStopSearch()
emitStopSearch();
setIsStoppingSearch(true);
};

Expand All @@ -85,9 +84,9 @@ const BuddyMatcher = () => {

startSearch();
setLoadingText(defaultLoadingText);
connectWithId(app.currentChatId)
connectWithId(app.currentChatId);
}

const onUserJoined = useCallback(({ roomId, userIds }) => {
playNotification('buddyPaired');
createBrowserNotification(
Expand All @@ -96,20 +95,20 @@ const BuddyMatcher = () => {
);
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 onStopSearch = useCallback( () => {
const onStopSearch = useCallback(() => {
setIsStoppingSearch(false);
endSearch();
navigate('/');
}, [])
}, []);

const onConnect = useCallback(() => {
// Here server will be informed that user is searching for
Expand All @@ -119,7 +118,7 @@ const BuddyMatcher = () => {
email: authState.email,
});
setDisconnected(false);
}, [])
}, []);

const onClose = useCallback((chatId) => {
endSearch();
Expand All @@ -133,40 +132,38 @@ const BuddyMatcher = () => {

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();
}
}, [])
}, []);

const emitCreateRoom = useCallback(() => {
socket.emit(NEW_EVENT_CREATE_ROOM, `${userID}-in-search`);
}, [])
}, []);

const emitAddingUser = useCallback(() => {
socket.emit(NEW_EVENT_ADDING, { userID });
}, [])
}, []);



useEffect(() => {
setLoadingText(isStoppingSearch ? stoppingSearchLoadingText : defaultLoadingText);
}, [isStoppingSearch]);
Expand Down Expand Up @@ -207,15 +204,15 @@ const BuddyMatcher = () => {
}

if (!socket.connected) {
connectWithId(app.currentChatId)
connectWithId(app.currentChatId);
}
emitCreateRoom()
socket.connected && emitAddingUser()

emitCreateRoom();
socket.connected && emitAddingUser();

// This is necessary else chat won't be restored after re-connections
socket.on('connect', onConnect);
socket.on(NEW_EVENT_CLOSE, onClose);
socket.on(NEW_EVENT_CLOSE, onClose);
// From here will get the info from server that user has joined the room
socket.on(NEW_EVENT_JOINED, onUserJoined);
socket.on(NEW_EVENT_CHAT_RESTORE, onRestoreChat);
Expand All @@ -228,7 +225,7 @@ const BuddyMatcher = () => {
return () => {
socket
.off('connect', onConnect)
.off(NEW_EVENT_JOINED, onUserJoined)
.off(NEW_EVENT_JOINED, onUserJoined)
.off(NEW_EVENT_CHAT_RESTORE, onRestoreChat)
.off(NEW_EVENT_CLOSE, onClose)
.off(NEW_EVENT_INACTIVE, onInactive)
Expand Down Expand Up @@ -258,28 +255,10 @@ const BuddyMatcher = () => {
)}
</div>
) : disconnected ? (
<div className="flex flex-col w-full justify-center items-center h-full bg-primary">
<PiPlugsLight className="text-secondary text-8xl" />
<p className="text-lg text-center text-white">Sorry, it seems you&apos;re not connected</p>
<div className="flex flex-col sm:flex-row gap-1 sm:gap-4 text-[1.5em] mt-4 font-medium items-center">
<button
onClick={handleReconnect}
className={
'hover:no-underline hover:text-black text-black w-[8em] h-[2.3em] rounded-[30px] bg-[#FF9F1C] flex flex-col items-center justify-center'
}
>
Try again
</button>
<Link to="/" className="underline text-white hover:text-white text-lg">
Return Home
</Link>
</div>
</div>
<ReconnectBanner handleReconnect={handleReconnect} />
) : (
<Anonymous
onChatClosed={startNewSearch}
/>
//Changes made here with moviing reconnector to another component.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this comment

<Anonymous onChatClosed={startNewSearch} />
);
};

export default BuddyMatcher;
29 changes: 29 additions & 0 deletions client/src/components/ReconnectBanner.jsx
View file
Open in desktop
Dun-sin marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't think you ran prettier for this file, do you have prettier installed on your VSCode(it should automatically do this on each save)

Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
import { PiPlugsLight } from 'react-icons/pi';
import { Link } from 'react-router-dom';
const ReconnectBanner = ({ handleReconnect }) => {
return (
<div className="flex flex-col w-full justify-center items-center h-full bg-primary">
<PiPlugsLight className="text-secondary text-8xl" />
<p className="text-lg text-center text-white">Sorry, it seems you&apos;re not connected</p>
<div className="flex flex-col sm:flex-row gap-1 sm:gap-4 text-[1.5em] mt-4 font-medium items-center">
<button
onClick={handleReconnect}
className={
'hover:no-underline hover:text-black text-black w-[8em] h-[2.3em] rounded-[30px] bg-[#FF9F1C] flex flex-col items-center justify-center'
}
>
Try again
</button>
<Link to="/" className="underline text-white hover:text-white text-lg">
Return Home
</Link>
</div>
</div>
);
};
ReconnectBanner.propTypes = {
handleReconnect: PropTypes.func.isRequired,
};
export default ReconnectBanner;
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

still need to remove this

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading