chore: remove meteor.startup from unstar-message (#34018)

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

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

@@ -1,11 +1,13 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
 
 import { toggleStarredMessage } from '../../../lib/mutationEffects/starredMessage';
 import { roomsQueryKeys } from '../../../lib/queryKeys';
 
 export const useStarMessageMutation = () => {
+	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const queryClient = useQueryClient();
@@ -18,6 +20,7 @@ export const useStarMessageMutation = () => {
 		},
 		onSuccess: (_data, message) => {
 			toggleStarredMessage(message, true);
+			dispatchToastMessage({ type: 'success', message: t('Message_has_been_starred') });
 		},
 		onError: (error) => {
 			dispatchToastMessage({ type: 'error', message: error });

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

@@ -0,0 +1,33 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { toggleStarredMessage } from '../../../lib/mutationEffects/starredMessage';
+import { roomsQueryKeys } from '../../../lib/queryKeys';
+
+export const useUnstarMessageMutation = () => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const queryClient = useQueryClient();
+
+	const unstarMessage = useEndpoint('POST', '/v1/chat.unStarMessage');
+
+	return useMutation({
+		mutationFn: async (message: IMessage) => {
+			await unstarMessage({ messageId: message._id });
+		},
+		onSuccess: (_data, message) => {
+			toggleStarredMessage(message, false);
+			dispatchToastMessage({ type: 'success', message: t('Message_has_been_unstarred') });
+		},
+		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

@@ -12,6 +12,7 @@ import MessageActionMenu from './MessageActionMenu';
 import MessageToolbarStarsActionMenu from './MessageToolbarStarsActionMenu';
 import { useNewDiscussionMessageAction } from './useNewDiscussionMessageAction';
 import { useStarMessageAction } from './useStarMessageAction';
+import { useUnstarMessageAction } from './useUnstarMessageAction';
 import { useWebDAVMessageAction } from './useWebDAVMessageAction';
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
@@ -90,6 +91,7 @@ const MessageToolbar = ({
 	useWebDAVMessageAction();
 	useNewDiscussionMessageAction();
 	useStarMessageAction(message, { room, user });
+	useUnstarMessageAction(message, { room, user });
 
 	const actionsQueryResult = useQuery({
 		queryKey: roomsQueryKeys.messageActionsWithParameters(room._id, message),

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

@@ -16,7 +16,7 @@ export const useStarMessageAction = (message: IMessage, { room, user }: { room:
 			return;
 		}
 
-		if (Array.isArray(message.starred) && message.starred.find((star) => star._id === user?._id)) {
+		if (Array.isArray(message.starred) && message.starred.some((star) => star._id === user?._id)) {
 			return;
 		}
 

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

@@ -0,0 +1,40 @@
+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 { useUnstarMessageMutation } from '../hooks/useUnstarMessageMutation';
+
+export const useUnstarMessageAction = (message: IMessage, { room, user }: { room: IRoom; user: IUser | undefined }) => {
+	const allowStarring = useSetting('Message_AllowStarring');
+
+	const { mutateAsync: unstarMessage } = useUnstarMessageMutation();
+
+	useEffect(() => {
+		if (!allowStarring || isOmnichannelRoom(room)) {
+			return;
+		}
+
+		if (!Array.isArray(message.starred) || message.starred.every((star) => star._id !== user?._id)) {
+			return;
+		}
+
+		MessageAction.addButton({
+			id: 'unstar-message',
+			icon: 'star',
+			label: 'Unstar_Message',
+			type: 'interaction',
+			context: ['starred', 'message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+			async action() {
+				await unstarMessage(message);
+			},
+			order: 3,
+			group: 'menu',
+		});
+
+		return () => {
+			MessageAction.removeButton('unstar-message');
+		};
+	}, [allowStarring, message, room, unstarMessage, user?._id]);
+};

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

@@ -2,8 +2,6 @@ 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()!;
@@ -17,7 +15,6 @@ export const toggleStarredMessage = (message: IMessage, starred: boolean) => {
 				},
 			},
 		);
-		dispatchToastMessage({ type: 'success', message: t('Message_has_been_starred') });
 		return;
 	}
 
@@ -29,5 +26,4 @@ export const toggleStarredMessage = (message: IMessage, starred: boolean) => {
 			},
 		},
 	);
-	dispatchToastMessage({ type: 'success', message: t('Message_has_been_unstarred') });
 };

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

@@ -6,4 +6,3 @@ import './permalinkPinned';
 import './permalinkStar';
 import './pinMessage';
 import './unpinMessage';
-import './unstarMessage';

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

@@ -1,39 +0,0 @@
-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(() => {
-	MessageAction.addButton({
-		id: 'unstar-message',
-		icon: 'star',
-		label: 'Unstar_Message',
-		type: 'interaction',
-		context: ['starred', 'message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
-		async action(_, { message }) {
-			try {
-				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 }) {
-			if (subscription == null && settings.get('Message_AllowStarring')) {
-				return false;
-			}
-
-			return Boolean(message.starred?.find((star: any) => star._id === user?._id));
-		},
-		order: 3,
-		group: 'menu',
-	});
-});