From 0756e2e856b95db7f5b5ed5f7a2e08445061cca9 Mon Sep 17 00:00:00 2001 From: Tasso Date: Tue, 10 Dec 2024 17:54:26 -0300 Subject: [PATCH] Split hooks from module --- .../hooks/useMarketPlaceMenu.tsx | 2 +- .../message/toolbar/MessageToolbar.tsx | 2 +- .../client/hooks/useAppActionButtons.ts | 186 +----------------- apps/meteor/client/hooks/useFilterActions.ts | 19 -- .../useMessageActionAppsActionButtons.ts | 78 ++++++++ .../hooks/useMessageboxAppsActionButtons.ts | 62 ++++++ .../hooks/useUserDropdownAppsActionButtons.ts | 56 ++++++ .../header/actions/hooks/useAppsItems.tsx | 2 +- .../MessageBoxActionsToolbar.tsx | 2 +- 9 files changed, 203 insertions(+), 206 deletions(-) delete mode 100644 apps/meteor/client/hooks/useFilterActions.ts create mode 100644 apps/meteor/client/hooks/useMessageActionAppsActionButtons.ts create mode 100644 apps/meteor/client/hooks/useMessageboxAppsActionButtons.ts create mode 100644 apps/meteor/client/hooks/useUserDropdownAppsActionButtons.ts diff --git a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx index 034ab0367e81..80e61896bed3 100644 --- a/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx +++ b/apps/meteor/client/NavBarV2/NavBarPagesToolbar/hooks/useMarketPlaceMenu.tsx @@ -3,7 +3,7 @@ import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; import { useTranslation, usePermission, useRouter } from '@rocket.chat/ui-contexts'; import React from 'react'; -import { useUserDropdownAppsActionButtons } from '../../../hooks/useAppActionButtons'; +import { useUserDropdownAppsActionButtons } from '../../../hooks/useUserDropdownAppsActionButtons'; import { useAppRequestStats } from '../../../views/marketplace/hooks/useAppRequestStats'; export const useMarketPlaceMenu = () => { diff --git a/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx index 79c939811e6a..813b19ad27c4 100644 --- a/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx +++ b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx @@ -41,8 +41,8 @@ import { useViewOriginalTranslationAction } from './useViewOriginalTranslationAc import { useWebDAVMessageAction } from './useWebDAVMessageAction'; import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction'; import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction'; -import { useMessageActionAppsActionButtons } from '../../../hooks/useAppActionButtons'; import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout'; +import { useMessageActionAppsActionButtons } from '../../../hooks/useMessageActionAppsActionButtons'; import { roomsQueryKeys } from '../../../lib/queryKeys'; const getMessageContext = (message: IMessage, room: IRoom, context?: MessageActionContext): MessageActionContext => { diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts index 692df862470f..b5796965b062 100644 --- a/apps/meteor/client/hooks/useAppActionButtons.ts +++ b/apps/meteor/client/hooks/useAppActionButtons.ts @@ -1,22 +1,10 @@ import { type IUIActionButton, type UIActionButtonContext } from '@rocket.chat/apps-engine/definition/ui'; -import type { IMessage } from '@rocket.chat/core-typings'; import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; -import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; -import { useEndpoint, useStream, useToastMessageDispatch, useUserId } from '@rocket.chat/ui-contexts'; -import type { UseQueryResult } from '@tanstack/react-query'; +import { useEndpoint, useStream, useUserId } from '@rocket.chat/ui-contexts'; import { useQuery, useQueryClient } from '@tanstack/react-query'; -import { useEffect, useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; +import { useEffect } from 'react'; -import { useApplyButtonFilters, useApplyButtonAuthFilter } from './useApplyButtonFilters'; -import { useFilterActionsByContext } from './useFilterActions'; -import { UiKitTriggerTimeoutError } from '../../app/ui-message/client/UiKitTriggerTimeoutError'; -import type { MessageActionConfig, MessageActionContext } from '../../app/ui-utils/client/lib/MessageAction'; -import type { MessageBoxAction } from '../../app/ui-utils/client/lib/messageBox'; -import { Utilities } from '../../ee/lib/misc/Utilities'; -import { useUiKitActionManager } from '../uikit/hooks/useUiKitActionManager'; - -const getIdForActionButton = ({ appId, actionId }: IUIActionButton): string => `${appId}/${actionId}`; +export const getIdForActionButton = ({ appId, actionId }: IUIActionButton): string => `${appId}/${actionId}`; export const useAppActionButtons = (context?: TContext) => { const queryClient = useQueryClient(); @@ -62,171 +50,3 @@ export const useAppActionButtons = return result; }; - -export const useMessageboxAppsActionButtons = () => { - const result = useAppActionButtons('messageBoxAction'); - const actionManager = useUiKitActionManager(); - const dispatchToastMessage = useToastMessageDispatch(); - const { t } = useTranslation(); - - const applyButtonFilters = useApplyButtonFilters(); - - const data = useMemo( - () => - result.data - ?.filter((action) => { - return applyButtonFilters(action); - }) - .map((action) => { - const item: Omit = { - id: getIdForActionButton(action), - label: Utilities.getI18nKeyForApp(action.labelI18n, action.appId), - action: (params) => { - void actionManager - .emitInteraction(action.appId, { - type: 'actionButton', - rid: params.rid, - tmid: params.tmid, - actionId: action.actionId, - payload: { context: action.context, message: params.chat.composer?.text ?? '' }, - }) - .catch(async (reason) => { - if (reason instanceof UiKitTriggerTimeoutError) { - dispatchToastMessage({ - type: 'error', - message: t('UIKit_Interaction_Timeout'), - }); - return; - } - - return reason; - }); - }, - }; - - return item; - }), - [actionManager, applyButtonFilters, dispatchToastMessage, result.data, t], - ); - return { - ...result, - data, - } as UseQueryResult; -}; - -export const useUserDropdownAppsActionButtons = () => { - const result = useAppActionButtons('userDropdownAction'); - const actionManager = useUiKitActionManager(); - const dispatchToastMessage = useToastMessageDispatch(); - const { t } = useTranslation(); - - const applyButtonFilters = useApplyButtonAuthFilter(); - - const data = useMemo( - () => - result.data - ?.filter((action) => { - return applyButtonFilters(action); - }) - .map((action) => { - return { - id: `${action.appId}_${action.actionId}`, - // icon: action.icon as GenericMenuItemProps['icon'], - content: action.labelI18n, - onClick: () => { - void actionManager - .emitInteraction(action.appId, { - type: 'actionButton', - actionId: action.actionId, - payload: { context: action.context }, - }) - .catch(async (reason) => { - if (reason instanceof UiKitTriggerTimeoutError) { - dispatchToastMessage({ - type: 'error', - message: t('UIKit_Interaction_Timeout'), - }); - return; - } - - return reason; - }); - }, - }; - }), - [actionManager, applyButtonFilters, dispatchToastMessage, result.data, t], - ); - return { - ...result, - data, - } as UseQueryResult; -}; - -export const useMessageActionAppsActionButtons = (message: IMessage, context?: MessageActionContext, category?: string) => { - const result = useAppActionButtons('messageAction'); - const actionManager = useUiKitActionManager(); - const applyButtonFilters = useApplyButtonFilters(category); - const dispatchToastMessage = useToastMessageDispatch(); - const { t } = useTranslation(); - const filterActionsByContext = useFilterActionsByContext(context); - const data = useMemo( - () => - result.data - ?.filter((action) => { - if (!filterActionsByContext(action)) { - return false; - } - return applyButtonFilters(action); - }) - .map((action) => { - const item: MessageActionConfig = { - icon: undefined as any, - id: getIdForActionButton(action), - label: Utilities.getI18nKeyForApp(action.labelI18n, action.appId), - order: 7, - type: 'apps', - variant: action.variant, - group: 'menu', - action: () => { - void actionManager - .emitInteraction(action.appId, { - type: 'actionButton', - rid: message.rid, - tmid: message.tmid, - mid: message._id, - actionId: action.actionId, - payload: { context: action.context }, - }) - .catch(async (reason) => { - if (reason instanceof UiKitTriggerTimeoutError) { - dispatchToastMessage({ - type: 'error', - message: t('UIKit_Interaction_Timeout'), - }); - return; - } - - return reason; - }); - }, - }; - - return item; - }), - [ - actionManager, - applyButtonFilters, - dispatchToastMessage, - filterActionsByContext, - message._id, - message.rid, - message.tmid, - result.data, - t, - ], - ); - return { - ...result, - data, - } as UseQueryResult; -}; diff --git a/apps/meteor/client/hooks/useFilterActions.ts b/apps/meteor/client/hooks/useFilterActions.ts deleted file mode 100644 index 4dda122c3bb3..000000000000 --- a/apps/meteor/client/hooks/useFilterActions.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { MessageActionContext } from '@rocket.chat/apps-engine/definition/ui'; -import type { IUIActionButton } from '@rocket.chat/apps-engine/definition/ui'; -import { useCallback } from 'react'; - -export const useFilterActionsByContext = (context: string | undefined) => { - return useCallback( - (action: IUIActionButton) => { - if (!context) { - return true; - } - - const messageActionContext = action.when?.messageActionContext || Object.values(MessageActionContext); - const isContextMatch = messageActionContext.includes(context as MessageActionContext); - - return isContextMatch; - }, - [context], - ); -}; diff --git a/apps/meteor/client/hooks/useMessageActionAppsActionButtons.ts b/apps/meteor/client/hooks/useMessageActionAppsActionButtons.ts new file mode 100644 index 000000000000..1098f8f52422 --- /dev/null +++ b/apps/meteor/client/hooks/useMessageActionAppsActionButtons.ts @@ -0,0 +1,78 @@ +import { type IUIActionButton, MessageActionContext as AppsEngineMessageActionContext } from '@rocket.chat/apps-engine/definition/ui'; +import type { IMessage } from '@rocket.chat/core-typings'; +import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; +import type { UseQueryResult } from '@tanstack/react-query'; +import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { useAppActionButtons, getIdForActionButton } from './useAppActionButtons'; +import { useApplyButtonFilters } from './useApplyButtonFilters'; +import { UiKitTriggerTimeoutError } from '../../app/ui-message/client/UiKitTriggerTimeoutError'; +import type { MessageActionContext, MessageActionConfig } from '../../app/ui-utils/client/lib/MessageAction'; +import { Utilities } from '../../ee/lib/misc/Utilities'; +import { useUiKitActionManager } from '../uikit/hooks/useUiKitActionManager'; + +const filterActionsByContext = (context: string | undefined, action: IUIActionButton) => { + if (!context) { + return true; + } + + const messageActionContext = action.when?.messageActionContext || Object.values(AppsEngineMessageActionContext); + const isContextMatch = messageActionContext.includes(context as AppsEngineMessageActionContext); + + return isContextMatch; +}; + +export const useMessageActionAppsActionButtons = (message: IMessage, context?: MessageActionContext, category?: string) => { + const result = useAppActionButtons('messageAction'); + const actionManager = useUiKitActionManager(); + const applyButtonFilters = useApplyButtonFilters(category); + const dispatchToastMessage = useToastMessageDispatch(); + const { t } = useTranslation(); + const data = useMemo( + () => + result.data + ?.filter((action) => filterActionsByContext(context, action)) + .filter((action) => applyButtonFilters(action)) + .map((action) => { + const item: MessageActionConfig = { + icon: undefined as any, + id: getIdForActionButton(action), + label: Utilities.getI18nKeyForApp(action.labelI18n, action.appId), + order: 7, + type: 'apps', + variant: action.variant, + group: 'menu', + action: () => { + void actionManager + .emitInteraction(action.appId, { + type: 'actionButton', + rid: message.rid, + tmid: message.tmid, + mid: message._id, + actionId: action.actionId, + payload: { context: action.context }, + }) + .catch(async (reason) => { + if (reason instanceof UiKitTriggerTimeoutError) { + dispatchToastMessage({ + type: 'error', + message: t('UIKit_Interaction_Timeout'), + }); + return; + } + + return reason; + }); + }, + }; + + return item; + }), + [actionManager, applyButtonFilters, context, dispatchToastMessage, message._id, message.rid, message.tmid, result.data, t], + ); + return { + ...result, + data, + } as UseQueryResult; +}; diff --git a/apps/meteor/client/hooks/useMessageboxAppsActionButtons.ts b/apps/meteor/client/hooks/useMessageboxAppsActionButtons.ts new file mode 100644 index 000000000000..10c6f4f58ef4 --- /dev/null +++ b/apps/meteor/client/hooks/useMessageboxAppsActionButtons.ts @@ -0,0 +1,62 @@ +import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; +import type { UseQueryResult } from '@tanstack/react-query'; +import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { useAppActionButtons, getIdForActionButton } from './useAppActionButtons'; +import { useApplyButtonFilters } from './useApplyButtonFilters'; +import { UiKitTriggerTimeoutError } from '../../app/ui-message/client/UiKitTriggerTimeoutError'; +import type { MessageBoxAction } from '../../app/ui-utils/client/lib/messageBox'; +import { Utilities } from '../../ee/lib/misc/Utilities'; +import { useUiKitActionManager } from '../uikit/hooks/useUiKitActionManager'; + +export const useMessageboxAppsActionButtons = (): UseQueryResult => { + const result = useAppActionButtons('messageBoxAction'); + const actionManager = useUiKitActionManager(); + const dispatchToastMessage = useToastMessageDispatch(); + const { t } = useTranslation(); + + const applyButtonFilters = useApplyButtonFilters(); + + const data = useMemo( + () => + result.data + ?.filter((action) => { + return applyButtonFilters(action); + }) + .map((action) => { + const item: Omit = { + id: getIdForActionButton(action), + label: Utilities.getI18nKeyForApp(action.labelI18n, action.appId), + action: (params) => { + void actionManager + .emitInteraction(action.appId, { + type: 'actionButton', + rid: params.rid, + tmid: params.tmid, + actionId: action.actionId, + payload: { context: action.context, message: params.chat.composer?.text ?? '' }, + }) + .catch(async (reason) => { + if (reason instanceof UiKitTriggerTimeoutError) { + dispatchToastMessage({ + type: 'error', + message: t('UIKit_Interaction_Timeout'), + }); + return; + } + + return reason; + }); + }, + }; + + return item; + }), + [actionManager, applyButtonFilters, dispatchToastMessage, result.data, t], + ); + return { + ...result, + data, + } as UseQueryResult; +}; diff --git a/apps/meteor/client/hooks/useUserDropdownAppsActionButtons.ts b/apps/meteor/client/hooks/useUserDropdownAppsActionButtons.ts new file mode 100644 index 000000000000..69355590fe90 --- /dev/null +++ b/apps/meteor/client/hooks/useUserDropdownAppsActionButtons.ts @@ -0,0 +1,56 @@ +import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; +import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; +import type { UseQueryResult } from '@tanstack/react-query'; +import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { useAppActionButtons } from './useAppActionButtons'; +import { useApplyButtonAuthFilter } from './useApplyButtonFilters'; +import { UiKitTriggerTimeoutError } from '../../app/ui-message/client/UiKitTriggerTimeoutError'; +import { useUiKitActionManager } from '../uikit/hooks/useUiKitActionManager'; + +export const useUserDropdownAppsActionButtons = () => { + const result = useAppActionButtons('userDropdownAction'); + const actionManager = useUiKitActionManager(); + const dispatchToastMessage = useToastMessageDispatch(); + const { t } = useTranslation(); + + const applyButtonFilters = useApplyButtonAuthFilter(); + + const data = useMemo( + () => + result.data + ?.filter((action) => applyButtonFilters(action)) + .map((action) => { + return { + id: `${action.appId}_${action.actionId}`, + // icon: action.icon as GenericMenuItemProps['icon'], + content: action.labelI18n, + onClick: () => { + void actionManager + .emitInteraction(action.appId, { + type: 'actionButton', + actionId: action.actionId, + payload: { context: action.context }, + }) + .catch(async (reason) => { + if (reason instanceof UiKitTriggerTimeoutError) { + dispatchToastMessage({ + type: 'error', + message: t('UIKit_Interaction_Timeout'), + }); + return; + } + + return reason; + }); + }, + }; + }), + [actionManager, applyButtonFilters, dispatchToastMessage, result.data, t], + ); + return { + ...result, + data, + } as UseQueryResult; +}; diff --git a/apps/meteor/client/sidebar/header/actions/hooks/useAppsItems.tsx b/apps/meteor/client/sidebar/header/actions/hooks/useAppsItems.tsx index f7b9cea0d56a..2fa95d1606e1 100644 --- a/apps/meteor/client/sidebar/header/actions/hooks/useAppsItems.tsx +++ b/apps/meteor/client/sidebar/header/actions/hooks/useAppsItems.tsx @@ -3,7 +3,7 @@ import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; import { useTranslation, useRoute, usePermission } from '@rocket.chat/ui-contexts'; import React from 'react'; -import { useUserDropdownAppsActionButtons } from '../../../../hooks/useAppActionButtons'; +import { useUserDropdownAppsActionButtons } from '../../../../hooks/useUserDropdownAppsActionButtons'; import { useAppRequestStats } from '../../../../views/marketplace/hooks/useAppRequestStats'; /** diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx index b4ec012f3337..64eed975e9cc 100644 --- a/apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx +++ b/apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx @@ -16,7 +16,7 @@ import { useVideoMessageAction } from './hooks/useVideoMessageAction'; import { useWebdavActions } from './hooks/useWebdavActions'; import { messageBox } from '../../../../../../app/ui-utils/client'; import { isTruthy } from '../../../../../../lib/isTruthy'; -import { useMessageboxAppsActionButtons } from '../../../../../hooks/useAppActionButtons'; +import { useMessageboxAppsActionButtons } from '../../../../../hooks/useMessageboxAppsActionButtons'; import { useChat } from '../../../contexts/ChatContext'; import { useRoom } from '../../../contexts/RoomContext';