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

Jump to bottom

fix: pointer always pops up when sending and receiving messages #360

Merged
merged 3 commits into from
Aug 12, 2024
Merged

fix: pointer always pops up when sending and receiving messages #360

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8b7b762
fix: pointer always pops up when sending and receiving messages
hfdem Aug 9, 2024
37120b3
Optimize code readability
hfdem Aug 10, 2024
0a8b569
hide popup if manually scroll to bottom
hfdem Aug 11, 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
58 changes: 32 additions & 26 deletions client/src/components/Messaging/ScrollWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,48 +8,54 @@ type ScrollWrapperProps = {

export const ScrollWrapper = ({ children, messageCount }: ScrollWrapperProps) => {
const wrapperRef = useRef<HTMLDivElement>(null);
const [isAtBottom, setIsAtBottom] = useState(true);
const [showPopup, setShowPopup] = useState(false);
const [scrollAtBottom, setScrollAtBottom] = useState(true);

useEffect(() => {
if (wrapperRef.current) {
const wrapper = wrapperRef.current;
const isScrolledToBottom = wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight;
setScrollAtBottom(isScrolledToBottom);
if (isScrolledToBottom) {
wrapper.scrollTop = wrapper.scrollHeight;
} else {
setShowPopup(true);
const wrapper = wrapperRef.current;
const handleScroll = () => {
if (!wrapper) return;
const atBottom = wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight - 1;
setIsAtBottom(atBottom);

// Hide popup if scrolled to bottom
if (atBottom) {
setShowPopup(false);
}
};

if (wrapper) {
wrapper.addEventListener('scroll', handleScroll);
}
}, [messageCount]);

return () => {
if (wrapper) {
wrapper.removeEventListener('scroll', handleScroll);
}
};
}, []);

useEffect(() => {
hfdem marked this conversation as resolved.
Show resolved Hide resolved
if (scrollAtBottom && wrapperRef.current) {
wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
if (isAtBottom) {
scrollToBottom();
} else {
setShowPopup(true);
}
}, [scrollAtBottom, messageCount]);
// eslint-disable-next-line react-hooks/exhaustive-deps
hfdem marked this conversation as resolved.
Show resolved Hide resolved
}, [messageCount]);

const scrollToBottom = () => {
if (wrapperRef.current) {
wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
setShowPopup(false);
}
};

const handleScroll = () => {
if (wrapperRef.current) {
const wrapper = wrapperRef.current;
const isScrolledToBottom = wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight;
setScrollAtBottom(isScrolledToBottom);
const wrapper = wrapperRef.current;
if (wrapper) {
setShowPopup(false);
wrapper.scrollTop = wrapper.scrollHeight;
}
};

return (
<div className={styles.scrollWrapper} ref={wrapperRef} onScroll={handleScroll}>
<div className={styles.scrollWrapper} ref={wrapperRef}>
{children}
{showPopup && !scrollAtBottom && (
{showPopup && (
<div className={styles.popup} onClick={scrollToBottom}>
New Messages
</div>
Expand Down
Loading