From 85fe51a381375538f3aa657d3a680847f5abf4e2 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 6 Mar 2024 10:29:54 -0300
Subject: [PATCH] chore: improve useJumpToMessage (#31907)

---
 .../message/variants/RoomMessage.tsx          |  6 +-
 .../message/variants/ThreadMessage.tsx        |  6 +-
 .../MessageList/hooks/useJumpToMessage.ts     | 81 ++++++++++---------
 3 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/apps/meteor/client/components/message/variants/RoomMessage.tsx b/apps/meteor/client/components/message/variants/RoomMessage.tsx
index 2ad7deedafc3..c17eb89c4596 100644
--- a/apps/meteor/client/components/message/variants/RoomMessage.tsx
+++ b/apps/meteor/client/components/message/variants/RoomMessage.tsx
@@ -4,7 +4,7 @@ import { useToggle } from '@rocket.chat/fuselage-hooks';
 import { MessageAvatar } from '@rocket.chat/ui-avatar';
 import { useUserId } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
-import React, { useRef, memo } from 'react';
+import React, { memo } from 'react';
 
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { useIsMessageHighlight } from '../../../views/room/MessageList/contexts/MessageHighlightContext';
@@ -51,7 +51,6 @@ const RoomMessage = ({
 	const editing = useIsMessageHighlight(message._id);
 	const [displayIgnoredMessage, toggleDisplayIgnoredMessage] = useToggle(false);
 	const ignored = (ignoredUser || message.ignored) && !displayIgnoredMessage;
-	const messageRef = useRef(null);
 	const { openUserCard, triggerProps } = useUserCard();
 
 	const selecting = useIsSelecting();
@@ -59,7 +58,8 @@ const RoomMessage = ({
 	const selected = useIsSelectedMessage(message._id);
 
 	useCountSelected();
-	useJumpToMessage(message._id, messageRef);
+
+	const messageRef = useJumpToMessage(message._id);
 
 	return (
 		<Message
diff --git a/apps/meteor/client/components/message/variants/ThreadMessage.tsx b/apps/meteor/client/components/message/variants/ThreadMessage.tsx
index 9b4ebdc82eaa..89f9772b1c5d 100644
--- a/apps/meteor/client/components/message/variants/ThreadMessage.tsx
+++ b/apps/meteor/client/components/message/variants/ThreadMessage.tsx
@@ -4,7 +4,7 @@ import { useToggle } from '@rocket.chat/fuselage-hooks';
 import { MessageAvatar } from '@rocket.chat/ui-avatar';
 import { useUserId } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { memo, useRef } from 'react';
+import React, { memo } from 'react';
 
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { useIsMessageHighlight } from '../../../views/room/MessageList/contexts/MessageHighlightContext';
@@ -30,12 +30,10 @@ const ThreadMessage = ({ message, sequential, unread, showUserAvatar }: ThreadMe
 	const [ignored, toggleIgnoring] = useToggle((message as { ignored?: boolean }).ignored);
 	const { openUserCard, triggerProps } = useUserCard();
 
-	const messageRef = useRef(null);
-
 	// Checks if is videoconf message to limit toolbox actions
 	const messageContext: MessageActionContext = isVideoConfMessage(message) ? 'videoconf-threads' : 'threads';
 
-	useJumpToMessage(message._id, messageRef);
+	const messageRef = useJumpToMessage(message._id);
 
 	return (
 		<Message
diff --git a/apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts b/apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts
index 40712c262398..b875a6abca69 100644
--- a/apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts
+++ b/apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts
@@ -1,7 +1,6 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { useRouter } from '@rocket.chat/ui-contexts';
-import type { RefObject } from 'react';
-import { useLayoutEffect } from 'react';
+import { useCallback } from 'react';
 
 import { useMessageListJumpToMessageParam, useMessageListScroll } from '../../../../components/message/list/MessageListContext';
 import { setHighlightMessage, clearHighlightMessage } from '../providers/messageHighlightSubscription';
@@ -9,43 +8,51 @@ import { setHighlightMessage, clearHighlightMessage } from '../providers/message
 // this is an arbitrary value so that there's a gap between the header and the message;
 const SCROLL_EXTRA_OFFSET = 60;
 
-export const useJumpToMessage = (messageId: IMessage['_id'], messageRef: RefObject<HTMLDivElement>): void => {
+export const useJumpToMessage = (messageId: IMessage['_id']) => {
 	const jumpToMessageParam = useMessageListJumpToMessageParam();
 	const scroll = useMessageListScroll();
 	const router = useRouter();
 
-	useLayoutEffect(() => {
-		if (jumpToMessageParam !== messageId || !messageRef.current || !scroll) {
-			return;
-		}
-
-		setTimeout(() => {
-			scroll((wrapper) => {
-				if (!wrapper || !messageRef.current) {
-					return;
-				}
-				const containerRect = wrapper.getBoundingClientRect();
-				const messageRect = messageRef.current.getBoundingClientRect();
-
-				const offset = messageRect.top - containerRect.top;
-				const scrollPosition = wrapper.scrollTop;
-				const newScrollPosition = scrollPosition + offset - SCROLL_EXTRA_OFFSET;
-
-				return { top: newScrollPosition, behavior: 'smooth' };
-			});
-
-			const search = router.getSearchParameters();
-			delete search.msg;
-			router.navigate(
-				{
-					pathname: router.getLocationPathname(),
-					search,
-				},
-				{ replace: true },
-			);
-
-			setHighlightMessage(messageId);
-			setTimeout(clearHighlightMessage, 2000);
-		}, 500);
-	}, [messageId, jumpToMessageParam, messageRef, scroll, router]);
+	const ref = useCallback(
+		(node: HTMLElement | null) => {
+			if (!node || !scroll) {
+				return;
+			}
+			setTimeout(() => {
+				scroll((wrapper) => {
+					if (!wrapper || !node) {
+						return;
+					}
+					const containerRect = wrapper.getBoundingClientRect();
+					const messageRect = node.getBoundingClientRect();
+
+					const offset = messageRect.top - containerRect.top;
+					const scrollPosition = wrapper.scrollTop;
+					const newScrollPosition = scrollPosition + offset - SCROLL_EXTRA_OFFSET;
+
+					return { top: newScrollPosition, behavior: 'smooth' };
+				});
+
+				const { msg: _, ...search } = router.getSearchParameters();
+
+				router.navigate(
+					{
+						pathname: router.getLocationPathname(),
+						search,
+					},
+					{ replace: true },
+				);
+
+				setHighlightMessage(messageId);
+				setTimeout(clearHighlightMessage, 2000);
+			}, 500);
+		},
+		[messageId, router, scroll],
+	);
+
+	if (jumpToMessageParam !== messageId) {
+		return undefined;
+	}
+
+	return ref;
 };