Regression: Thread component not updating its message list

app/threads/client/components/ThreadComponent.js → app/threads/client/components/ThreadComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import React, { useEffect, useRef, useState, useCallback, useMemo, FC } from 'react';
 import { Template } from 'meteor/templating';
 import { Blaze } from 'meteor/blaze';
 import { Tracker } from 'meteor/tracker';
@@ -13,51 +13,71 @@ import { useEndpoint, useMethod } from '../../../../client/contexts/ServerContex
 import { useToastMessageDispatch } from '../../../../client/contexts/ToastMessagesContext';
 import ThreadSkeleton from './ThreadSkeleton';
 import ThreadView from './ThreadView';
+import { IMessage } from '../../../../definition/IMessage';
+import { IRoom } from '../../../../definition/IRoom';
 
-const useThreadMessage = (tmid) => {
-	const [message, setMessage] = useState(() => Tracker.nonreactive(() => ChatMessage.findOne({ _id: tmid })));
+const useThreadMessage = (tmid: string): IMessage => {
+	const [message, setMessage] = useState<IMessage>(() => Tracker.nonreactive(() => ChatMessage.findOne({ _id: tmid })));
 	const getMessage = useEndpoint('GET', 'chat.getMessage');
+	const getMessageParsed = useCallback<(params: Mongo.Query<IMessage>) => Promise<IMessage>>(async (params) => {
+		const { message } = await getMessage(params);
+		return {
+			...message,
+			_updatedAt: new Date(message._updatedAt),
+		};
+	}, [getMessage]);
 
 	useEffect(() => {
 		const computation = Tracker.autorun(async (computation) => {
-			const msg = ChatMessage.findOne({ _id: tmid }) || (await getMessage({ msgId: tmid })).message;
+			const msg = ChatMessage.findOne({ _id: tmid }) || await getMessageParsed({ msgId: tmid });
 
 			if (!msg || computation.stopped) {
 				return;
 			}
 
-			setMessage((prevMsg) => (prevMsg._updatedAt?.getTime() === msg._updatedAt?.getTime() ? prevMsg : msg));
+			setMessage((prevMsg) => {
+				if (!prevMsg || prevMsg._id !== msg._id || prevMsg._updatedAt?.getTime() !== msg._updatedAt?.getTime()) {
+					return msg;
+				}
+
+				return prevMsg;
+			});
 		});
 
-		return () => {
+		return (): void => {
 			computation.stop();
 		};
-	}, [getMessage, tmid]);
+	}, [getMessageParsed, tmid]);
 
 	return message;
 };
 
-function ThreadComponent({
+const ThreadComponent: FC<{
+	mid: string;
+	jump: unknown;
+	room: IRoom;
+	subscription: unknown;
+}> = ({
 	mid,
 	jump,
 	room,
 	subscription,
-}) {
+}) => {
 	const channelRoute = useRoute(roomTypes.getConfig(room.t).route.name);
 	const threadMessage = useThreadMessage(mid);
 
-	const ref = useRef();
+	const ref = useRef<Element>(null);
 	const uid = useUserId();
 
 	const headerTitle = useMemo(() => (threadMessage ? normalizeThreadTitle(threadMessage) : null), [threadMessage]);
 	const [expanded, setExpand] = useLocalStorage('expand-threads', false);
-	const following = threadMessage?.replies?.includes(uid) ?? false;
+	const following = !uid ? false : threadMessage?.replies?.includes(uid) ?? false;
 
 	const dispatchToastMessage = useToastMessageDispatch();
 	const followMessage = useMethod('followMessage');
 	const unfollowMessage = useMethod('unfollowMessage');
 
-	const setFollowing = useCallback(async (following) => {
+	const setFollowing = useCallback<(following: boolean) => void>(async (following) => {
 		try {
 			if (following) {
 				await followMessage({ mid });
@@ -83,27 +103,22 @@ function ThreadComponent({
 		following,
 		subscription,
 	});
+	viewDataRef.current.mainMessage = threadMessage;
+	viewDataRef.current.jump = jump;
+	viewDataRef.current.following = following;
+	viewDataRef.current.subscription = subscription;
 
 	useEffect(() => {
-		viewDataRef.mainMessage = threadMessage;
-		viewDataRef.jump = jump;
-		viewDataRef.following = following;
-		viewDataRef.subscription = subscription;
-	}, [following, jump, subscription, threadMessage]);
-
-	const hasThreadMessage = !!threadMessage;
-
-	useEffect(() => {
-		if (!ref.current || !hasThreadMessage) {
+		if (!ref.current || !viewDataRef.current.mainMessage) {
 			return;
 		}
 
 		const view = Blaze.renderWithData(Template.thread, viewDataRef.current, ref.current);
 
-		return () => {
+		return (): void => {
 			Blaze.remove(view);
 		};
-	}, [hasThreadMessage, mid]);
+	}, [mid]);
 
 	if (!threadMessage) {
 		return <ThreadSkeleton expanded={expanded} onClose={handleClose} />;
@@ -114,10 +129,10 @@ function ThreadComponent({
 		title={headerTitle}
 		expanded={expanded}
 		following={following}
-		onToggleExpand={(expanded) => setExpand(!expanded)}
-		onToggleFollow={(following) => setFollowing(!following)}
+		onToggleExpand={(expanded): void => setExpand(!expanded)}
+		onToggleFollow={(following): void => setFollowing(!following)}
 		onClose={handleClose}
 	/>;
-}
+};
 
 export default ThreadComponent;

app/threads/client/components/ThreadView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, forwardRef, FC } from 'react';
+import React, { useCallback, useMemo, forwardRef } from 'react';
 import { Modal, Box } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
@@ -13,7 +13,7 @@ type ThreadViewProps = {
 	onClose: () => void;
 };
 
-const ThreadView: FC<ThreadViewProps> = forwardRef<Element, ThreadViewProps>(({
+const ThreadView = forwardRef<Element, ThreadViewProps>(({
 	title,
 	expanded,
 	following,

definition/IMessage.ts

@@ -15,4 +15,5 @@ export interface IMessage extends IRocketChatRecord {
 
 	_hidden?: boolean;
 	imported?: boolean;
+	replies?: IUser['_id'][];
 }