chore: remove meteor.startup from reaction-message-action (#34086)

Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com>

apps/meteor/app/reactions/client/index.ts

-import './init';
 import './methods/setReaction';

apps/meteor/app/reactions/client/init.ts

-import { Meteor } from 'meteor/meteor';
-
-import { roomCoordinator } from '../../../client/lib/rooms/roomCoordinator';
-import { MessageAction } from '../../ui-utils/client';
-import { sdk } from '../../utils/client/lib/SDKClient';
-
-Meteor.startup(() => {
-	MessageAction.addButton({
-		id: 'reaction-message',
-		icon: 'add-reaction',
-		label: 'Add_Reaction',
-		context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
-		action(event, { message, chat }) {
-			event?.stopPropagation();
-			chat?.emojiPicker.open(event?.currentTarget as Element, (emoji) => sdk.call('setReaction', `:${emoji}:`, message._id));
-		},
-		condition({ message, user, room, subscription }) {
-			if (!room) {
-				return false;
-			}
-
-			if (!subscription) {
-				return false;
-			}
-
-			if (message.private) {
-				return false;
-			}
-
-			if (roomCoordinator.readOnly(room._id, user!) && !room.reactWhenReadOnly) {
-				return false;
-			}
-			const isLivechatRoom = roomCoordinator.isLivechatRoom(room.t);
-			if (isLivechatRoom) {
-				return false;
-			}
-
-			return true;
-		},
-		order: -3,
-		group: 'message',
-	});
-});

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

@@ -15,6 +15,7 @@ import { useJumpToMessageContextAction } from './useJumpToMessageContextAction';
 import { useNewDiscussionMessageAction } from './useNewDiscussionMessageAction';
 import { usePermalinkAction } from './usePermalinkAction';
 import { usePinMessageAction } from './usePinMessageAction';
+import { useReactionMessageAction } from './useReactionMessageAction';
 import { useReplyInThreadMessageAction } from './useReplyInThreadMessageAction';
 import { useStarMessageAction } from './useStarMessageAction';
 import { useUnFollowMessageAction } from './useUnFollowMessageAction';
@@ -131,6 +132,7 @@ const MessageToolbar = ({
 		order: 100,
 		context: ['starred'],
 	});
+	useReactionMessageAction(message, { user, room, subscription });
 
 	const actionsQueryResult = useQuery({
 		queryKey: roomsQueryKeys.messageActionsWithParameters(room._id, message),

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

+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import type { IRoom, ISubscription, IUser, IMessage } from '@rocket.chat/core-typings';
+import { useEffect } from 'react';
+
+import { MessageAction } from '../../../../app/ui-utils/client';
+import { sdk } from '../../../../app/utils/client/lib/SDKClient';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+
+export const useReactionMessageAction = (
+	message: IMessage,
+	{ user, room, subscription }: { user: IUser | undefined; room: IRoom; subscription: ISubscription | undefined },
+) => {
+	useEffect(() => {
+		if (!room || isOmnichannelRoom(room) || !subscription || message.private || !user) {
+			return;
+		}
+
+		if (roomCoordinator.readOnly(room._id, user) && !room.reactWhenReadOnly) {
+			return;
+		}
+
+		MessageAction.addButton({
+			id: 'reaction-message',
+			icon: 'add-reaction',
+			label: 'Add_Reaction',
+			context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+			action(event, { message, chat }) {
+				event?.stopPropagation();
+				chat?.emojiPicker.open(event?.currentTarget as Element, (emoji) => sdk.call('setReaction', `:${emoji}:`, message._id));
+			},
+			order: -3,
+			group: 'message',
+		});
+
+		return () => {
+			MessageAction.removeButton('reaction-message');
+		};
+	}, [message.private, room, subscription, user]);
+};