chore: Remove starMessage client meteor method (#33817)

Co-authored-by: Tasso <[email protected]>

apps/meteor/client/components/message/toolbar/MessageToolbar.tsx

@@ -17,6 +17,7 @@ import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction
 import { useEmojiPickerData } from '../../../contexts/EmojiPickerContext';
 import { useMessageActionAppsActionButtons } from '../../../hooks/useAppActionButtons';
 import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
+import { roomsQueryKeys } from '../../../lib/queryKeys';
 import EmojiElement from '../../../views/composer/EmojiPicker/EmojiElement';
 import { useIsSelecting } from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
 import { useAutoTranslate } from '../../../views/room/MessageList/hooks/useAutoTranslate';
@@ -88,16 +89,20 @@ const MessageToolbar = ({
 	useWebDAVMessageAction();
 	useNewDiscussionMessageAction();
 
-	const actionsQueryResult = useQuery(['rooms', room._id, 'messages', message._id, 'actions'] as const, async () => {
-		const props = { message, room, user, subscription, settings: mapSettings, chat };
+	const actionsQueryResult = useQuery({
+		queryKey: roomsQueryKeys.messageActionsWithParameters(room._id, message),
+		queryFn: async () => {
+			const props = { message, room, user, subscription, settings: mapSettings, chat };
 
-		const toolboxItems = await MessageAction.getAll(props, context, 'message');
-		const menuItems = await MessageAction.getAll(props, context, 'menu');
+			const toolboxItems = await MessageAction.getAll(props, context, 'message');
+			const menuItems = await MessageAction.getAll(props, context, 'menu');
 
-		return {
-			message: toolboxItems.filter((action) => !hiddenActions.includes(action.id)),
-			menu: menuItems.filter((action) => !(isLayoutEmbedded && action.id === 'reply-directly') && !hiddenActions.includes(action.id)),
-		};
+			return {
+				message: toolboxItems.filter((action) => !hiddenActions.includes(action.id)),
+				menu: menuItems.filter((action) => !(isLayoutEmbedded && action.id === 'reply-directly') && !hiddenActions.includes(action.id)),
+			};
+		},
+		keepPreviousData: true,
 	});
 
 	const toolbox = useRoomToolbox();

apps/meteor/client/lib/mutationEffects/starredMessage.ts

@@ -0,0 +1,33 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { Meteor } from 'meteor/meteor';
+
+import { Messages } from '../../../app/models/client';
+import { t } from '../../../app/utils/lib/i18n';
+import { dispatchToastMessage } from '../toast';
+
+export const toggleStarredMessage = (message: IMessage, starred: boolean) => {
+	const uid = Meteor.userId()!;
+
+	if (starred) {
+		Messages.update(
+			{ _id: message._id },
+			{
+				$addToSet: {
+					starred: { _id: uid },
+				},
+			},
+		);
+		dispatchToastMessage({ type: 'success', message: t('Message_has_been_starred') });
+		return;
+	}
+
+	Messages.update(
+		{ _id: message._id },
+		{
+			$pull: {
+				starred: { _id: uid },
+			},
+		},
+	);
+	dispatchToastMessage({ type: 'success', message: t('Message_has_been_unstarred') });
+};

apps/meteor/client/lib/queryKeys.ts

@@ -0,0 +1,12 @@
+import type { IMessage, IRoom, Serialized } from '@rocket.chat/core-typings';
+
+export const roomsQueryKeys = {
+	all: ['rooms'] as const,
+	room: (rid: IRoom['_id']) => ['rooms', rid] as const,
+	starredMessages: (rid: IRoom['_id']) => [...roomsQueryKeys.room(rid), 'starred-messages'] as const,
+	messages: (rid: IRoom['_id']) => [...roomsQueryKeys.room(rid), 'messages'] as const,
+	message: (rid: IRoom['_id'], mid: IMessage['_id']) => [...roomsQueryKeys.messages(rid), mid] as const,
+	messageActions: (rid: IRoom['_id'], mid: IMessage['_id']) => [...roomsQueryKeys.message(rid, mid), 'actions'] as const,
+	messageActionsWithParameters: (rid: IRoom['_id'], message: IMessage | Serialized<IMessage>) =>
+		[...roomsQueryKeys.messageActions(rid, message._id), message] as const,
+};

apps/meteor/client/methods/index.ts

@@ -1,7 +1,6 @@
 import './hideRoom';
 import './openRoom';
 import './pinMessage';
-import './starMessage';
 import './toggleFavorite';
 import './unpinMessage';
 import './updateMessage';

apps/meteor/client/startup/actionButtons/starMessage.ts

@@ -3,7 +3,9 @@ import { Meteor } from 'meteor/meteor';
 import { settings } from '../../../app/settings/client';
 import { MessageAction } from '../../../app/ui-utils/client';
 import { sdk } from '../../../app/utils/client/lib/SDKClient';
+import { toggleStarredMessage } from '../../lib/mutationEffects/starredMessage';
 import { queryClient } from '../../lib/queryClient';
+import { roomsQueryKeys } from '../../lib/queryKeys';
 import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
 import { dispatchToastMessage } from '../../lib/toast';
 
@@ -16,12 +18,13 @@ Meteor.startup(() => {
 		context: ['starred', 'message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 		async action(_, { message }) {
 			try {
-				await sdk.call('starMessage', { ...message, starred: true });
-				queryClient.invalidateQueries(['rooms', message.rid, 'starred-messages']);
+				await sdk.rest.post('/v1/chat.starMessage', { messageId: message._id });
+				toggleStarredMessage(message, true);
 			} catch (error) {
-				if (error) {
-					dispatchToastMessage({ type: 'error', message: error });
-				}
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				queryClient.invalidateQueries(roomsQueryKeys.starredMessages(message.rid));
+				queryClient.invalidateQueries(roomsQueryKeys.messageActions(message.rid, message._id));
 			}
 		},
 		condition({ message, subscription, user, room }) {

apps/meteor/client/startup/actionButtons/unstarMessage.ts

@@ -3,7 +3,9 @@ import { Meteor } from 'meteor/meteor';
 import { settings } from '../../../app/settings/client';
 import { MessageAction } from '../../../app/ui-utils/client';
 import { sdk } from '../../../app/utils/client/lib/SDKClient';
+import { toggleStarredMessage } from '../../lib/mutationEffects/starredMessage';
 import { queryClient } from '../../lib/queryClient';
+import { roomsQueryKeys } from '../../lib/queryKeys';
 import { dispatchToastMessage } from '../../lib/toast';
 
 Meteor.startup(() => {
@@ -15,10 +17,13 @@ Meteor.startup(() => {
 		context: ['starred', 'message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
 		async action(_, { message }) {
 			try {
-				await sdk.call('starMessage', { ...message, starred: false });
-				queryClient.invalidateQueries(['rooms', message.rid, 'starred-messages']);
+				await sdk.rest.post('/v1/chat.unStarMessage', { messageId: message._id });
+				toggleStarredMessage(message, false);
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				queryClient.invalidateQueries(roomsQueryKeys.starredMessages(message.rid));
+				queryClient.invalidateQueries(roomsQueryKeys.messageActions(message.rid, message._id));
 			}
 		},
 		condition({ message, subscription, user }) {

apps/meteor/client/views/room/contextualBar/StarredMessagesTab.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import MessageListTab from './MessageListTab';
 import { onClientMessageReceived } from '../../../lib/onClientMessageReceived';
+import { roomsQueryKeys } from '../../../lib/queryKeys';
 import { mapMessageFromApi } from '../../../lib/utils/mapMessageFromApi';
 import { useRoom } from '../contexts/RoomContext';
 
@@ -14,19 +15,22 @@ const StarredMessagesTab = () => {
 
 	const room = useRoom();
 
-	const starredMessagesQueryResult = useQuery(['rooms', room._id, 'starred-messages'] as const, async () => {
-		const messages: IMessage[] = [];
-
-		for (
-			let offset = 0, result = await getStarredMessages({ roomId: room._id, offset: 0 });
-			result.count > 0;
-			// eslint-disable-next-line no-await-in-loop
-			offset += result.count, result = await getStarredMessages({ roomId: room._id, offset })
-		) {
-			messages.push(...result.messages.map(mapMessageFromApi));
-		}
-
-		return Promise.all(messages.map(onClientMessageReceived));
+	const starredMessagesQueryResult = useQuery({
+		queryKey: roomsQueryKeys.starredMessages(room._id),
+		queryFn: async () => {
+			const messages: IMessage[] = [];
+
+			for (
+				let offset = 0, result = await getStarredMessages({ roomId: room._id, offset: 0 });
+				result.count > 0;
+				// eslint-disable-next-line no-await-in-loop
+				offset += result.count, result = await getStarredMessages({ roomId: room._id, offset })
+			) {
+				messages.push(...result.messages.map(mapMessageFromApi));
+			}
+
+			return Promise.all(messages.map(onClientMessageReceived));
+		},
 	});
 
 	const { t } = useTranslation();