From a11f41e1da1dc65905202b9cc014e0f35fa8743d Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Fri, 29 Nov 2024 16:20:58 -0300 Subject: [PATCH] chore: remove meteor.startup from pin-message (#34019) --- .../message/hooks/usePinMessageMutation.ts | 30 +++++++++++ .../message/toolbar/MessageToolbar.tsx | 2 + .../message/toolbar/usePinMessageAction.tsx | 47 ++++++++++++++++ apps/meteor/client/lib/queryKeys.ts | 1 + .../client/startup/actionButtons/index.ts | 1 - .../startup/actionButtons/pinMessage.tsx | 54 ------------------- 6 files changed, 80 insertions(+), 55 deletions(-) create mode 100644 apps/meteor/client/components/message/hooks/usePinMessageMutation.ts create mode 100644 apps/meteor/client/components/message/toolbar/usePinMessageAction.tsx delete mode 100644 apps/meteor/client/startup/actionButtons/pinMessage.tsx diff --git a/apps/meteor/client/components/message/hooks/usePinMessageMutation.ts b/apps/meteor/client/components/message/hooks/usePinMessageMutation.ts new file mode 100644 index 000000000000..689cea107c27 --- /dev/null +++ b/apps/meteor/client/components/message/hooks/usePinMessageMutation.ts @@ -0,0 +1,30 @@ +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)); + }, + }); +}; diff --git a/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx index f846a1f9fd90..93f8e28881b0 100644 --- a/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx +++ b/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 }); diff --git a/apps/meteor/client/components/message/toolbar/usePinMessageAction.tsx b/apps/meteor/client/components/message/toolbar/usePinMessageAction.tsx new file mode 100644 index 000000000000..53b5764de475 --- /dev/null +++ b/apps/meteor/client/components/message/toolbar/usePinMessageAction.tsx @@ -0,0 +1,47 @@ +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( setModal(null)} />); + }, + order: 2, + group: 'menu', + }); + + return () => { + MessageAction.removeButton('pin-message'); + }; + }, [allowPinning, hasPermission, message, pinMessage, room, setModal, subscription]); +}; diff --git a/apps/meteor/client/lib/queryKeys.ts b/apps/meteor/client/lib/queryKeys.ts index 57a2dc52493b..44273b60f48a 100644 --- a/apps/meteor/client/lib/queryKeys.ts +++ b/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, diff --git a/apps/meteor/client/startup/actionButtons/index.ts b/apps/meteor/client/startup/actionButtons/index.ts index 81c8979ae2a9..cfcb074144e6 100644 --- a/apps/meteor/client/startup/actionButtons/index.ts +++ b/apps/meteor/client/startup/actionButtons/index.ts @@ -3,5 +3,4 @@ import './jumpToPinMessage'; import './jumpToSearchMessage'; import './jumpToStarMessage'; import './permalinkPinned'; -import './pinMessage'; import './unpinMessage'; diff --git a/apps/meteor/client/startup/actionButtons/pinMessage.tsx b/apps/meteor/client/startup/actionButtons/pinMessage.tsx deleted file mode 100644 index 8f54550d02d9..000000000000 --- a/apps/meteor/client/startup/actionButtons/pinMessage.tsx +++ /dev/null @@ -1,54 +0,0 @@ -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', - }); -});