Skip to content

Commit

Permalink
refactor: take socket event handlers to separate files (#255)
Browse files Browse the repository at this point in the history 
* refactor: place sockets in seperate folder and remove console messages

* fix: unreachable files

* refactor: return err rather than using console.log

* refactor: return err rather than using console.log
  • Loading branch information
@Dun-sin
Dun-sin authored Mar 7, 2023
1 parent a0907c0 commit 8b7e5a1
Show file tree
Hide file tree
Showing 15 changed files with 8,972 additions and 9,012 deletions.
266 changes: 132 additions & 134 deletions client/src/components/Anonymous.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,154 +24,152 @@ import useKeyPress from 'src/hooks/useKeyPress';
const centerItems = `flex items-center justify-center`;

const Anonymous = ({ onChatClosed }) => {
const { app, endSearch } = useApp();
const { currentChatId } = app;
const currentChatIdRef = useRef(currentChatId);
const [isTyping, setIsTyping] = useState(false);
const [autoSearchAfterClose, setAutoSearchAfterClose] = useState(false);
const autoSearchRef = useRef();
autoSearchRef.current = autoSearchAfterClose;

const navigate = useNavigate();
const socket = useContext(SocketContext);
const { closeChat } = useChat();
const { setDialog } = useDialog();

socket.on('display', ({ isTyping, chatId }) => {
// eslint-disable-next-line curly
if (chatId !== currentChatId) return;
isTyping ? setIsTyping(true) : setIsTyping(false);
});

const closeChatHandler = (autoSearch = false) => {
const currentChatId = currentChatIdRef.current;

if (!currentChatId) {
navigate('/');
return;
}

setAutoSearchAfterClose(autoSearch);

socket
.timeout(30000)
.emit('close', currentChatId, (err, chatClosed) => {
if (err) {
alert('An error occured whiles closing chat.');
console.log(err);

setAutoSearchAfterClose(false);
return;
}

if (chatClosed) {
closeChat(currentChatId);
}

endSearch()
const { app, endSearch } = useApp();
const { currentChatId } = app;
const currentChatIdRef = useRef(currentChatId);
const [isTyping, setIsTyping] = useState(false);
const [autoSearchAfterClose, setAutoSearchAfterClose] = useState(false);
const autoSearchRef = useRef();
autoSearchRef.current = autoSearchAfterClose;

const navigate = useNavigate();
const socket = useContext(SocketContext);
const { closeChat } = useChat();
const { setDialog } = useDialog();

socket.on('display', ({ isTyping, chatId }) => {
// eslint-disable-next-line curly
if (chatId !== currentChatId) return;
isTyping ? setIsTyping(true) : setIsTyping(false);
});

if (chatClosed && autoSearchRef.current) {
if (onChatClosed) {
onChatClosed();
}
const closeChatHandler = (autoSearch = false) => {
const currentChatId = currentChatIdRef.current;

setAutoSearchAfterClose(false);
} else {
navigate('/');
if (!currentChatId) {
navigate('/');
return;
}
});
};

const MenuToggle = (props, ref) => {
return (
<IconButton
{...props}
ref={ref}
icon={<Icon as={BiDotsVerticalRounded} />}
appearance="subtle"
circle
/>
);
};
setAutoSearchAfterClose(autoSearch);

socket
.timeout(30000)
.emit('close', currentChatId, (err, chatClosed) => {
if (err) {
alert('An error occured whiles closing chat.');
setAutoSearchAfterClose(false);
return err;
}

if (chatClosed) {
closeChat(currentChatId);
}

endSearch();

if (chatClosed && autoSearchRef.current) {
if (onChatClosed) {
onChatClosed();
}

setAutoSearchAfterClose(false);
} else {
navigate('/');
}
});
};

const MenuToggle = (props, ref) => {
return (
<IconButton
{...props}
ref={ref}
icon={<Icon as={BiDotsVerticalRounded} />}
appearance="subtle"
circle
/>
);
};

const handleClose = (autoSearch = false) => {
setDialog({
isOpen: true,
text: 'Are you sure you want to close this chat?',
handler: () => closeChatHandler(autoSearch),
});
};
const handleClose = (autoSearch = false) => {
setDialog({
isOpen: true,
text: 'Are you sure you want to close this chat?',
handler: () => closeChatHandler(autoSearch),
});
};

useKeyPress(['c'], () => handleClose());
useKeyPress(['n'], () => handleClose(true));

return (
<div
className={createClassesFromArray([
centerItems,
'bg-primary',
'md:min-w-[calc(100%-108px)]',
'min-w-full',
'flex-col',
'h-screen',
'text-white',
])}
>
<div className="flex items-center justify-between border-b-[2px] px-5 border-secondary h-[100px] w-[100%]">
<div className="md:hidden">
<Whisper
placement="auto"
controlId="control-id-hover"
trigger="hover"
speaker={<Tooltip>Home</Tooltip>}
>
<IconButton
onClick={() => navigate('/')}
appearance="subtle"
className="bg-primary "
icon={<Icon as={BiArrowBack} />}
circle
/>
</Whisper>
</div>
<div>
<h2 className="text-[1em] font-semibold">Anonymous User</h2>
{isTyping && <p className="mt-[-15px]">Typing</p>}
</div>

<Dropdown
placement="leftStart"
style={{ zIndex: 3 }}
renderToggle={MenuToggle}
noCaret
<div
className={createClassesFromArray([
centerItems,
'bg-primary',
'md:min-w-[calc(100%-108px)]',
'min-w-full',
'flex-col',
'h-screen',
'text-white',
])}
>
<Dropdown.Item onClick={() => handleClose()}>
Close Chat
</Dropdown.Item>

{/* TODO: Use a checkbox in modal dialog instead */}
<Dropdown.Item onClick={() => handleClose(true)}>
Find a new buddy
</Dropdown.Item>
</Dropdown>
</div>
<div
className={createClassesFromArray([
centerItems,
'flex-col',
'w-[90%]',
'h-[calc(100%-100px)]',
'mt-auto',
])}
>
<Chat />
</div>
</div>
);
<div className="flex items-center justify-between border-b-[2px] px-5 border-secondary h-[100px] w-[100%]">
<div className="md:hidden">
<Whisper
placement="auto"
controlId="control-id-hover"
trigger="hover"
speaker={<Tooltip>Home</Tooltip>}
>
<IconButton
onClick={() => navigate('/')}
appearance="subtle"
className="bg-primary "
icon={<Icon as={BiArrowBack} />}
circle
/>
</Whisper>
</div>
<div>
<h2 className="text-[1em] font-semibold">Anonymous User</h2>
{isTyping && <p className="mt-[-15px]">Typing</p>}
</div>

<Dropdown
placement="leftStart"
style={{ zIndex: 3 }}
renderToggle={MenuToggle}
noCaret
>
<Dropdown.Item onClick={() => handleClose()}>
Close Chat
</Dropdown.Item>

{/* TODO: Use a checkbox in modal dialog instead */}
<Dropdown.Item onClick={() => handleClose(true)}>
Find a new buddy
</Dropdown.Item>
</Dropdown>
</div>
<div
className={createClassesFromArray([
centerItems,
'flex-col',
'w-[90%]',
'h-[calc(100%-100px)]',
'mt-auto',
])}
>
<Chat />
</div>
</div>
);
};

export default Anonymous;

Anonymous.propTypes = {
onChatClosed: PropTypes.func,
onChatClosed: PropTypes.func,
};
6 changes: 1 addition & 5 deletions client/src/pages/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,16 @@ const Login = () => {
.then((res) => {
setIsLoggingIn(false);
if (res.status === 200) {
console.log('done');
login({
loginType: 'email',
loginId: userID,
email,
});
} else {
console.log('failed');
}
})
.catch((err) => {
console.log(err);
setIsLoggingIn(false);
throw Error(err);
});
}

Expand Down Expand Up @@ -78,7 +75,6 @@ const Login = () => {
Login Anonymously
</button>
</div>

)}
</div>
);
Expand Down
Loading

1 comment on commit 8b7e5a1

@vercel
Copy link

@vercel vercel bot commented on 8b7e5a1 Mar 7, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

whisper – ./

anon-chat-app.vercel.app
whischat.vercel.app
whisper-dun-sin.vercel.app
whisper-git-main-dun-sin.vercel.app

Please sign in to comment.