diff --git a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview.tsx b/apps/meteor/app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview.tsx index b19c2a10f57..68ad7c38fa2 100644 --- a/apps/meteor/app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview.tsx +++ b/apps/meteor/app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview.tsx @@ -10,7 +10,7 @@ type ComposerBoxPopupPreviewItem = { _id: string; type: 'image' | 'video' | 'aud const ComposerBoxPopupPreview = forwardRef< | { - getFilter: () => unknown; + getFilter?: () => unknown; select?: (s: ComposerBoxPopupPreviewItem) => void; } | undefined, @@ -25,43 +25,46 @@ const ComposerBoxPopupPreview = forwardRef< const executeSlashCommandPreviewMethod = useMethod('executeSlashCommandPreview'); useImperativeHandle( ref, - () => ({ - getFilter: () => { - const value = chat?.composer?.substring(0, chat?.composer?.selection.start); - if (!value) { - throw new Error('No value'); - } - const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/); - - if (!matches) { - throw new Error('No matches'); - } - - const cmd = matches[1].replace('/', '').trim().toLowerCase(); - - const params = matches[2]; - return { cmd, params, msg: { rid, tmid } }; - }, - select: (item) => { - const value = chat?.composer?.substring(0, chat?.composer?.selection.start); - if (!value) { - throw new Error('No value'); - } - const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/); - - if (!matches) { - throw new Error('No matches'); - } - - const cmd = matches[1].replace('/', '').trim().toLowerCase(); - - const params = matches[2]; - // TODO: Fix this solve the typing issue - executeSlashCommandPreviewMethod({ cmd, params, msg: { rid, tmid } }, { id: item._id, type: item.type, value: item.value }); - chat?.composer?.setText(''); - }, - }), - [chat?.composer, executeSlashCommandPreviewMethod, rid, tmid], + () => + suspended + ? {} + : { + getFilter: () => { + const value = chat?.composer?.substring(0, chat?.composer?.selection.start); + if (!value) { + throw new Error('No value'); + } + const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/); + + if (!matches) { + throw new Error('No matches'); + } + + const cmd = matches[1].replace('/', '').trim().toLowerCase(); + + const params = matches[2]; + return { cmd, params, msg: { rid, tmid } }; + }, + select: (item) => { + const value = chat?.composer?.substring(0, chat?.composer?.selection.start); + if (!value) { + throw new Error('No value'); + } + const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/); + + if (!matches) { + throw new Error('No matches'); + } + + const cmd = matches[1].replace('/', '').trim().toLowerCase(); + + const params = matches[2]; + // TODO: Fix this solve the typing issue + executeSlashCommandPreviewMethod({ cmd, params, msg: { rid, tmid } }, { id: item._id, type: item.type, value: item.value }); + chat?.composer?.setText(''); + }, + }, + [chat?.composer, executeSlashCommandPreviewMethod, rid, tmid, suspended], ); const itemsFlat = items diff --git a/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts b/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts index 13eadcdcff7..685fbb72daf 100644 --- a/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts +++ b/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts @@ -9,7 +9,7 @@ import { useComposerBoxPopupQueries } from './useComposerBoxPopupQueries'; export type ComposerBoxPopupImperativeCommands = MutableRefObject< | { - getFilter: () => unknown; + getFilter?: () => unknown; select?: (s: T) => void; } | undefined @@ -60,7 +60,10 @@ export const useComposerBoxPopup = ({ const commandsRef: ComposerBoxPopupImperativeCommands = useRef(); - const items = useComposerBoxPopupQueries(filter, popup) as unknown as UseQueryResult[]; + const { queries: items, suspended } = useComposerBoxPopupQueries(filter, popup) as { + queries: UseQueryResult[]; + suspended: boolean; + }; const chat = useChat(); @@ -135,7 +138,7 @@ export const useComposerBoxPopup = ({ ? new RegExp(`(?:^| |\n)(${configuration.trigger})([^\\s]*$)`) : new RegExp(`(?:^)(${configuration.trigger})([^\\s]*$)`)); const result = value.match(selector); - setFilter(commandsRef.current?.getFilter() ?? (result ? result[2] : '')); + setFilter(commandsRef.current?.getFilter?.() ?? (result ? result[2] : '')); } return configuration; }); @@ -165,7 +168,7 @@ export const useComposerBoxPopup = ({ }); const keydown = useMutableCallback((event: KeyboardEvent) => { - if (!popup) { + if (!popup || popup.preview) { return; } @@ -253,7 +256,7 @@ export const useComposerBoxPopup = ({ popup, select, - suspended: items.every((item) => item.isLoading && item.fetchStatus === 'idle'), + suspended, commandsRef, callbackRef, diff --git a/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopupQueries.ts b/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopupQueries.ts index a3b1f84b3cd..81a02c49023 100644 --- a/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopupQueries.ts +++ b/apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopupQueries.ts @@ -18,25 +18,28 @@ export const useComposerBoxPopupQueries = popup?.getItemsFromLocal && popup.getItemsFromLocal(filter), - onSuccess: (args: T[]) => { - if (args.length < 5) { - setCounter(1); - } + return { + queries: useQueries({ + queries: [ + popup?.getItemsFromLocal && { + keepPreviousData: true, + queryKey: ['message-popup', 'local', filter, popup], + queryFn: () => popup?.getItemsFromLocal && popup.getItemsFromLocal(filter), + onSuccess: (args: T[]) => { + if (args.length < 5) { + setCounter(1); + } + }, + enabled: enableQuery, }, - enabled: enableQuery, - }, - popup?.getItemsFromServer && { - keepPreviousData: true, - queryKey: ['message-popup', 'server', filter, popup], - queryFn: () => popup?.getItemsFromServer && popup.getItemsFromServer(filter), - enabled: counter > 0, - }, - ].filter(Boolean) as any, - }) as QueriesResults; + popup?.getItemsFromServer && { + keepPreviousData: true, + queryKey: ['message-popup', 'server', filter, popup], + queryFn: () => popup?.getItemsFromServer && popup.getItemsFromServer(filter), + enabled: counter > 0, + }, + ].filter(Boolean) as any, + }) as QueriesResults, + suspended: !enableQuery, + }; };