chore: remove meteor.startup from unpin-message (#34020)

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

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

@@ -8,22 +8,21 @@ import { roomsQueryKeys } from '../../../lib/queryKeys';
 
 export const usePinMessageMutation = () => {
 	const { t } = useTranslation();
-	const pinMessageEndpoint = useEndpoint('POST', '/v1/chat.pinMessage');
+	const pinMessage = useEndpoint('POST', '/v1/chat.pinMessage');
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const queryClient = useQueryClient();
 
 	return useMutation({
-		mutationFn: async (message: IMessage) => pinMessageEndpoint({ messageId: message._id }),
+		mutationFn: async (message: IMessage) => pinMessage({ messageId: message._id }),
 		onMutate: (message) => {
 			updatePinMessage(message, { pinned: true });
 		},
-		onSuccess: (_data) => {
+		onSuccess: () => {
 			dispatchToastMessage({ type: 'success', message: t('Message_has_been_pinned') });
 		},
-		onError: (error, message) => {
+		onError: (error) => {
 			dispatchToastMessage({ type: 'error', message: error });
-			updatePinMessage(message, { pinned: false });
 		},
 		onSettled: (_data, _error, message) => {
 			queryClient.invalidateQueries(roomsQueryKeys.pinnedMessages(message.rid));

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

+import type { IMessage } from '@rocket.chat/core-typings';
+import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { updatePinMessage } from '../../../lib/mutationEffects/updatePinMessage';
+import { roomsQueryKeys } from '../../../lib/queryKeys';
+
+export const useUnpinMessageMutation = () => {
+	const { t } = useTranslation();
+	const unpinMessage = useEndpoint('POST', '/v1/chat.unPinMessage');
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: async (message: IMessage) => unpinMessage({ messageId: message._id }),
+		onMutate: (message) => {
+			updatePinMessage(message, { pinned: false });
+		},
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Message_has_been_unpinned') });
+		},
+		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

@@ -17,6 +17,7 @@ import { usePermalinkStar } from './usePermalinkStar';
 import { usePinMessageAction } from './usePinMessageAction';
 import { useStarMessageAction } from './useStarMessageAction';
 import { useUnFollowMessageAction } from './useUnFollowMessageAction';
+import { useUnpinMessageAction } from './useUnpinMessageAction';
 import { useUnstarMessageAction } from './useUnstarMessageAction';
 import { useWebDAVMessageAction } from './useWebDAVMessageAction';
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
@@ -96,6 +97,7 @@ const MessageToolbar = ({
 	// TODO: move this to another place
 	useWebDAVMessageAction();
 	useNewDiscussionMessageAction();
+	useUnpinMessageAction(message, { room, subscription });
 	usePinMessageAction(message, { room, subscription });
 	useStarMessageAction(message, { room, user });
 	useUnstarMessageAction(message, { room, user });

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

+import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting, usePermission } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+
+import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
+import { useUnpinMessageMutation } from '../hooks/useUnpinMessageMutation';
+
+export const useUnpinMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+) => {
+	const allowPinning = useSetting('Message_AllowPinning');
+	const hasPermission = usePermission('pin-message', room._id);
+
+	const { mutate: unpinMessage } = useUnpinMessageMutation();
+
+	useEffect(() => {
+		if (!allowPinning || isOmnichannelRoom(room) || !hasPermission || !message.pinned || !subscription) {
+			return;
+		}
+
+		MessageAction.addButton({
+			id: 'unpin-message',
+			icon: 'pin',
+			label: 'Unpin',
+			type: 'interaction',
+			context: ['pinned', 'message', 'message-mobile', 'threads', 'direct', 'videoconf', 'videoconf-threads'],
+			action() {
+				unpinMessage(message);
+			},
+			order: 2,
+			group: 'menu',
+		});
+
+		return () => {
+			MessageAction.removeButton('unpin-message');
+		};
+	}, [allowPinning, hasPermission, message, room, subscription, unpinMessage]);
+};

apps/meteor/client/methods/unpinMessage.ts

@@ -25,7 +25,6 @@ Meteor.methods<ServerMethods>({
 			dispatchToastMessage({ type: 'error', message: t('error-unpinning-message') });
 			return false;
 		}
-		dispatchToastMessage({ type: 'success', message: t('Message_has_been_unpinned') });
 		Messages.update(
 			{
 				_id: message._id,

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

 import './permalinkPinned';
-import './unpinMessage';

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

-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 { queryClient } from '../../lib/queryClient';
-import { dispatchToastMessage } from '../../lib/toast';
-
-Meteor.startup(() => {
-	MessageAction.addButton({
-		id: 'unpin-message',
-		icon: 'pin',
-		label: 'Unpin',
-		type: 'interaction',
-		context: ['pinned', 'message', 'message-mobile', 'threads', 'direct', 'videoconf', 'videoconf-threads'],
-		async action(_, { message }) {
-			message.pinned = false;
-			try {
-				await sdk.call('unpinMessage', message);
-				queryClient.invalidateQueries(['rooms', message.rid, 'pinned-messages']);
-			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
-			}
-		},
-		condition({ message, subscription }) {
-			if (!subscription || !settings.get('Message_AllowPinning') || !message.pinned) {
-				return false;
-			}
-
-			return hasAtLeastOnePermission('pin-message', message.rid);
-		},
-		order: 2,
-		group: 'menu',
-	});
-});