chore: remove meteor.startup from star-message (#34017)

Co-authored-by: Tasso <tasso.evangelista@rocket.chat>

apps/meteor/client/components/message/hooks/useStarMessageMutation.ts

+import type { IMessage } from '@rocket.chat/core-typings';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+
+import { toggleStarredMessage } from '../../../lib/mutationEffects/starredMessage';
+import { roomsQueryKeys } from '../../../lib/queryKeys';
+
+export const useStarMessageMutation = () => {
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const queryClient = useQueryClient();
+
+	const starMessage = useEndpoint('POST', '/v1/chat.starMessage');
+
+	return useMutation({
+		mutationFn: async (message: IMessage) => {
+			await starMessage({ messageId: message._id });
+		},
+		onSuccess: (_data, message) => {
+			toggleStarredMessage(message, true);
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSettled: (_data, _error, message) => {
+			queryClient.invalidateQueries(roomsQueryKeys.starredMessages(message.rid));
+			queryClient.invalidateQueries(roomsQueryKeys.messageActions(message.rid, message._id));
+		},
+	});
+};

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

@@ -11,6 +11,7 @@ import React, { memo, useMemo, useRef } from 'react';
 import MessageActionMenu from './MessageActionMenu';
 import MessageToolbarStarsActionMenu from './MessageToolbarStarsActionMenu';
 import { useNewDiscussionMessageAction } from './useNewDiscussionMessageAction';
+import { useStarMessageAction } from './useStarMessageAction';
 import { useWebDAVMessageAction } from './useWebDAVMessageAction';
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
@@ -88,6 +89,7 @@ const MessageToolbar = ({
 	// TODO: move this to another place
 	useWebDAVMessageAction();
 	useNewDiscussionMessageAction();
+	useStarMessageAction(message, { room, user });
 
 	const actionsQueryResult = useQuery({
 		queryKey: roomsQueryKeys.messageActionsWithParameters(room._id, message),

apps/meteor/client/components/message/toolbar/useStarMessageAction.ts

+import type { IMessage, IRoom, IUser } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+
+import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
+import { useStarMessageMutation } from '../hooks/useStarMessageMutation';
+
+export const useStarMessageAction = (message: IMessage, { room, user }: { room: IRoom; user: IUser | undefined }) => {
+	const allowStarring = useSetting('Message_AllowStarring', true);
+
+	const { mutateAsync: starMessage } = useStarMessageMutation();
+
+	useEffect(() => {
+		if (!allowStarring || isOmnichannelRoom(room)) {
+			return;
+		}
+
+		if (Array.isArray(message.starred) && message.starred.find((star) => star._id === user?._id)) {
+			return;
+		}
+
+		MessageAction.addButton({
+			id: 'star-message',
+			icon: 'star',
+			label: 'Star',
+			type: 'interaction',
+			context: ['starred', 'message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+			async action() {
+				await starMessage(message);
+			},
+			order: 3,
+			group: 'menu',
+		});
+
+		return () => {
+			MessageAction.removeButton('star-message');
+		};
+	}, [allowStarring, message, room, starMessage, user?._id]);
+};

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

@@ -5,6 +5,5 @@ import './jumpToStarMessage';
 import './permalinkPinned';
 import './permalinkStar';
 import './pinMessage';
-import './starMessage';
 import './unpinMessage';
 import './unstarMessage';

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

-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';
-
-Meteor.startup(() => {
-	MessageAction.addButton({
-		id: 'star-message',
-		icon: 'star',
-		label: 'Star',
-		type: 'interaction',
-		context: ['starred', 'message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
-		async action(_, { message }) {
-			try {
-				await sdk.rest.post('/v1/chat.starMessage', { messageId: message._id });
-				toggleStarredMessage(message, true);
-			} 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, room }) {
-			if (subscription == null && settings.get('Message_AllowStarring')) {
-				return false;
-			}
-			const isLivechatRoom = roomCoordinator.isLivechatRoom(room.t);
-			if (isLivechatRoom) {
-				return false;
-			}
-
-			return !Array.isArray(message.starred) || !message.starred.find((star: any) => star._id === user?._id);
-		},
-		order: 3,
-		group: 'menu',
-	});
-});