From 6a3cd76ba4a275a675cef6125c4395d89604af98 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Tue, 23 May 2023 18:53:58 +0530 Subject: [PATCH 1/3] fix room history scroll --- .../views/room/components/body/RoomBody.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/views/room/components/body/RoomBody.tsx b/apps/meteor/client/views/room/components/body/RoomBody.tsx index 2859395ac2cc..856ac59be4a0 100644 --- a/apps/meteor/client/views/room/components/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/components/body/RoomBody.tsx @@ -403,10 +403,10 @@ const RoomBody = (): ReactElement => { sendToBottom(); } wrapper.removeEventListener('MessageGroup', afterMessageGroup); - - wrapper.addEventListener('scroll', handleWrapperScroll); }; + wrapper.addEventListener('scroll', handleWrapperScroll); + wrapper.addEventListener('MessageGroup', afterMessageGroup); return () => { @@ -415,6 +415,18 @@ const RoomBody = (): ReactElement => { }; }, [room._id, sendToBottom]); + useEffect(() => { + const store = RoomManager.getStore(room._id); + + if (store?.scroll && !store.atBottom) { + scrollMessageList(() => { + return { left: 30, top: store.scroll }; + }); + } else { + sendToBottom(); + } + }, [room._id, scrollMessageList, sendToBottom]); + useEffect(() => { const wrapper = wrapperRef.current; From e26c78ce171db0f112d58e252c7e4469944c7475 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Tue, 23 May 2023 18:55:08 +0530 Subject: [PATCH 2/3] add changesets --- .changeset/pretty-dots-leave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/pretty-dots-leave.md diff --git a/.changeset/pretty-dots-leave.md b/.changeset/pretty-dots-leave.md new file mode 100644 index 000000000000..03df3f6ce073 --- /dev/null +++ b/.changeset/pretty-dots-leave.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': minor +--- + +fix: Room history scrollbar position From 28f83861a88b4b4d9fc5c886191bb11dd95b41e5 Mon Sep 17 00:00:00 2001 From: gabriellsh Date: Mon, 5 Jun 2023 16:16:42 -0300 Subject: [PATCH 3/3] move logic to hook --- .../views/room/components/body/RoomBody.tsx | 13 ++--------- .../body/hooks/useRestoreScrollPosition.ts | 23 +++++++++++++++++++ 2 files changed, 25 insertions(+), 11 deletions(-) create mode 100644 apps/meteor/client/views/room/components/body/hooks/useRestoreScrollPosition.ts diff --git a/apps/meteor/client/views/room/components/body/RoomBody.tsx b/apps/meteor/client/views/room/components/body/RoomBody.tsx index 856ac59be4a0..8f839ef492a1 100644 --- a/apps/meteor/client/views/room/components/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/components/body/RoomBody.tsx @@ -45,6 +45,7 @@ import UploadProgressIndicator from './UploadProgressIndicator'; import ComposerContainer from './composer/ComposerContainer'; import { useFileUploadDropTarget } from './hooks/useFileUploadDropTarget'; import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents'; +import { useRestoreScrollPosition } from './hooks/useRestoreScrollPosition'; import { useRetentionPolicy } from './hooks/useRetentionPolicy'; import { useUnreadMessages } from './hooks/useUnreadMessages'; @@ -415,17 +416,7 @@ const RoomBody = (): ReactElement => { }; }, [room._id, sendToBottom]); - useEffect(() => { - const store = RoomManager.getStore(room._id); - - if (store?.scroll && !store.atBottom) { - scrollMessageList(() => { - return { left: 30, top: store.scroll }; - }); - } else { - sendToBottom(); - } - }, [room._id, scrollMessageList, sendToBottom]); + useRestoreScrollPosition(room._id, scrollMessageList, sendToBottom); useEffect(() => { const wrapper = wrapperRef.current; diff --git a/apps/meteor/client/views/room/components/body/hooks/useRestoreScrollPosition.ts b/apps/meteor/client/views/room/components/body/hooks/useRestoreScrollPosition.ts new file mode 100644 index 000000000000..c36a1da58005 --- /dev/null +++ b/apps/meteor/client/views/room/components/body/hooks/useRestoreScrollPosition.ts @@ -0,0 +1,23 @@ +import type { IRoom } from '@rocket.chat/core-typings'; +import { useEffect } from 'react'; + +import type { MessageListContextValue } from '../../../../../components/message/list/MessageListContext'; +import { RoomManager } from '../../../../../lib/RoomManager'; + +export function useRestoreScrollPosition( + roomId: IRoom['_id'], + scrollMessageList: Exclude, + sendToBottom: () => void, +) { + useEffect(() => { + const store = RoomManager.getStore(roomId); + + if (store?.scroll && !store.atBottom) { + scrollMessageList(() => { + return { left: 30, top: store.scroll }; + }); + } else { + sendToBottom(); + } + }, [roomId, scrollMessageList, sendToBottom]); +}