chore: remove meteor.startup from pin-message (#34019)

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

+import type { IMessage } from '@rocket.chat/core-typings';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { sdk } from '../../../../app/utils/client/lib/SDKClient';
+import { roomsQueryKeys } from '../../../lib/queryKeys';
+
+export const usePinMessageMutation = () => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: async (message: IMessage) => {
+			await sdk.call('pinMessage', message);
+		},
+		onSuccess: (_data) => {
+			dispatchToastMessage({ type: 'success', message: t('Message_has_been_pinned') });
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSettled: (_data, _error, message) => {
+			queryClient.invalidateQueries(roomsQueryKeys.pinnedMessages(message.rid));
+			queryClient.invalidateQueries(roomsQueryKeys.messageActions(message.rid, message._id));
+		},
+	});
+};

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

@@ -12,6 +12,7 @@ import MessageActionMenu from './MessageActionMenu';
 import MessageToolbarStarsActionMenu from './MessageToolbarStarsActionMenu';
 import { useNewDiscussionMessageAction } from './useNewDiscussionMessageAction';
 import { usePermalinkStar } from './usePermalinkStar';
+import { usePinMessageAction } from './usePinMessageAction';
 import { useStarMessageAction } from './useStarMessageAction';
 import { useUnstarMessageAction } from './useUnstarMessageAction';
 import { useWebDAVMessageAction } from './useWebDAVMessageAction';
@@ -91,6 +92,7 @@ const MessageToolbar = ({
 	// TODO: move this to another place
 	useWebDAVMessageAction();
 	useNewDiscussionMessageAction();
+	usePinMessageAction(message, { room, subscription });
 	useStarMessageAction(message, { room, user });
 	useUnstarMessageAction(message, { room, user });
 	usePermalinkStar(message, { subscription, user });

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

+import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting, useSetModal, usePermission } from '@rocket.chat/ui-contexts';
+import React, { useEffect } from 'react';
+
+import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
+import PinMessageModal from '../../../views/room/modals/PinMessageModal';
+import { usePinMessageMutation } from '../hooks/usePinMessageMutation';
+
+export const usePinMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+) => {
+	const setModal = useSetModal();
+
+	const allowPinning = useSetting('Message_AllowPinning');
+	const hasPermission = usePermission('pin-message', room._id);
+	const { mutateAsync: pinMessage } = usePinMessageMutation();
+
+	useEffect(() => {
+		if (!allowPinning || isOmnichannelRoom(room) || !hasPermission || message.pinned || !subscription) {
+			return;
+		}
+
+		const onConfirm = async () => {
+			pinMessage(message);
+			setModal(null);
+		};
+
+		MessageAction.addButton({
+			id: 'pin-message',
+			icon: 'pin',
+			label: 'Pin',
+			type: 'interaction',
+			context: ['pinned', 'message', 'message-mobile', 'threads', 'direct', 'videoconf', 'videoconf-threads'],
+			async action() {
+				setModal(<PinMessageModal message={message} onConfirm={onConfirm} onCancel={() => setModal(null)} />);
+			},
+			order: 2,
+			group: 'menu',
+		});
+
+		return () => {
+			MessageAction.removeButton('pin-message');
+		};
+	}, [allowPinning, hasPermission, message, pinMessage, room, setModal, subscription]);
+};

apps/meteor/client/lib/queryKeys.ts

@@ -4,6 +4,7 @@ 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,
+	pinnedMessages: (rid: IRoom['_id']) => [...roomsQueryKeys.room(rid), 'pinned-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,

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

@@ -3,5 +3,4 @@ import './jumpToPinMessage';
 import './jumpToSearchMessage';
 import './jumpToStarMessage';
 import './permalinkPinned';
-import './pinMessage';
 import './unpinMessage';

apps/meteor/client/startup/actionButtons/pinMessage.tsx

-import { Meteor } from 'meteor/meteor';
-
-import { hasAtLeastOnePermission } from '../../../app/authorization/client';
-import { settings } from '../../../app/settings/client';
-import { MessageAction } from '../../../app/ui-utils/client';
-import { sdk } from '../../../app/utils/client/lib/SDKClient';
-import { imperativeModal } from '../../lib/imperativeModal';
-import { queryClient } from '../../lib/queryClient';
-import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
-import { dispatchToastMessage } from '../../lib/toast';
-import PinMessageModal from '../../views/room/modals/PinMessageModal';
-
-Meteor.startup(() => {
-	MessageAction.addButton({
-		id: 'pin-message',
-		icon: 'pin',
-		label: 'Pin',
-		type: 'interaction',
-		context: ['pinned', 'message', 'message-mobile', 'threads', 'direct', 'videoconf', 'videoconf-threads'],
-		async action(_, { message }) {
-			const onConfirm = async () => {
-				message.pinned = true;
-				try {
-					await sdk.call('pinMessage', message);
-					queryClient.invalidateQueries(['rooms', message.rid, 'pinned-messages']);
-				} catch (error) {
-					dispatchToastMessage({ type: 'error', message: error });
-				}
-				imperativeModal.close();
-			};
-
-			imperativeModal.open({
-				component: PinMessageModal,
-				props: {
-					message,
-					onConfirm,
-					onCancel: () => imperativeModal.close(),
-				},
-			});
-		},
-		condition({ message, subscription, room }) {
-			if (!settings.get('Message_AllowPinning') || message.pinned || !subscription) {
-				return false;
-			}
-			const isLivechatRoom = roomCoordinator.isLivechatRoom(room.t);
-			if (isLivechatRoom) {
-				return false;
-			}
-			return hasAtLeastOnePermission('pin-message', message.rid);
-		},
-		order: 2,
-		group: 'menu',
-	});
-});