diff --git a/apps/meteor/client/apps/gameCenter/GameCenter.tsx b/apps/meteor/client/apps/gameCenter/GameCenter.tsx index b6112bf869370..56252008e9f55 100644 --- a/apps/meteor/client/apps/gameCenter/GameCenter.tsx +++ b/apps/meteor/client/apps/gameCenter/GameCenter.tsx @@ -1,5 +1,5 @@ import type { IExternalComponent } from '@rocket.chat/apps-engine/definition/externalComponent'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useState } from 'react'; import type { ReactElement } from 'react'; @@ -18,12 +18,12 @@ const GameCenter = (): ReactElement => { const result = useExternalComponentsQuery(); - const handleClose = useMutableCallback((e) => { + const handleClose = useEffectEvent((e) => { preventSyntheticEvent(e); closeTab(); }); - const handleBack = useMutableCallback((e) => { + const handleBack = useEffectEvent((e) => { setOpenedGame(undefined); preventSyntheticEvent(e); }); diff --git a/apps/meteor/client/components/Omnichannel/Tags.tsx b/apps/meteor/client/components/Omnichannel/Tags.tsx index 1e5732fb9c2f5..9a2a86500633e 100644 --- a/apps/meteor/client/components/Omnichannel/Tags.tsx +++ b/apps/meteor/client/components/Omnichannel/Tags.tsx @@ -1,5 +1,5 @@ import { TextInput, Chip, Button, FieldLabel, FieldRow } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type { ChangeEvent, ReactElement } from 'react'; import { useMemo, useState } from 'react'; @@ -41,7 +41,7 @@ const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps) handler(tags.filter((tag) => tag !== tagToRemove)); }; - const handleTagTextSubmit = useMutableCallback(() => { + const handleTagTextSubmit = useEffectEvent(() => { if (!tags) { return; } diff --git a/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx b/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx index 6692387f496af..91d0438d7302b 100644 --- a/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx +++ b/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx @@ -2,7 +2,7 @@ import { isRoomFederated } from '@rocket.chat/core-typings'; import type { IRoom, RoomAdminFieldsType } from '@rocket.chat/core-typings'; import { css } from '@rocket.chat/css-in-js'; import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { RoomAvatar } from '@rocket.chat/ui-avatar'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; @@ -24,7 +24,7 @@ const RoomAvatarEditor = ({ disabled = false, room, roomAvatar, onChangeAvatar } const { t } = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); - const handleChangeAvatar = useMutableCallback(async (file) => { + const handleChangeAvatar = useEffectEvent(async (file) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = async (): Promise => { @@ -38,7 +38,7 @@ const RoomAvatarEditor = ({ disabled = false, room, roomAvatar, onChangeAvatar } }); const [clickUpload, reset] = useSingleFileInput(handleChangeAvatar); - const clickReset = useMutableCallback(() => { + const clickReset = useEffectEvent(() => { reset(); onChangeAvatar(null); }); diff --git a/apps/meteor/client/components/message/content/MessageActions.tsx b/apps/meteor/client/components/message/content/MessageActions.tsx index ee0042616f67f..0433f796ea022 100644 --- a/apps/meteor/client/components/message/content/MessageActions.tsx +++ b/apps/meteor/client/components/message/content/MessageActions.tsx @@ -1,6 +1,6 @@ import type { IMessage } from '@rocket.chat/core-typings'; import { Box, ButtonGroup } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { Keys as IconName } from '@rocket.chat/icons'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; @@ -23,7 +23,7 @@ type MessageActionsProps = { }; const MessageActions = ({ message, actions }: MessageActionsProps): ReactElement => { - const runAction = useMutableCallback((action: string) => () => { + const runAction = useEffectEvent((action: string) => () => { actionLinks.run(action, message); }); diff --git a/apps/meteor/client/hooks/useClipboardWithToast.ts b/apps/meteor/client/hooks/useClipboardWithToast.ts index fd30e5989b540..ee8abc1237449 100644 --- a/apps/meteor/client/hooks/useClipboardWithToast.ts +++ b/apps/meteor/client/hooks/useClipboardWithToast.ts @@ -1,5 +1,5 @@ import type { UseClipboardReturn } from '@rocket.chat/fuselage-hooks'; -import { useClipboard, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useClipboard, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; @@ -8,7 +8,7 @@ export default function useClipboardWithToast(text: string): UseClipboardReturn const dispatchToastMessage = useToastMessageDispatch(); return useClipboard(text, { - onCopySuccess: useMutableCallback(() => dispatchToastMessage({ type: 'success', message: t('Copied') })), - onCopyError: useMutableCallback((e) => dispatchToastMessage({ type: 'error', message: e })), + onCopySuccess: useEffectEvent(() => dispatchToastMessage({ type: 'success', message: t('Copied') })), + onCopyError: useEffectEvent((e) => dispatchToastMessage({ type: 'error', message: e })), }); } diff --git a/apps/meteor/client/hooks/useSingleFileInput.ts b/apps/meteor/client/hooks/useSingleFileInput.ts index 3ecdb14e72265..629152008d014 100644 --- a/apps/meteor/client/hooks/useSingleFileInput.ts +++ b/apps/meteor/client/hooks/useSingleFileInput.ts @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRef, useEffect } from 'react'; export const useSingleFileInput = ( @@ -52,8 +52,8 @@ export const useSingleFileInput = ( }; }, [fileField, fileType, onSetFile]); - const onClick = useMutableCallback(() => ref?.current?.click()); - const reset = useMutableCallback(() => { + const onClick = useEffectEvent(() => ref?.current?.click()); + const reset = useEffectEvent(() => { if (ref.current) { ref.current.value = ''; } diff --git a/apps/meteor/client/navbar/actions/NavbarHomeAction.tsx b/apps/meteor/client/navbar/actions/NavbarHomeAction.tsx index 420d1f3fd83a7..ec9a184642243 100644 --- a/apps/meteor/client/navbar/actions/NavbarHomeAction.tsx +++ b/apps/meteor/client/navbar/actions/NavbarHomeAction.tsx @@ -1,5 +1,5 @@ import { IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRouter, useLayout, useSetting } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes } from 'react'; import { useTranslation } from 'react-i18next'; @@ -16,7 +16,7 @@ const NavbarHomeAction = (props: NavbarHomeActionProps) => { const routeName = router.getLocationPathname(); - const handleHome = useMutableCallback(() => { + const handleHome = useEffectEvent(() => { sidebar.toggle(); router.navigate('/home'); }); diff --git a/apps/meteor/client/omnichannel/businessHours/useRemoveBusinessHour.tsx b/apps/meteor/client/omnichannel/businessHours/useRemoveBusinessHour.tsx index ad39b51a2451d..3bb9fde92d0ef 100644 --- a/apps/meteor/client/omnichannel/businessHours/useRemoveBusinessHour.tsx +++ b/apps/meteor/client/omnichannel/businessHours/useRemoveBusinessHour.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useMethod } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; @@ -12,7 +12,7 @@ export const useRemoveBusinessHour = () => { const removeBusinessHour = useMethod('livechat:removeBusinessHour'); const queryClient = useQueryClient(); - const handleRemove = useMutableCallback((_id, type) => { + const handleRemove = useEffectEvent((_id, type) => { const onDeleteBusinessHour = async () => { try { await removeBusinessHour(_id, type); diff --git a/apps/meteor/client/omnichannel/cannedResponses/CannedResponsesTable.tsx b/apps/meteor/client/omnichannel/cannedResponses/CannedResponsesTable.tsx index 697c0e16b75f9..eed4eb0978fcf 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/CannedResponsesTable.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/CannedResponsesTable.tsx @@ -1,5 +1,5 @@ import { Box, IconButton, Pagination } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { UserAvatar } from '@rocket.chat/ui-avatar'; import { useTranslation, usePermission, useToastMessageDispatch, useEndpoint, useRouter } from '@rocket.chat/ui-contexts'; import { hashKey, useQuery } from '@tanstack/react-query'; @@ -62,9 +62,9 @@ const CannedResponsesTable = () => { refetchOnWindowFocus: false, }); - const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/canned-responses/new')); + const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/canned-responses/new')); - const onRowClick = useMutableCallback((id, scope) => (): void => { + const onRowClick = useEffectEvent((id, scope) => (): void => { if (scope === 'global' && isMonitor && !isManager) { return dispatchToastMessage({ type: 'error', diff --git a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx index 85c3e580c7a6f..6ba47ef6142c1 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx @@ -1,4 +1,4 @@ -import { useDebouncedValue, useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useLocalStorage, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useRouter } from '@rocket.chat/ui-contexts'; import type { ChangeEvent, MouseEvent } from 'react'; import { memo, useCallback, useMemo, useState } from 'react'; @@ -38,7 +38,7 @@ export const WrapCannedResponseList = () => { ); const { phase, items, itemCount } = useRecordList(cannedList); - const onClickItem = useMutableCallback((data) => { + const onClickItem = useEffectEvent((data) => { const { _id: context } = data; router.navigate({ diff --git a/apps/meteor/client/omnichannel/cannedResponses/useRemoveCannedResponse.tsx b/apps/meteor/client/omnichannel/cannedResponses/useRemoveCannedResponse.tsx index c70908b0ad26a..f6bcc964c609c 100644 --- a/apps/meteor/client/omnichannel/cannedResponses/useRemoveCannedResponse.tsx +++ b/apps/meteor/client/omnichannel/cannedResponses/useRemoveCannedResponse.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useRouter, useMethod } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; @@ -14,7 +14,7 @@ export const useRemoveCannedResponse = () => { const dispatchToastMessage = useToastMessageDispatch(); const removeCannedResponse = useMethod('removeCannedResponse'); - const handleDelete = useMutableCallback((id) => { + const handleDelete = useEffectEvent((id) => { const onDeleteCannedResponse: () => Promise = async () => { try { await removeCannedResponse(id); diff --git a/apps/meteor/client/omnichannel/hooks/useOmnichannelPrioritiesMenu.tsx b/apps/meteor/client/omnichannel/hooks/useOmnichannelPrioritiesMenu.tsx index b23d2b4a46d3f..9fbdc8be019ca 100644 --- a/apps/meteor/client/omnichannel/hooks/useOmnichannelPrioritiesMenu.tsx +++ b/apps/meteor/client/omnichannel/hooks/useOmnichannelPrioritiesMenu.tsx @@ -1,6 +1,6 @@ import { LivechatPriorityWeight } from '@rocket.chat/core-typings'; import type { Menu } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useEndpoint } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import type { ComponentProps } from 'react'; @@ -18,7 +18,7 @@ export const useOmnichannelPrioritiesMenu = (rid: string): ComponentProps async () => { + const handlePriorityChange = useEffectEvent((priorityId: string) => async () => { try { priorityId ? await updateRoomPriority({ priorityId }) : await removeRoomPriority(); queryClient.invalidateQueries({ diff --git a/apps/meteor/client/omnichannel/priorities/PrioritiesPage.tsx b/apps/meteor/client/omnichannel/priorities/PrioritiesPage.tsx index 3f0e6e13d8c26..8d398b1da6afd 100644 --- a/apps/meteor/client/omnichannel/priorities/PrioritiesPage.tsx +++ b/apps/meteor/client/omnichannel/priorities/PrioritiesPage.tsx @@ -1,5 +1,5 @@ import { Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useEndpoint, useRoute, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import type { ReactElement } from 'react'; @@ -59,7 +59,7 @@ export const PrioritiesPage = ({ priorityId, context }: PrioritiesPageProps): Re setModal( setModal(null)} />); }; - const onRowClick = useMutableCallback((id: string): void => { + const onRowClick = useEffectEvent((id: string): void => { prioritiesRoute.push({ context: 'edit', id }); }); diff --git a/apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx b/apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx index 8492680f68d0c..288cc5ae63519 100644 --- a/apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx +++ b/apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx @@ -1,6 +1,6 @@ import type { ILivechatPriority, Serialized } from '@rocket.chat/core-typings'; import { Field, FieldError, Button, Box, ButtonGroup } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; @@ -44,7 +44,7 @@ const PriorityEditForm = ({ data, onSave, onCancel }: PriorityEditFormProps): Re defaultValues: data ? { name: dirty ? name : defaultName } : {}, }); - const handleSave = useMutableCallback(async () => { + const handleSave = useEffectEvent(async () => { const { name } = getValues(); if (!isValid) { diff --git a/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx b/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx index 044d09792a4d6..e1effedb296d1 100644 --- a/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx +++ b/apps/meteor/client/omnichannel/reports/components/AgentsTable.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -24,7 +24,7 @@ type AgentsTableProps = { export const AgentsTable = memo(({ data, sortBy, sortDirection, setSort }: AgentsTableProps) => { const { t } = useTranslation(); - const onHeaderClick = useMutableCallback((id) => { + const onHeaderClick = useEffectEvent((id) => { setSort(id, sortDirection === 'asc' ? 'desc' : 'asc'); }); diff --git a/apps/meteor/client/omnichannel/slaPolicies/RemoveSlaButton.tsx b/apps/meteor/client/omnichannel/slaPolicies/RemoveSlaButton.tsx index 36148d7e73567..510f99e8710c0 100644 --- a/apps/meteor/client/omnichannel/slaPolicies/RemoveSlaButton.tsx +++ b/apps/meteor/client/omnichannel/slaPolicies/RemoveSlaButton.tsx @@ -1,5 +1,5 @@ import { IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRoute, useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; @@ -14,7 +14,7 @@ const RemoveSlaButton = ({ _id, reload }: { _id: string; reload: () => void }) = const removeSLA = useEndpoint('DELETE', `/v1/livechat/sla/:slaId`, { slaId: _id }); - const handleDelete = useMutableCallback((e) => { + const handleDelete = useEffectEvent((e) => { e.stopPropagation(); const onDeleteAgent = async (): Promise => { try { diff --git a/apps/meteor/client/omnichannel/slaPolicies/SlaEdit.tsx b/apps/meteor/client/omnichannel/slaPolicies/SlaEdit.tsx index 374713acf2ea5..fe8e0cf5f501a 100644 --- a/apps/meteor/client/omnichannel/slaPolicies/SlaEdit.tsx +++ b/apps/meteor/client/omnichannel/slaPolicies/SlaEdit.tsx @@ -1,6 +1,6 @@ import type { IOmnichannelServiceLevelAgreements, Serialized } from '@rocket.chat/core-typings'; import { Field, FieldLabel, FieldRow, FieldError, TextInput, Button, Margins, Box, NumberInput } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { useController, useForm } from 'react-hook-form'; @@ -51,7 +51,7 @@ function SlaEdit({ data, isNew, slaId, reload, ...props }: SlaEditProps): ReactE const { field: descField } = useController({ control, name: 'description' }); - const handleSave = useMutableCallback(async () => { + const handleSave = useEffectEvent(async () => { const { name, description, dueTimeInMinutes } = getValues(); if (!isValid || !name || dueTimeInMinutes === undefined) { diff --git a/apps/meteor/client/omnichannel/slaPolicies/SlaPage.tsx b/apps/meteor/client/omnichannel/slaPolicies/SlaPage.tsx index 97abaef3be45a..b20d47876eac2 100644 --- a/apps/meteor/client/omnichannel/slaPolicies/SlaPage.tsx +++ b/apps/meteor/client/omnichannel/slaPolicies/SlaPage.tsx @@ -1,5 +1,5 @@ import { Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRouteParameter, useRoute } from '@rocket.chat/ui-contexts'; import { useRef, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -28,7 +28,7 @@ const SlaPage = () => { reload.current(); }, []); - const handleClick = useMutableCallback(() => + const handleClick = useEffectEvent(() => slaPoliciesRoute.push({ context: 'new', }), diff --git a/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx b/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx index 225033613ad4e..e73993d6dfa5b 100644 --- a/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx +++ b/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx @@ -1,5 +1,5 @@ import { Pagination } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts'; import { useQuery, hashKey } from '@tanstack/react-query'; import type { MutableRefObject } from 'react'; @@ -55,8 +55,8 @@ const SlaTable = ({ reload }: { reload: MutableRefObject<() => void> }) => { reload.current = refetch; }, [reload, refetch]); - const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/sla-policies/new')); - const onRowClick = useMutableCallback((id) => () => router.navigate(`/omnichannel/sla-policies/edit/${id}`)); + const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/sla-policies/new')); + const onRowClick = useEffectEvent((id) => () => router.navigate(`/omnichannel/sla-policies/edit/${id}`)); const headers = ( <> diff --git a/apps/meteor/client/omnichannel/tags/TagEdit.tsx b/apps/meteor/client/omnichannel/tags/TagEdit.tsx index af174af4e042b..6ad842940e689 100644 --- a/apps/meteor/client/omnichannel/tags/TagEdit.tsx +++ b/apps/meteor/client/omnichannel/tags/TagEdit.tsx @@ -1,6 +1,6 @@ import type { ILivechatDepartment, ILivechatTag, Serialized } from '@rocket.chat/core-typings'; import { Field, FieldLabel, FieldRow, FieldError, TextInput, Button, ButtonGroup, FieldGroup, Box } from '@rocket.chat/fuselage'; -import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useRouter, useMethod } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import { useForm, Controller } from 'react-hook-form'; @@ -52,7 +52,7 @@ const TagEdit = ({ tagData, currentDepartments }: TagEditProps) => { }, }); - const handleSave = useMutableCallback(async ({ name, description, departments }: TagEditPayload) => { + const handleSave = useEffectEvent(async ({ name, description, departments }: TagEditPayload) => { const departmentsId = departments?.map((dep) => dep.value) || ['']; try { diff --git a/apps/meteor/client/omnichannel/tags/TagsTable.tsx b/apps/meteor/client/omnichannel/tags/TagsTable.tsx index a3047d062ac61..40b31e8d3d970 100644 --- a/apps/meteor/client/omnichannel/tags/TagsTable.tsx +++ b/apps/meteor/client/omnichannel/tags/TagsTable.tsx @@ -1,5 +1,5 @@ import { IconButton, Pagination } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts'; import { useQuery, hashKey } from '@tanstack/react-query'; import { useMemo, useState } from 'react'; @@ -27,8 +27,8 @@ const TagsTable = () => { const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination(); const { sortBy, sortDirection, setSort } = useSort<'name' | 'description'>('name'); - const onRowClick = useMutableCallback((id) => router.navigate(`/omnichannel/tags/edit/${id}`)); - const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/tags/new')); + const onRowClick = useEffectEvent((id) => router.navigate(`/omnichannel/tags/edit/${id}`)); + const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/tags/new')); const handleDeleteTag = useRemoveTag(); const query = useDebouncedValue( diff --git a/apps/meteor/client/omnichannel/tags/useRemoveTag.tsx b/apps/meteor/client/omnichannel/tags/useRemoveTag.tsx index ac6f6e3a305d0..db62ac7c23424 100644 --- a/apps/meteor/client/omnichannel/tags/useRemoveTag.tsx +++ b/apps/meteor/client/omnichannel/tags/useRemoveTag.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useRouter, useMethod } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; @@ -13,7 +13,7 @@ export const useRemoveTag = () => { const queryClient = useQueryClient(); const router = useRouter(); - const handleDeleteTag = useMutableCallback((tagId) => { + const handleDeleteTag = useEffectEvent((tagId) => { const handleDelete = async () => { try { await removeTag(tagId); diff --git a/apps/meteor/client/omnichannel/units/UnitEdit.tsx b/apps/meteor/client/omnichannel/units/UnitEdit.tsx index e1be47d35e5f9..d1bae33242fa8 100644 --- a/apps/meteor/client/omnichannel/units/UnitEdit.tsx +++ b/apps/meteor/client/omnichannel/units/UnitEdit.tsx @@ -14,7 +14,7 @@ import { FieldRow, CheckOption, } from '@rocket.chat/fuselage'; -import { useMutableCallback, useDebouncedValue, useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useDebouncedValue, useUniqueId } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useMethod, useTranslation, useRouter } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import { useMemo, useState } from 'react'; @@ -127,7 +127,7 @@ const UnitEdit = ({ unitData, unitMonitors, unitDepartments }: UnitEditProps) => return [...mappedMonitorsItems, ...pending]; }, [monitors, monitorsItems]); - const handleSave = useMutableCallback(async ({ name, visibility }) => { + const handleSave = useEffectEvent(async ({ name, visibility }) => { const departmentsData = departments.map((department) => ({ departmentId: department.value })); const monitorsData = monitors.map((monitor) => ({ diff --git a/apps/meteor/client/omnichannel/units/UnitsTable.tsx b/apps/meteor/client/omnichannel/units/UnitsTable.tsx index 18b00bf06bd39..d62855bc430ec 100644 --- a/apps/meteor/client/omnichannel/units/UnitsTable.tsx +++ b/apps/meteor/client/omnichannel/units/UnitsTable.tsx @@ -1,5 +1,5 @@ import { Pagination, IconButton } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts'; import { useQuery, hashKey } from '@tanstack/react-query'; import { useMemo, useState } from 'react'; @@ -50,8 +50,8 @@ const UnitsTable = () => { const [defaultQuery] = useState(hashKey([query])); const queryHasChanged = defaultQuery !== hashKey([query]); - const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/units/new')); - const onRowClick = useMutableCallback((id) => () => router.navigate(`/omnichannel/units/edit/${id}`)); + const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/units/new')); + const onRowClick = useEffectEvent((id) => () => router.navigate(`/omnichannel/units/edit/${id}`)); const handleDelete = useRemoveUnit(); const headers = ( diff --git a/apps/meteor/client/omnichannel/units/useRemoveUnit.tsx b/apps/meteor/client/omnichannel/units/useRemoveUnit.tsx index c6faa7f8a9aed..c07dd84baf781 100644 --- a/apps/meteor/client/omnichannel/units/useRemoveUnit.tsx +++ b/apps/meteor/client/omnichannel/units/useRemoveUnit.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useMethod, useTranslation, useRouter } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; @@ -13,7 +13,7 @@ export const useRemoveUnit = () => { const queryClient = useQueryClient(); const removeUnit = useMethod('livechat:removeUnit'); - const handleDelete = useMutableCallback((id) => { + const handleDelete = useEffectEvent((id) => { const onDeleteAgent = async () => { try { await removeUnit(id); diff --git a/apps/meteor/client/providers/CallProvider/CallProvider.tsx b/apps/meteor/client/providers/CallProvider/CallProvider.tsx index bef0549272c1f..fd86f6376ee8d 100644 --- a/apps/meteor/client/providers/CallProvider/CallProvider.tsx +++ b/apps/meteor/client/providers/CallProvider/CallProvider.tsx @@ -9,7 +9,7 @@ import { isVoipEventCallAbandoned, UserState, } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { Random } from '@rocket.chat/random'; import type { Device } from '@rocket.chat/ui-contexts'; import { @@ -102,12 +102,12 @@ export const CallProvider = ({ children }: CallProviderProps) => { setModal(); }, [closeRoom, setModal]); - const changeAudioOutputDevice = useMutableCallback((selectedAudioDevice: Device): void => { + const changeAudioOutputDevice = useEffectEvent((selectedAudioDevice: Device): void => { remoteAudioMediaRef?.current && setOutputMediaDevice({ outputDevice: selectedAudioDevice, HTMLAudioElement: remoteAudioMediaRef.current }); }); - const changeAudioInputDevice = useMutableCallback((selectedAudioDevice: Device): void => { + const changeAudioInputDevice = useEffectEvent((selectedAudioDevice: Device): void => { if (!result.voipClient) { return; } diff --git a/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx b/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx index 96f5ed367684a..358f4e7ea9988 100644 --- a/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx +++ b/apps/meteor/client/providers/DeviceProvider/DeviceProvider.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { Device, DeviceContextValue } from '@rocket.chat/ui-contexts'; import { DeviceContext } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; @@ -32,7 +32,7 @@ export const DeviceProvider = ({ children }: DeviceProviderProps): ReactElement setSelectedAudioInputDevice(device); }; - const setAudioOutputDevice = useMutableCallback( + const setAudioOutputDevice = useEffectEvent( ({ outputDevice, HTMLAudioElement }: { outputDevice: Device; HTMLAudioElement: HTMLAudioElement }): void => { if (!isSetSinkIdAvailable()) { throw new Error('setSinkId is not available in this browser'); diff --git a/apps/meteor/client/sidebar/Item/Condensed.tsx b/apps/meteor/client/sidebar/Item/Condensed.tsx index b2f25ee67bec2..792c39903393a 100644 --- a/apps/meteor/client/sidebar/Item/Condensed.tsx +++ b/apps/meteor/client/sidebar/Item/Condensed.tsx @@ -1,5 +1,5 @@ import { IconButton, Sidebar } from '@rocket.chat/fuselage'; -import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; import type { Keys as IconName } from '@rocket.chat/icons'; import type { ReactElement } from 'react'; import { memo, useState } from 'react'; @@ -24,7 +24,7 @@ const Condensed = ({ icon, title = '', avatar, actions, href, unread, menu, badg const isReduceMotionEnabled = usePrefersReducedMotion(); - const handleMenu = useMutableCallback((e) => { + const handleMenu = useEffectEvent((e) => { setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu)); }); const handleMenuEvent = { diff --git a/apps/meteor/client/sidebar/Item/Extended.tsx b/apps/meteor/client/sidebar/Item/Extended.tsx index 3a1fa668eeb07..e236f8660bc71 100644 --- a/apps/meteor/client/sidebar/Item/Extended.tsx +++ b/apps/meteor/client/sidebar/Item/Extended.tsx @@ -1,5 +1,5 @@ import { Sidebar, IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; import type { Keys as IconName } from '@rocket.chat/icons'; import type { ReactNode } from 'react'; import { memo, useState } from 'react'; @@ -45,7 +45,7 @@ const Extended = ({ const isReduceMotionEnabled = usePrefersReducedMotion(); - const handleMenu = useMutableCallback((e) => { + const handleMenu = useEffectEvent((e) => { setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu)); }); diff --git a/apps/meteor/client/sidebar/Item/Medium.tsx b/apps/meteor/client/sidebar/Item/Medium.tsx index 44601ed948135..f1f37047ece47 100644 --- a/apps/meteor/client/sidebar/Item/Medium.tsx +++ b/apps/meteor/client/sidebar/Item/Medium.tsx @@ -1,5 +1,5 @@ import { Sidebar, IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks'; import type { ReactNode } from 'react'; import { memo, useState } from 'react'; @@ -22,7 +22,7 @@ const Medium = ({ icon, title = '', avatar, actions, href, badges, unread, menu, const isReduceMotionEnabled = usePrefersReducedMotion(); - const handleMenu = useMutableCallback((e) => { + const handleMenu = useEffectEvent((e) => { setMenuVisibility(e.target.offsetWidth > 0 && Boolean(menu)); }); const handleMenuEvent = { diff --git a/apps/meteor/client/sidebar/RoomMenu.tsx b/apps/meteor/client/sidebar/RoomMenu.tsx index afd2f573ae5a3..14e453da54016 100644 --- a/apps/meteor/client/sidebar/RoomMenu.tsx +++ b/apps/meteor/client/sidebar/RoomMenu.tsx @@ -1,6 +1,6 @@ import type { RoomType } from '@rocket.chat/core-typings'; import { Option, Menu } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey, Fields } from '@rocket.chat/ui-contexts'; import { useRouter, @@ -66,7 +66,7 @@ const RoomMenu = ({ const dispatchToastMessage = useToastMessageDispatch(); const setModal = useSetModal(); - const closeModal = useMutableCallback(() => setModal()); + const closeModal = useEffectEvent(() => setModal()); const router = useRouter(); @@ -102,7 +102,7 @@ const RoomMenu = ({ return !((cl != null && !cl) || ['d', 'l'].includes(type)); })(); - const handleLeave = useMutableCallback(() => { + const handleLeave = useEffectEvent(() => { const leave = async (): Promise => { try { await leaveRoom({ roomId: rid }); @@ -129,7 +129,7 @@ const RoomMenu = ({ ); }); - const handleToggleRead = useMutableCallback(async () => { + const handleToggleRead = useEffectEvent(async () => { try { queryClient.invalidateQueries({ queryKey: ['sidebar/search/spotlight'], @@ -154,7 +154,7 @@ const RoomMenu = ({ } }); - const handleToggleFavorite = useMutableCallback(async () => { + const handleToggleFavorite = useEffectEvent(async () => { try { await toggleFavorite({ roomId: rid, favorite: !isFavorite }); } catch (error) { diff --git a/apps/meteor/client/sidebar/header/EditStatusModal.tsx b/apps/meteor/client/sidebar/header/EditStatusModal.tsx index bbc287c6ee59b..6845ed0529253 100644 --- a/apps/meteor/client/sidebar/header/EditStatusModal.tsx +++ b/apps/meteor/client/sidebar/header/EditStatusModal.tsx @@ -1,6 +1,6 @@ import type { IUser } from '@rocket.chat/core-typings'; import { Field, TextInput, FieldGroup, Modal, Button, Box, FieldLabel, FieldRow, FieldError, FieldHint } from '@rocket.chat/fuselage'; -import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useLocalStorage, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts'; import type { ReactElement, ChangeEvent, ComponentProps, FormEvent } from 'react'; import { useState, useCallback } from 'react'; @@ -27,7 +27,7 @@ const EditStatusModal = ({ onClose, userStatus, userStatusText }: EditStatusModa const setUserStatus = useEndpoint('POST', '/v1/users.setStatus'); - const handleStatusText = useMutableCallback((e: ChangeEvent): void => { + const handleStatusText = useEffectEvent((e: ChangeEvent): void => { setStatusText(e.currentTarget.value); if (statusText && statusText.length > USER_STATUS_TEXT_MAX_LENGTH) { diff --git a/apps/meteor/client/sidebar/header/actions/Directory.tsx b/apps/meteor/client/sidebar/header/actions/Directory.tsx index 78a6b1756f19f..66774659427ed 100644 --- a/apps/meteor/client/sidebar/header/actions/Directory.tsx +++ b/apps/meteor/client/sidebar/header/actions/Directory.tsx @@ -1,5 +1,5 @@ import { Sidebar } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useLayout, useRouter, useCurrentRoutePath } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes } from 'react'; @@ -8,7 +8,7 @@ type DirectoryProps = Omit, 'is'>; const Directory = (props: DirectoryProps) => { const router = useRouter(); const { sidebar } = useLayout(); - const handleDirectory = useMutableCallback(() => { + const handleDirectory = useEffectEvent(() => { sidebar.toggle(); router.navigate('/directory'); }); diff --git a/apps/meteor/client/sidebar/header/actions/Home.tsx b/apps/meteor/client/sidebar/header/actions/Home.tsx index 5cfd307e7b324..5d6cc401078ac 100644 --- a/apps/meteor/client/sidebar/header/actions/Home.tsx +++ b/apps/meteor/client/sidebar/header/actions/Home.tsx @@ -1,5 +1,5 @@ import { Sidebar } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRouter, useLayout, useSetting, useCurrentRoutePath } from '@rocket.chat/ui-contexts'; import type { HTMLAttributes } from 'react'; @@ -9,7 +9,7 @@ const SidebarHeaderActionHome = (props: SidebarHeaderActionHomeProps) => { const router = useRouter(); const { sidebar } = useLayout(); const showHome = useSetting('Layout_Show_Home_Button'); - const handleHome = useMutableCallback(() => { + const handleHome = useEffectEvent(() => { sidebar.toggle(); router.navigate('/home'); }); diff --git a/apps/meteor/client/sidebar/header/actions/Search.tsx b/apps/meteor/client/sidebar/header/actions/Search.tsx index d7f515e19fc06..3c5ce3dc61eaf 100644 --- a/apps/meteor/client/sidebar/header/actions/Search.tsx +++ b/apps/meteor/client/sidebar/header/actions/Search.tsx @@ -1,5 +1,5 @@ import { Sidebar } from '@rocket.chat/fuselage'; -import { useMutableCallback, useOutsideClick } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useOutsideClick } from '@rocket.chat/fuselage-hooks'; import type { HTMLAttributes } from 'react'; import { useState, useEffect, useRef } from 'react'; import tinykeys from 'tinykeys'; @@ -12,13 +12,13 @@ const Search = (props: SearchProps) => { const [searchOpen, setSearchOpen] = useState(false); const ref = useRef(null); - const handleCloseSearch = useMutableCallback(() => { + const handleCloseSearch = useEffectEvent(() => { setSearchOpen(false); }); useOutsideClick([ref], handleCloseSearch); - const openSearch = useMutableCallback(() => { + const openSearch = useEffectEvent(() => { setSearchOpen(true); }); diff --git a/apps/meteor/client/sidebar/header/hooks/useAccountItems.tsx b/apps/meteor/client/sidebar/header/hooks/useAccountItems.tsx index ede1f8cb27f4c..99100fdad2b56 100644 --- a/apps/meteor/client/sidebar/header/hooks/useAccountItems.tsx +++ b/apps/meteor/client/sidebar/header/hooks/useAccountItems.tsx @@ -1,5 +1,5 @@ import { Badge } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; import { defaultFeaturesPreview, usePreferenceFeaturePreviewList } from '@rocket.chat/ui-client'; import { useRouter } from '@rocket.chat/ui-contexts'; @@ -11,16 +11,16 @@ export const useAccountItems = (): GenericMenuItemProps[] => { const { unseenFeatures, featurePreviewEnabled } = usePreferenceFeaturePreviewList(); - const handleMyAccount = useMutableCallback(() => { + const handleMyAccount = useEffectEvent(() => { router.navigate('/account'); }); - const handlePreferences = useMutableCallback(() => { + const handlePreferences = useEffectEvent(() => { router.navigate('/account/preferences'); }); - const handleFeaturePreview = useMutableCallback(() => { + const handleFeaturePreview = useEffectEvent(() => { router.navigate('/account/feature-preview'); }); - const handleAccessibility = useMutableCallback(() => { + const handleAccessibility = useEffectEvent(() => { router.navigate('/account/accessibility-and-appearance'); }); diff --git a/apps/meteor/client/sidebar/header/hooks/useCreateRoomModal.tsx b/apps/meteor/client/sidebar/header/hooks/useCreateRoomModal.tsx index a1581c4048508..4f64f1b8abcdb 100644 --- a/apps/meteor/client/sidebar/header/hooks/useCreateRoomModal.tsx +++ b/apps/meteor/client/sidebar/header/hooks/useCreateRoomModal.tsx @@ -1,11 +1,11 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal } from '@rocket.chat/ui-contexts'; import type { ElementType } from 'react'; export const useCreateRoomModal = (Component: ElementType<{ onClose: () => void }>): (() => void) => { const setModal = useSetModal(); - return useMutableCallback(() => { + return useEffectEvent(() => { const handleClose = (): void => { setModal(null); }; diff --git a/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx b/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx index c59f2ea85ebb0..e31bad62e01f4 100644 --- a/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx +++ b/apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx @@ -1,5 +1,5 @@ import type { IUser } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; import { useLogout } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; @@ -17,7 +17,7 @@ export const useUserMenu = (user: IUser) => { const voipItemsSection = useVoipItemsSection(); const logout = useLogout(); - const handleLogout = useMutableCallback(() => { + const handleLogout = useEffectEvent(() => { logout(); }); diff --git a/apps/meteor/client/sidebar/search/SearchList.tsx b/apps/meteor/client/sidebar/search/SearchList.tsx index 0d0f4c388d8ea..25a865c28f130 100644 --- a/apps/meteor/client/sidebar/search/SearchList.tsx +++ b/apps/meteor/client/sidebar/search/SearchList.tsx @@ -1,7 +1,7 @@ import type { IRoom, ISubscription } from '@rocket.chat/core-typings'; import { css } from '@rocket.chat/css-in-js'; import { Sidebar, TextInput, Box, Icon } from '@rocket.chat/fuselage'; -import { useMutableCallback, useDebouncedValue, useAutoFocus, useUniqueId, useMergedRefs } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useDebouncedValue, useAutoFocus, useUniqueId, useMergedRefs } from '@rocket.chat/fuselage-hooks'; import { escapeRegExp } from '@rocket.chat/string-helpers'; import { useUserPreference, useUserSubscriptions, useSetting, useTranslation, useMethod } from '@rocket.chat/ui-contexts'; import type { UseQueryResult } from '@tanstack/react-query'; @@ -166,7 +166,7 @@ const useSearchItems = (filterText: string): UseQueryResult<(ISubscription & IRo const useInput = (initial: string): { value: string; onChange: FormEventHandler; setValue: Dispatch> } => { const [value, setValue] = useState(initial); - const onChange = useMutableCallback((e) => { + const onChange = useEffectEvent((e) => { setValue(e.currentTarget.value); }); return { value, onChange, setValue }; @@ -231,7 +231,7 @@ const SearchList = forwardRef(function SearchList({ onClose }: SearchListProps, [avatarTemplate, extended, items, useRealName, sideBarItemTemplate, sidebarViewMode, t], ); - const changeSelection = useMutableCallback((dir) => { + const changeSelection = useEffectEvent((dir) => { let nextSelectedElement = null; if (dir === 'up') { @@ -253,7 +253,7 @@ const SearchList = forwardRef(function SearchList({ onClose }: SearchListProps, return selectedElement.current; }); - const resetCursor = useMutableCallback(() => { + const resetCursor = useEffectEvent(() => { setTimeout(() => { itemIndexRef.current = 0; listRef.current?.scrollToIndex({ index: itemIndexRef.current }); diff --git a/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx b/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx index 4616b4597af9f..c5482119e7e0c 100644 --- a/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx +++ b/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx @@ -1,5 +1,5 @@ import { Sidebar, SidebarDivider, SidebarSection } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client'; import { useLayout, useRoute, usePermission } from '@rocket.chat/ui-contexts'; import { memo } from 'react'; @@ -23,7 +23,7 @@ const OmnichannelSection = () => { const queueListRoute = useRoute('livechat-queue'); const isWorkspaceOverMacLimit = useIsOverMacLimit(); - const handleRoute = useMutableCallback((route) => { + const handleRoute = useEffectEvent((route) => { sidebar.toggle(); switch (route) { diff --git a/apps/meteor/client/sidebar/sections/actions/OmnichannelLivechatToggle.tsx b/apps/meteor/client/sidebar/sections/actions/OmnichannelLivechatToggle.tsx index 639aea178ae31..961996296d4e6 100644 --- a/apps/meteor/client/sidebar/sections/actions/OmnichannelLivechatToggle.tsx +++ b/apps/meteor/client/sidebar/sections/actions/OmnichannelLivechatToggle.tsx @@ -1,5 +1,5 @@ import { Sidebar } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type { ReactElement, ComponentProps } from 'react'; import { useTranslation } from 'react-i18next'; @@ -12,7 +12,7 @@ export const OmnichannelLivechatToggle = (props: Omit { + const handleAvailableStatusChange = useEffectEvent(async () => { try { await changeAgentStatus({}); } catch (error: unknown) { diff --git a/apps/meteor/client/uikit/hooks/useMessageBlockContextValue.ts b/apps/meteor/client/uikit/hooks/useMessageBlockContextValue.ts index caf869ba39d75..b99b7eb0f1b42 100644 --- a/apps/meteor/client/uikit/hooks/useMessageBlockContextValue.ts +++ b/apps/meteor/client/uikit/hooks/useMessageBlockContextValue.ts @@ -1,5 +1,5 @@ import type { IRoom, IMessage } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { UiKitContext } from '@rocket.chat/fuselage-ui-kit'; import type { ContextType } from 'react'; @@ -24,7 +24,7 @@ export const useMessageBlockContextValue = (rid: IRoom['_id'], mid: IMessage['_i const videoConfManager = useVideoConfManager(); - const handleOpenVideoConf = useMutableCallback(async (rid: IRoom['_id']) => { + const handleOpenVideoConf = useEffectEvent(async (rid: IRoom['_id']) => { if (isCalling || isRinging) { return; } diff --git a/apps/meteor/client/views/admin/customUserStatus/hooks/useStatusDisabledModal.tsx b/apps/meteor/client/views/admin/customUserStatus/hooks/useStatusDisabledModal.tsx index 53b8338c90ff2..7cb32da3cd29a 100644 --- a/apps/meteor/client/views/admin/customUserStatus/hooks/useStatusDisabledModal.tsx +++ b/apps/meteor/client/views/admin/customUserStatus/hooks/useStatusDisabledModal.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRole, useRoute, useSetModal } from '@rocket.chat/ui-contexts'; import CustomUserStatusDisabledModal from '../CustomUserStatusDisabledModal'; @@ -6,8 +6,8 @@ import CustomUserStatusDisabledModal from '../CustomUserStatusDisabledModal'; export const useStatusDisabledModal = () => { const userStatusRoute = useRoute('user-status'); const setModal = useSetModal(); - const closeModal = useMutableCallback(() => setModal()); - const handleGoToSettings = useMutableCallback(() => { + const closeModal = useEffectEvent(() => setModal()); + const handleGoToSettings = useEffectEvent(() => { userStatusRoute.push({ context: 'presence-service' }); closeModal(); }); diff --git a/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx b/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx index e887016f67564..d591b8dd24214 100644 --- a/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx +++ b/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import { useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useMediaQuery, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; import { GenericMenu } from '@rocket.chat/ui-client'; import { useRoute } from '@rocket.chat/ui-contexts'; @@ -42,7 +42,7 @@ const DeviceManagementAdminRow = ({ const handleDeviceLogout = useDeviceLogout(_id, '/v1/sessions/logout'); - const handleClick = useMutableCallback((): void => { + const handleClick = useEffectEvent((): void => { deviceManagementRouter.push({ context: 'info', id: _id, diff --git a/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx b/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx index 6e936fb89688a..fa4f066e9242b 100644 --- a/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx +++ b/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx @@ -18,7 +18,7 @@ import { FieldError, FieldHint, } from '@rocket.chat/fuselage'; -import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useRoute, useEndpoint } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { useCallback } from 'react'; @@ -71,7 +71,7 @@ const EmailInboxForm = ({ inboxData }: { inboxData?: IEmailInboxPayload }): Reac mode: 'all', }); - const handleDelete = useMutableCallback(() => { + const handleDelete = useEffectEvent(() => { const deleteInbox = async (): Promise => { try { await deleteInboxAction(); @@ -91,7 +91,7 @@ const EmailInboxForm = ({ inboxData }: { inboxData?: IEmailInboxPayload }): Reac ); }); - const handleSave = useMutableCallback( + const handleSave = useEffectEvent( async ({ active, name, @@ -150,7 +150,7 @@ const EmailInboxForm = ({ inboxData }: { inboxData?: IEmailInboxPayload }): Reac }, ); - const checkEmailExists = useMutableCallback(async (email) => { + const checkEmailExists = useEffectEvent(async (email) => { if (!email) { return; } diff --git a/apps/meteor/client/views/admin/import/ImportProgressPage.tsx b/apps/meteor/client/views/admin/import/ImportProgressPage.tsx index f0cd9565c7c9c..06a2042ab5256 100644 --- a/apps/meteor/client/views/admin/import/ImportProgressPage.tsx +++ b/apps/meteor/client/views/admin/import/ImportProgressPage.tsx @@ -1,6 +1,6 @@ import type { ProgressStep } from '@rocket.chat/core-typings'; import { Box, Margins, ProgressBar, Throbber } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useEndpoint, useStream, useRouter } from '@rocket.chat/ui-contexts'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useEffect } from 'react'; @@ -43,7 +43,7 @@ const ImportProgressPage = function ImportProgressPage() { refetchInterval: 1000, }); - const handleProgressUpdated = useMutableCallback( + const handleProgressUpdated = useEffectEvent( ({ key, step, completed, total }: { key: string; step: ProgressStep; completed: number; total: number }) => { if (!currentOperation.isSuccess) { return; diff --git a/apps/meteor/client/views/admin/import/useErrorHandler.ts b/apps/meteor/client/views/admin/import/useErrorHandler.ts index 124b7a6e195a4..ce0f9e81f8736 100644 --- a/apps/meteor/client/views/admin/import/useErrorHandler.ts +++ b/apps/meteor/client/views/admin/import/useErrorHandler.ts @@ -1,10 +1,10 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; export const useErrorHandler = () => { const dispatchToastMessage = useToastMessageDispatch(); - return useMutableCallback((error: unknown, defaultMessage?: unknown) => { + return useEffectEvent((error: unknown, defaultMessage?: unknown) => { console.error(error); dispatchToastMessage({ type: 'error', message: error ?? defaultMessage }); diff --git a/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryItem.tsx b/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryItem.tsx index 6d2c1171f86f8..f016ce36fe7c0 100644 --- a/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryItem.tsx +++ b/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryItem.tsx @@ -1,6 +1,6 @@ import type { IIntegrationHistory, Serialized } from '@rocket.chat/core-typings'; import { Button, Icon, Box, AccordionItem, Field, FieldGroup, FieldLabel, FieldRow } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useMethod } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; @@ -34,7 +34,7 @@ const HistoryItem = ({ data }: { data: Serialized }) => { const createdAt = typeof _createdAt === 'string' ? _createdAt : (_createdAt as Date).toISOString(); const updatedAt = typeof _updatedAt === 'string' ? _updatedAt : (_updatedAt as Date).toISOString(); - const handleClickReplay = useMutableCallback((e) => { + const handleClickReplay = useEffectEvent((e) => { e.stopPropagation(); replayOutgoingIntegration({ integrationId, historyId: _id }); }); diff --git a/apps/meteor/client/views/admin/moderation/ModerationConsoleTable.tsx b/apps/meteor/client/views/admin/moderation/ModerationConsoleTable.tsx index 1a3fe13cec39f..bf57345490aa9 100644 --- a/apps/meteor/client/views/admin/moderation/ModerationConsoleTable.tsx +++ b/apps/meteor/client/views/admin/moderation/ModerationConsoleTable.tsx @@ -1,5 +1,5 @@ import { Pagination } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useMediaQuery, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts'; import { keepPreviousData, useQuery } from '@tanstack/react-query'; import { useMemo, useState } from 'react'; @@ -62,7 +62,7 @@ const ModerationConsoleTable = () => { placeholderData: keepPreviousData, }); - const handleClick = useMutableCallback((id): void => { + const handleClick = useEffectEvent((id): void => { router.navigate({ pattern: '/admin/moderation/:tab?/:context?/:id?', params: { diff --git a/apps/meteor/client/views/admin/moderation/UserMessages.tsx b/apps/meteor/client/views/admin/moderation/UserMessages.tsx index 63943d86d5fca..526f4e961dab7 100644 --- a/apps/meteor/client/views/admin/moderation/UserMessages.tsx +++ b/apps/meteor/client/views/admin/moderation/UserMessages.tsx @@ -1,5 +1,5 @@ import { Box, Callout, Message, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useEndpoint } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; import { Fragment } from 'react'; @@ -31,7 +31,7 @@ const UserMessages = ({ userId, onRedirect }: { userId: string; onRedirect: (mid }, }); - const handleChange = useMutableCallback(() => { + const handleChange = useEffectEvent(() => { reloadUserMessages(); }); diff --git a/apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUsersTable.tsx b/apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUsersTable.tsx index 9aefe4ab5edc0..e980be1fce759 100644 --- a/apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUsersTable.tsx +++ b/apps/meteor/client/views/admin/moderation/UserReports/ModConsoleUsersTable.tsx @@ -1,5 +1,5 @@ import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useMediaQuery, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts'; import { keepPreviousData, useQuery } from '@tanstack/react-query'; import { useMemo, useState } from 'react'; @@ -58,7 +58,7 @@ const ModConsoleUsersTable = () => { placeholderData: keepPreviousData, }); - const handleClick = useMutableCallback((id): void => { + const handleClick = useEffectEvent((id): void => { router.navigate({ pattern: '/admin/moderation/:tab?/:context?/:id?', params: { tab: 'users', context: 'info', id }, diff --git a/apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx b/apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx index 01e9247a967d0..80ff678b1780f 100644 --- a/apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx +++ b/apps/meteor/client/views/admin/moderation/helpers/DateRangePicker.tsx @@ -1,5 +1,5 @@ import { Select, Box, type SelectOption } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import moment, { type Moment } from 'moment'; import { useMemo, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; @@ -25,7 +25,7 @@ const getWeekRange = (daysToSubtractFromStart: number, daysToSubtractFromEnd: nu const DateRangePicker = ({ onChange }: DateRangePickerProps) => { const { t } = useTranslation(); - const handleRange = useMutableCallback((range) => { + const handleRange = useEffectEvent((range) => { onChange(range); }); @@ -47,7 +47,7 @@ const DateRangePicker = ({ onChange }: DateRangePickerProps) => { }); }, [handleRange]); - const handleOptionClick = useMutableCallback((action) => { + const handleOptionClick = useEffectEvent((action) => { switch (action) { case 'today': handleRange(getWeekRange(0, 0)); diff --git a/apps/meteor/client/views/admin/permissions/EditRolePage.tsx b/apps/meteor/client/views/admin/permissions/EditRolePage.tsx index 39f5b1d86c1fa..9778f4f4093de 100644 --- a/apps/meteor/client/views/admin/permissions/EditRolePage.tsx +++ b/apps/meteor/client/views/admin/permissions/EditRolePage.tsx @@ -1,6 +1,6 @@ import type { IRole } from '@rocket.chat/core-typings'; import { Box, ButtonGroup, Button, Margins } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useRoute, useEndpoint } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; @@ -31,7 +31,7 @@ const EditRolePage = ({ role, isEnterprise }: { role?: IRole; isEnterprise: bool }, }); - const handleManageUsers = useMutableCallback(() => { + const handleManageUsers = useEffectEvent(() => { if (role?._id) { usersInRoleRouter.push({ context: 'users-in-role', @@ -40,7 +40,7 @@ const EditRolePage = ({ role, isEnterprise }: { role?: IRole; isEnterprise: bool } }); - const handleSave = useMutableCallback(async (data) => { + const handleSave = useEffectEvent(async (data) => { try { if (data.roleId) { await updateRole(data); @@ -56,7 +56,7 @@ const EditRolePage = ({ role, isEnterprise }: { role?: IRole; isEnterprise: bool } }); - const handleDelete = useMutableCallback(async () => { + const handleDelete = useEffectEvent(async () => { if (!role?._id) { return; } diff --git a/apps/meteor/client/views/admin/permissions/PermissionsContextBar.tsx b/apps/meteor/client/views/admin/permissions/PermissionsContextBar.tsx index 937bcadf70690..aa09ffc276617 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsContextBar.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsContextBar.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRouteParameter, useRoute, useTranslation, useSetModal } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { useEffect } from 'react'; @@ -22,7 +22,7 @@ const PermissionsContextBar = (): ReactElement | null => { const setModal = useSetModal(); const hasCustomRolesModule = useHasLicenseModule('custom-roles') === true; - const handleCloseContextualbar = useMutableCallback(() => { + const handleCloseContextualbar = useEffectEvent(() => { router.push({}); }); diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx index 9e42573b4c388..c372ebb6b4b70 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx @@ -1,5 +1,5 @@ import type { IRole, IPermission } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import type { TFunction } from 'i18next'; import type { ReactElement } from 'react'; @@ -39,8 +39,8 @@ const PermissionRow = ({ permission, roleList, onGrant, onRemove }: PermissionRo const [hovered, setHovered] = useState(false); const changeRole = useChangeRole({ onGrant, onRemove, permissionId: _id }); - const onMouseEnter = useMutableCallback(() => setHovered(true)); - const onMouseLeave = useMutableCallback(() => setHovered(false)); + const onMouseEnter = useEffectEvent(() => setHovered(true)); + const onMouseLeave = useEffectEvent(() => setHovered(false)); return ( diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx index 8c6348d2e4c83..605f2fc155721 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx @@ -1,6 +1,6 @@ import { css } from '@rocket.chat/css-in-js'; import { Margins, Tabs, Button, Pagination, Palette } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRoute, usePermission, useMethod, useTranslation, useSetModal } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { useState } from 'react'; @@ -32,21 +32,21 @@ const PermissionsTable = ({ isEnterprise }: { isEnterprise: boolean }): ReactEle const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination(); const { permissions, total, roleList } = usePermissionsAndRoles(type, filter, itemsPerPage, current); - const handlePermissionsTab = useMutableCallback(() => { + const handlePermissionsTab = useEffectEvent(() => { if (type === 'permissions') { return; } setType('permissions'); }); - const handleSettingsTab = useMutableCallback(() => { + const handleSettingsTab = useEffectEvent(() => { if (type === 'settings') { return; } setType('settings'); }); - const handleAdd = useMutableCallback(() => { + const handleAdd = useEffectEvent(() => { if (!isEnterprise) { setModal( setModal(null)} />); return; diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx index f85e63dbdd8d1..8bc1fea42a4d0 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTableFilter.tsx @@ -1,5 +1,5 @@ import { TextInput } from '@rocket.chat/fuselage'; -import { useMutableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useDebouncedValue } from '@rocket.chat/fuselage-hooks'; import type { ReactElement } from 'react'; import { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; @@ -13,7 +13,7 @@ const PermissionsTableFilter = ({ onChange }: { onChange: (debouncedFilter: stri onChange(debouncedFilter); }, [debouncedFilter, onChange]); - const handleFilter = useMutableCallback(({ currentTarget: { value } }) => { + const handleFilter = useEffectEvent(({ currentTarget: { value } }) => { setFilter(value); }); diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx index 0fa1063a4878c..a1d76062ceb57 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx @@ -1,6 +1,6 @@ import type { IRole } from '@rocket.chat/core-typings'; import { Margins, Box, CheckBox, Throbber } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { ReactElement } from 'react'; import { useState, memo } from 'react'; @@ -23,7 +23,7 @@ const RoleCell = ({ _id, name, description, onChange, lineHovered, permissionId, const isRestrictedForRole = AuthorizationUtils.isPermissionRestrictedForRole(permissionId, _id); - const handleChange = useMutableCallback(async () => { + const handleChange = useEffectEvent(async () => { setLoading(true); const result = await onChange(_id, granted); setGranted(result); diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleHeader.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleHeader.tsx index c0b1b089b7064..06c5d34f12c5b 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleHeader.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleHeader.tsx @@ -1,6 +1,6 @@ import type { IRole } from '@rocket.chat/core-typings'; import { Button } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRoute } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { memo } from 'react'; @@ -16,7 +16,7 @@ type RoleHeaderProps = { const RoleHeader = ({ _id, name, description }: RoleHeaderProps): ReactElement => { const router = useRoute('admin-permissions'); - const handleEditRole = useMutableCallback(() => { + const handleEditRole = useEffectEvent(() => { router.push({ context: 'edit', _id, diff --git a/apps/meteor/client/views/admin/permissions/hooks/useChangeRole.ts b/apps/meteor/client/views/admin/permissions/hooks/useChangeRole.ts index 7a5378f83b723..c94d34f0fa85b 100644 --- a/apps/meteor/client/views/admin/permissions/hooks/useChangeRole.ts +++ b/apps/meteor/client/views/admin/permissions/hooks/useChangeRole.ts @@ -1,5 +1,5 @@ import type { IRole, IPermission } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; export const useChangeRole = ({ @@ -13,7 +13,7 @@ export const useChangeRole = ({ }): ((roleId: IRole['_id'], granted: boolean) => Promise) => { const dispatchToastMessage = useToastMessageDispatch(); - return useMutableCallback(async (roleId, granted) => { + return useEffectEvent(async (roleId, granted) => { try { if (granted) { await onRemove(permissionId, roleId); diff --git a/apps/meteor/client/views/admin/permissions/hooks/usePermissionsAndRoles.ts b/apps/meteor/client/views/admin/permissions/hooks/usePermissionsAndRoles.ts index 2b9ea2b8b4785..f56390b888166 100644 --- a/apps/meteor/client/views/admin/permissions/hooks/usePermissionsAndRoles.ts +++ b/apps/meteor/client/views/admin/permissions/hooks/usePermissionsAndRoles.ts @@ -1,5 +1,5 @@ import type { IRole, IPermission } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { escapeRegExp } from '@rocket.chat/string-helpers'; import type { Mongo } from 'meteor/mongo'; import { useCallback } from 'react'; @@ -38,7 +38,7 @@ export const usePermissionsAndRoles = ( const permissions = useReactiveValue(getPermissions); const permissionsTotal = useReactiveValue(getTotalPermissions); - const getRoles = useMutableCallback(() => Roles.find().fetch()); + const getRoles = useEffectEvent(() => Roles.find().fetch()); const roles = useReactiveValue(getRoles); return { permissions: permissions.fetch(), total: permissionsTotal, roleList: roles, reload: getRoles }; diff --git a/apps/meteor/client/views/admin/settings/EditableSettingsProvider.tsx b/apps/meteor/client/views/admin/settings/EditableSettingsProvider.tsx index 475d60ddeefb2..677332261697d 100644 --- a/apps/meteor/client/views/admin/settings/EditableSettingsProvider.tsx +++ b/apps/meteor/client/views/admin/settings/EditableSettingsProvider.tsx @@ -1,5 +1,5 @@ import type { ISetting } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { SettingsContextQuery } from '@rocket.chat/ui-contexts'; import { useSettings } from '@rocket.chat/ui-contexts'; import { Mongo } from 'meteor/mongo'; @@ -25,7 +25,7 @@ const EditableSettingsProvider = ({ children, query = defaultQuery, omit = defau const settingsCollectionRef = useRef>(null) as MutableRefObject>; const persistedSettings = useSettings(query); - const getSettingsCollection = useMutableCallback(() => { + const getSettingsCollection = useEffectEvent(() => { if (!settingsCollectionRef.current) { settingsCollectionRef.current = new Mongo.Collection(null); } @@ -181,7 +181,7 @@ const EditableSettingsProvider = ({ children, query = defaultQuery, omit = defau [getSettingsCollection], ); - const dispatch = useMutableCallback((changes: Partial[]): void => { + const dispatch = useEffectEvent((changes: Partial[]): void => { for (const { _id, ...data } of changes) { if (!_id) { continue; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirror.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirror.tsx index fc62dc98f5294..1f249c7373c64 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirror.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirror.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { Editor, EditorFromTextArea } from 'codemirror'; import type { ReactElement } from 'react'; import { useEffect, useRef, useState } from 'react'; @@ -47,7 +47,7 @@ function CodeMirror({ const textAreaRef = useRef(null); const editorRef = useRef(null); - const handleChange = useMutableCallback(onChange); + const handleChange = useEffectEvent(onChange); useEffect(() => { if (editorRef.current) { diff --git a/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx index 6c2d339c29e60..1f2eb77b4f64e 100644 --- a/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx +++ b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx @@ -1,6 +1,6 @@ import { isSetting, isSettingColor } from '@rocket.chat/core-typings'; import { AccordionItem, Box, Button, FieldGroup } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; import { useMemo } from 'react'; @@ -42,7 +42,7 @@ function SettingsSection({ groupId, hasReset = true, sectionName, currentTab, so const dispatch = useEditableSettingsDispatch(); - const reset = useMutableCallback(() => { + const reset = useEffectEvent(() => { dispatch( editableSettings .filter(({ disabled }) => !disabled) diff --git a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx index 2ecebb0ea5d98..a22e5f258a4da 100644 --- a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx +++ b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx @@ -1,6 +1,6 @@ import type { ISetting } from '@rocket.chat/core-typings'; import { Button, Box, TextInput, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useSetting, useEndpoint } from '@rocket.chat/ui-contexts'; import type { FormEvent } from 'react'; import { memo, useMemo } from 'react'; @@ -23,7 +23,7 @@ function LDAPGroupPage({ _id, i18nLabel, onClickBack, ...group }: LDAPGroupPageP const testSearch = useEndpoint('POST', '/v1/ldap.testSearch'); const ldapEnabled = useSetting('LDAP_Enable'); const setModal = useSetModal(); - const closeModal = useMutableCallback(() => setModal()); + const closeModal = useEffectEvent(() => setModal()); const handleLinkClick = useExternalLink(); diff --git a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentButton.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentButton.tsx index 6aaf0d4c9a9fa..4aaaa7c961868 100644 --- a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentButton.tsx +++ b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentButton.tsx @@ -1,5 +1,5 @@ import { IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; @@ -12,7 +12,7 @@ const AssignAgentButton = ({ extension, reload }: AssignAgentButtonProps) => { const { t } = useTranslation(); const setModal = useSetModal(); - const handleAssociation = useMutableCallback((e) => { + const handleAssociation = useEffectEvent((e) => { e.stopPropagation(); setModal( setModal()} reload={reload} />); }); diff --git a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentModal.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentModal.tsx index 4195dcfecfca9..1757aeb77de5a 100644 --- a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentModal.tsx +++ b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentModal.tsx @@ -1,5 +1,5 @@ import { Button, Modal, Select, Field, FieldGroup, FieldLabel, FieldRow, Box } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts'; import { useState, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -23,7 +23,7 @@ const AssignAgentModal = ({ existingExtension, closeModal, reload }: AssignAgent const assignAgent = useEndpoint('POST', '/v1/omnichannel/agent/extension'); - const handleAssignment = useMutableCallback(async (e) => { + const handleAssignment = useEffectEvent(async (e) => { e.preventDefault(); try { await assignAgent({ username: agent, extension }); @@ -33,7 +33,7 @@ const AssignAgentModal = ({ existingExtension, closeModal, reload }: AssignAgent reload(); closeModal(); }); - const handleAgentChange = useMutableCallback((e) => setAgent(e)); + const handleAgentChange = useEffectEvent((e) => setAgent(e)); const { value: availableExtensions, phase: state } = useEndpointData('/v1/omnichannel/extension', { params: query }); diff --git a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/RemoveAgentButton.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/RemoveAgentButton.tsx index 8679c422cd5a7..ac39806afcb2f 100644 --- a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/RemoveAgentButton.tsx +++ b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/RemoveAgentButton.tsx @@ -1,5 +1,5 @@ import { IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; @@ -14,7 +14,7 @@ const RemoveAgentButton = ({ username, reload }: RemoveAgentButtonProps) => { const dispatchToastMessage = useToastMessageDispatch(); const { t } = useTranslation(); - const handleRemoveClick = useMutableCallback(async () => { + const handleRemoveClick = useEffectEvent(async () => { try { await removeAgent(); } catch (error: unknown) { @@ -23,7 +23,7 @@ const RemoveAgentButton = ({ username, reload }: RemoveAgentButtonProps) => { reload(); }); - const handleDelete = useMutableCallback((e) => { + const handleDelete = useEffectEvent((e) => { e.stopPropagation(); const onDeleteAgent = async (): Promise => { try { diff --git a/apps/meteor/client/views/admin/users/AdminUserForm.tsx b/apps/meteor/client/views/admin/users/AdminUserForm.tsx index 1e7667c408162..1ba9cb3ced5aa 100644 --- a/apps/meteor/client/views/admin/users/AdminUserForm.tsx +++ b/apps/meteor/client/views/admin/users/AdminUserForm.tsx @@ -18,7 +18,7 @@ import { Skeleton, } from '@rocket.chat/fuselage'; import type { SelectOption } from '@rocket.chat/fuselage'; -import { useUniqueId, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useUniqueId, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { UserCreateParamsPOST } from '@rocket.chat/rest-typings'; import { CustomFieldsForm } from '@rocket.chat/ui-client'; import { @@ -165,7 +165,7 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD }, }); - const handleSaveUser = useMutableCallback(async (userFormPayload: UserFormProps) => { + const handleSaveUser = useEffectEvent(async (userFormPayload: UserFormProps) => { const { avatar, passwordConfirmation, ...userFormData } = userFormPayload; if (!isNewUserPage && userData?._id) { diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx index 3a95fe93a4091..e3273e8dabe5a 100644 --- a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx +++ b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx @@ -1,6 +1,6 @@ import type { IUser } from '@rocket.chat/core-typings'; import { Callout } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetting, useRolesDescription, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; import type { ReactElement } from 'react'; @@ -42,7 +42,7 @@ const AdminUserInfoWithData = ({ uid, onReload, tab }: AdminUserInfoWithDataProp }, }); - const onChange = useMutableCallback(() => { + const onChange = useEffectEvent(() => { onReload(); refetch(); }); diff --git a/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx b/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx index 6f8559283e16a..34cc32c67656e 100644 --- a/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx +++ b/apps/meteor/client/views/admin/users/hooks/useDeleteUserAction.tsx @@ -1,5 +1,5 @@ import type { IUser } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import { useSetModal, @@ -56,7 +56,7 @@ export const useDeleteUserAction = (userId: IUser['_id'], onChange: () => void, onChange, ); - const confirmDeleteUser = useMutableCallback(() => { + const confirmDeleteUser = useEffectEvent(() => { setModal( setModal()} confirmText={t('Delete')}> {t(`Delete_User_Warning_${erasureType}` as TranslationKey)} diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx index fd4c6f3025631..429c0e8edba67 100644 --- a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx +++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx @@ -1,6 +1,6 @@ import type { IWorkspaceInfo, IStats } from '@rocket.chat/core-typings'; import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { IInstance } from '@rocket.chat/rest-typings'; import { useSetModal } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; @@ -25,7 +25,7 @@ const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, in const { commit = {}, marketplaceApiVersion: appsEngineVersion } = info || {}; - const handleInstancesModal = useMutableCallback(() => { + const handleInstancesModal = useEffectEvent(() => { setModal( setModal()} />); }); diff --git a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx index 1836ae9643d7b..61798ef3405c6 100644 --- a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx +++ b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx @@ -1,6 +1,6 @@ import type { IStats } from '@rocket.chat/core-typings'; import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRouter } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { memo } from 'react'; @@ -22,7 +22,7 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement = const router = useRouter(); - const handleEngagement = useMutableCallback(() => { + const handleEngagement = useEffectEvent(() => { router.navigate('/admin/engagement'); }); diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionButton.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionButton.tsx index d26def23d4051..9c4478fa69c20 100644 --- a/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionButton.tsx +++ b/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionButton.tsx @@ -1,5 +1,5 @@ import { Button } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { LocationPathname } from '@rocket.chat/ui-contexts'; import { useRouter } from '@rocket.chat/ui-contexts'; import type { ReactElement, ReactNode } from 'react'; @@ -18,7 +18,7 @@ type VersionCardActionButtonProps = const VersionCardActionButton = (item: VersionCardActionButtonProps): ReactElement => { const router = useRouter(); - const handleActionButton = useMutableCallback(() => { + const handleActionButton = useEffectEvent(() => { if ('action' in item) { return item.action(); } diff --git a/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx b/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx index 58e8d8eea34a2..fbb5f18bfb5ea 100644 --- a/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx +++ b/apps/meteor/client/views/audit/components/forms/DateRangePicker.tsx @@ -1,5 +1,5 @@ import { Box, InputBox, Menu, Margins, Option } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import moment from 'moment'; import type { ReactElement, ComponentProps, SetStateAction } from 'react'; import { useMemo } from 'react'; @@ -117,16 +117,16 @@ type DateRangePickerProps = Omit, 'value' | 'onChange }; const DateRangePicker = ({ value, onChange, ...props }: DateRangePickerProps): ReactElement => { - const dispatch = useMutableCallback((action: DateRangeAction): void => { + const dispatch = useEffectEvent((action: DateRangeAction): void => { const newRange = dateRangeReducer(value ?? { start: undefined, end: undefined }, action); onChange?.(newRange); }); - const handleChangeStart = useMutableCallback(({ currentTarget }) => { + const handleChangeStart = useEffectEvent(({ currentTarget }) => { dispatch({ newStart: currentTarget.value }); }); - const handleChangeEnd = useMutableCallback(({ currentTarget }) => { + const handleChangeEnd = useEffectEvent(({ currentTarget }) => { dispatch({ newEnd: currentTarget.value }); }); diff --git a/apps/meteor/client/views/audit/hooks/useAuditTab.ts b/apps/meteor/client/views/audit/hooks/useAuditTab.ts index 1045e20ea5929..42d24c5af3c00 100644 --- a/apps/meteor/client/views/audit/hooks/useAuditTab.ts +++ b/apps/meteor/client/views/audit/hooks/useAuditTab.ts @@ -1,5 +1,5 @@ import type { IAuditLog } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRoute, useRouteParameter } from '@rocket.chat/ui-contexts'; import type { SetStateAction } from 'react'; import { useMemo } from 'react'; @@ -19,7 +19,7 @@ export const useAuditTab = () => { const auditRoute = useRoute('audit-home'); - const setType = useMutableCallback((newType: SetStateAction) => { + const setType = useEffectEvent((newType: SetStateAction) => { auditRoute.replace({ tab: typeToTabMap[typeof newType === 'function' ? newType(type) : newType] ?? 'rooms' }); }); diff --git a/apps/meteor/client/views/banners/UiKitBanner.tsx b/apps/meteor/client/views/banners/UiKitBanner.tsx index aaf21f9271835..5fe6e951373f3 100644 --- a/apps/meteor/client/views/banners/UiKitBanner.tsx +++ b/apps/meteor/client/views/banners/UiKitBanner.tsx @@ -1,5 +1,5 @@ import { Banner, Icon } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { UiKitContext, bannerParser, UiKitBanner as UiKitBannerSurfaceRender, UiKitComponent } from '@rocket.chat/fuselage-ui-kit'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type * as UiKit from '@rocket.chat/ui-kit'; @@ -33,7 +33,7 @@ const UiKitBanner = ({ initialView }: UiKitBannerProps) => { }, [view.icon]); const dispatchToastMessage = useToastMessageDispatch(); - const handleClose = useMutableCallback(() => { + const handleClose = useEffectEvent(() => { void actionManager .emitInteraction(view.appId, { type: 'viewClosed', diff --git a/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx b/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx index 4f0cc83854077..0f4f1e20b4d2d 100644 --- a/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx +++ b/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx @@ -1,6 +1,6 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Box, Icon, Throbber } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { MessageComposerAction } from '@rocket.chat/ui-composer'; import type { ReactElement } from 'react'; import { useEffect, useState } from 'react'; @@ -26,7 +26,7 @@ const AudioMessageRecorder = ({ rid, chatContext, isMicrophoneDenied }: AudioMes const [recordingInterval, setRecordingInterval] = useState | null>(null); const [recordingRoomId, setRecordingRoomId] = useState(null); - const stopRecording = useMutableCallback(async () => { + const stopRecording = useEffectEvent(async () => { if (recordingInterval) { clearInterval(recordingInterval); } @@ -44,13 +44,13 @@ const AudioMessageRecorder = ({ rid, chatContext, isMicrophoneDenied }: AudioMes return blob; }); - const handleUnmount = useMutableCallback(async () => { + const handleUnmount = useEffectEvent(async () => { if (state === 'recording') { await stopRecording(); } }); - const handleRecord = useMutableCallback(async () => { + const handleRecord = useEffectEvent(async () => { if (recordingRoomId && recordingRoomId !== rid) { return; } @@ -75,13 +75,13 @@ const AudioMessageRecorder = ({ rid, chatContext, isMicrophoneDenied }: AudioMes } }); - const handleCancelButtonClick = useMutableCallback(async () => { + const handleCancelButtonClick = useEffectEvent(async () => { await stopRecording(); }); const chat = useChat() ?? chatContext; - const handleDoneButtonClick = useMutableCallback(async () => { + const handleDoneButtonClick = useEffectEvent(async () => { setState('loading'); const blob = await stopRecording(); diff --git a/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx b/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx index 31972992d72b7..0c50a6013ae60 100644 --- a/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx +++ b/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx @@ -1,7 +1,7 @@ import type { IMessage, IRoom } from '@rocket.chat/core-typings'; import { css } from '@rocket.chat/css-in-js'; import { Box, ButtonGroup, Button, Icon, PositionAnimated } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useTranslation, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type { AllHTMLAttributes, RefObject } from 'react'; import { useRef, useEffect, useState } from 'react'; @@ -95,7 +95,7 @@ const VideoMessageRecorder = ({ rid, tmid, chatContext, reference }: VideoMessag stopVideoRecording(rid, tmid); }; - const handleCancel = useMutableCallback(() => { + const handleCancel = useEffectEvent(() => { VideoRecorder.stop(); chat?.composer?.setRecordingVideo(false); setTime(undefined); diff --git a/apps/meteor/client/views/e2e/EnterE2EPasswordModal.tsx b/apps/meteor/client/views/e2e/EnterE2EPasswordModal.tsx index 39e181fc8fa8a..8227cd6da79ef 100644 --- a/apps/meteor/client/views/e2e/EnterE2EPasswordModal.tsx +++ b/apps/meteor/client/views/e2e/EnterE2EPasswordModal.tsx @@ -1,5 +1,5 @@ import { Box, PasswordInput, Field, FieldGroup, FieldRow, FieldError } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { ChangeEvent, ReactElement } from 'react'; import { useState, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -27,7 +27,7 @@ const EnterE2EPasswordModal = ({ [setPassword], ); - const handleConfirm = useMutableCallback((e): void => { + const handleConfirm = useEffectEvent((e): void => { e.preventDefault(); if (password === '') { setPasswordError(t('Invalid_pass')); diff --git a/apps/meteor/client/views/hooks/roomActions/useArchiveRoom.tsx b/apps/meteor/client/views/hooks/roomActions/useArchiveRoom.tsx index d0dd48e911d87..d60e6717fc41d 100644 --- a/apps/meteor/client/views/hooks/roomActions/useArchiveRoom.tsx +++ b/apps/meteor/client/views/hooks/roomActions/useArchiveRoom.tsx @@ -1,5 +1,5 @@ import type { IRoom, RoomAdminFieldsType } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; @@ -8,7 +8,7 @@ export const useArchiveRoom = (room: Pick) => { const dispatchToastMessage = useToastMessageDispatch(); const archiveAction = useEndpoint('POST', '/v1/rooms.changeArchivationState'); - const handleArchive = useMutableCallback(async () => { + const handleArchive = useEffectEvent(async () => { try { await archiveAction({ rid: room._id, action: room.archived ? 'unarchive' : 'archive' }); dispatchToastMessage({ type: 'success', message: room.archived ? t('Room_has_been_unarchived') : t('Room_has_been_archived') }); diff --git a/apps/meteor/client/views/hooks/roomActions/useDeleteRoom.tsx b/apps/meteor/client/views/hooks/roomActions/useDeleteRoom.tsx index ee7ba85713bc0..1886b307fabd8 100644 --- a/apps/meteor/client/views/hooks/roomActions/useDeleteRoom.tsx +++ b/apps/meteor/client/views/hooks/roomActions/useDeleteRoom.tsx @@ -1,6 +1,6 @@ import type { IRoom, RoomAdminFieldsType } from '@rocket.chat/core-typings'; import { isRoomFederated } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useRouter, usePermission, useEndpoint } from '@rocket.chat/ui-contexts'; import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; @@ -75,7 +75,7 @@ export const useDeleteRoom = (room: IRoom | Pick, { const isDeleting = deleteTeamMutation.isPending || deleteRoomMutation.isPending; - const handleDelete = useMutableCallback(() => { + const handleDelete = useEffectEvent(() => { const handleDeleteTeam = async (roomsToRemove: IRoom['_id'][]) => { if (!room.teamId) { return; diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx index 4570d4abeb43c..45aeef3212a65 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx @@ -1,7 +1,7 @@ import type { ISetting } from '@rocket.chat/apps-engine/definition/settings'; import type { App, SettingValue } from '@rocket.chat/core-typings'; import { Button, ButtonGroup, Box } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useTranslation, useRouteParameter, useToastMessageDispatch, usePermission, useRouter } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { useMemo, useCallback } from 'react'; @@ -37,7 +37,7 @@ const AppDetailsPage = ({ id }: AppDetailsPageProps): ReactElement => { const context = useRouteParameter('context'); const appData = useAppInfo(id, context || ''); - const handleReturn = useMutableCallback((): void => { + const handleReturn = useEffectEvent((): void => { if (!context) { return; } diff --git a/apps/meteor/client/views/modal/uikit/hooks/useValues.ts b/apps/meteor/client/views/modal/uikit/hooks/useValues.ts index 0545226ffcd53..c2dbe247dcce4 100644 --- a/apps/meteor/client/views/modal/uikit/hooks/useValues.ts +++ b/apps/meteor/client/views/modal/uikit/hooks/useValues.ts @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { Block, LayoutBlock } from '@rocket.chat/ui-kit'; import { useReducer } from 'react'; @@ -33,12 +33,12 @@ const reduceBlocks = (obj: Record, }; export const useValues = (blocks: Block[]) => { - const reducer = useMutableCallback((values, { actionId, payload }) => ({ + const reducer = useEffectEvent((values, { actionId, payload }) => ({ ...values, [actionId]: payload, })); - const initializer = useMutableCallback((blocks: LayoutBlock[]) => { + const initializer = useEffectEvent((blocks: LayoutBlock[]) => { const obj: Record = {}; return blocks.reduce(reduceBlocks, obj); diff --git a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx index f02d67f3b8501..0cbfc9ea95fdb 100644 --- a/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx +++ b/apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx @@ -15,7 +15,7 @@ import { CheckOption, } from '@rocket.chat/fuselage'; import type { SelectOption } from '@rocket.chat/fuselage'; -import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useSetting, useMethod, useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import { useMemo } from 'react'; @@ -103,7 +103,7 @@ const AgentEdit = ({ agentData, userDepartments, availableDepartments }: AgentEd const saveAgentInfo = useMethod('livechat:saveAgentInfo'); const saveAgentStatus = useEndpoint('POST', '/v1/livechat/agent.status'); - const handleSave = useMutableCallback(async ({ status, departments, ...data }) => { + const handleSave = useEffectEvent(async ({ status, departments, ...data }) => { try { await saveAgentStatus({ agentId: agentData._id, status }); await saveAgentInfo(agentData._id, data, departments); diff --git a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx index 6a9c3bd74d9b2..c71687cb4ff96 100644 --- a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx +++ b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx @@ -1,5 +1,5 @@ import { Button, Box, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { UserAutoComplete } from '@rocket.chat/ui-client'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; @@ -19,7 +19,7 @@ const AddAgent = ({ reload }: AddAgentProps): ReactElement => { const saveAction = useEndpointAction('POST', '/v1/livechat/users/agent'); - const handleSave = useMutableCallback(async () => { + const handleSave = useEffectEvent(async () => { try { await saveAction({ username }); reload(); diff --git a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx index ccae1aff414c2..448dee910c03a 100644 --- a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx +++ b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx @@ -1,5 +1,5 @@ import { Pagination } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useMediaQuery, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { hashKey } from '@tanstack/react-query'; import { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -39,7 +39,7 @@ const AgentsTable = () => { const [defaultQuery] = useState(hashKey([query])); const queryHasChanged = defaultQuery !== hashKey([query]); - const onHeaderClick = useMutableCallback((id) => { + const onHeaderClick = useEffectEvent((id) => { if (sortBy === id) { setSort(id, sortDirection === 'asc' ? 'desc' : 'asc'); return; diff --git a/apps/meteor/client/views/omnichannel/agents/hooks/useRemoveAgent.tsx b/apps/meteor/client/views/omnichannel/agents/hooks/useRemoveAgent.tsx index 3970d45d6bbf1..c8d28939a7131 100644 --- a/apps/meteor/client/views/omnichannel/agents/hooks/useRemoveAgent.tsx +++ b/apps/meteor/client/views/omnichannel/agents/hooks/useRemoveAgent.tsx @@ -1,5 +1,5 @@ import type { ILivechatAgent } from '@rocket.chat/core-typings'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useTranslation, useRouter, useEndpoint } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; @@ -14,7 +14,7 @@ export const useRemoveAgent = (uid: ILivechatAgent['_id']) => { const deleteAction = useEndpoint('DELETE', '/v1/livechat/users/agent/:_id', { _id: uid }); - const handleDelete = useMutableCallback(() => { + const handleDelete = useEffectEvent(() => { const onDeleteAgent = async () => { try { await deleteAction(); diff --git a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx index d52b0501f9ce4..72859bfc7495d 100644 --- a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx +++ b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx @@ -1,5 +1,5 @@ import { Box, InputBox, Menu, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { Moment } from 'moment'; import moment from 'moment'; import type { ComponentProps } from 'react'; @@ -32,7 +32,7 @@ const DateRangePicker = ({ onChange = () => undefined, ...props }: DateRangePick const { start, end } = range; - const handleStart = useMutableCallback(({ currentTarget }) => { + const handleStart = useEffectEvent(({ currentTarget }) => { const rangeObj = { start: currentTarget.value, end: range.end, @@ -41,7 +41,7 @@ const DateRangePicker = ({ onChange = () => undefined, ...props }: DateRangePick onChange(rangeObj); }); - const handleEnd = useMutableCallback(({ currentTarget }) => { + const handleEnd = useEffectEvent(({ currentTarget }) => { const rangeObj = { end: currentTarget.value, start: range.start, @@ -50,7 +50,7 @@ const DateRangePicker = ({ onChange = () => undefined, ...props }: DateRangePick onChange(rangeObj); }); - const handleRange = useMutableCallback((range) => { + const handleRange = useEffectEvent((range) => { setRange(range); onChange(range); }); diff --git a/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx b/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx index 73a138e1a31b9..9708ddf2003ad 100644 --- a/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx +++ b/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useMethod } from '@rocket.chat/ui-contexts'; import type * as chartjs from 'chart.js'; import { useRef, useEffect } from 'react'; @@ -57,7 +57,7 @@ const InterchangeableChart = ({ const loadData = useMethod('livechat:getAnalyticsChartData'); - const draw = useMutableCallback(async (params) => { + const draw = useEffectEvent(async (params) => { try { const tooltipCallbacks = getChartTooltips(chartName); if (!params?.daterange?.from || !params?.daterange?.to) { diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearancePage.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearancePage.tsx index 4806cf9f5bb03..b37e1ec0f5d43 100644 --- a/apps/meteor/client/views/omnichannel/appearance/AppearancePage.tsx +++ b/apps/meteor/client/views/omnichannel/appearance/AppearancePage.tsx @@ -1,6 +1,6 @@ import type { ISetting, Serialized } from '@rocket.chat/core-typings'; import { ButtonGroup, Button, Box } from '@rocket.chat/fuselage'; -import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts'; import { useForm, FormProvider } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; @@ -55,7 +55,7 @@ const AppearancePage = ({ settings }: { settings: Serialized[] }) => { const currentData = watch(); - const handleSave = useMutableCallback(async (data) => { + const handleSave = useEffectEvent(async (data) => { const mappedAppearance = Object.entries(data) .map(([_id, value]) => ({ _id, value })) .filter((item) => item.value !== undefined) as { diff --git a/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHours.tsx b/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHours.tsx index df1cf0e5069c9..77ab03e697451 100644 --- a/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHours.tsx +++ b/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHours.tsx @@ -1,6 +1,6 @@ import type { ILivechatBusinessHour, LivechatBusinessHourTypes, Serialized } from '@rocket.chat/core-typings'; import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useMethod, useTranslation, useRouter } from '@rocket.chat/ui-contexts'; import { FormProvider, useForm } from 'react-hook-form'; @@ -50,7 +50,7 @@ const EditBusinessHours = ({ businessHourData, type }: EditBusinessHoursProps) = formState: { isDirty }, } = methods; - const handleSave = useMutableCallback(async ({ departments, ...data }: BusinessHoursFormData) => { + const handleSave = useEffectEvent(async ({ departments, ...data }: BusinessHoursFormData) => { const departmentsToApplyBusinessHour = departments?.map((dep) => dep.value).join(',') || ''; try { diff --git a/apps/meteor/client/views/omnichannel/businessHours/useIsSingleBusinessHours.ts b/apps/meteor/client/views/omnichannel/businessHours/useIsSingleBusinessHours.ts index 3f997d20ebfd8..67c7877ce34df 100644 --- a/apps/meteor/client/views/omnichannel/businessHours/useIsSingleBusinessHours.ts +++ b/apps/meteor/client/views/omnichannel/businessHours/useIsSingleBusinessHours.ts @@ -1,7 +1,7 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { businessHourManager } from '../../../../app/livechat/client/views/app/business-hours/BusinessHours'; import { useReactiveValue } from '../../../hooks/useReactiveValue'; export const useIsSingleBusinessHours = () => - useReactiveValue(useMutableCallback(() => businessHourManager.getTemplate())) === 'livechatBusinessHoursForm'; + useReactiveValue(useEffectEvent(() => businessHourManager.getTemplate())) === 'livechatBusinessHoursForm'; diff --git a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx index d7c4bef80a124..47040adbf37a3 100644 --- a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx +++ b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx @@ -1,6 +1,6 @@ import type { IOmnichannelRoomWithDepartment } from '@rocket.chat/core-typings'; import { Callout, Pagination } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { GETLivechatRoomsParams } from '@rocket.chat/rest-typings'; import { usePermission, useRouter } from '@rocket.chat/ui-contexts'; import { hashKey } from '@tanstack/react-query'; @@ -167,7 +167,7 @@ const CurrentChatsPage = ({ id, onRowClick }: { id?: string; onRowClick: (_id: s const [defaultQuery] = useState(hashKey([query])); const queryHasChanged = defaultQuery !== hashKey([query]); - const onFilter = useMutableCallback((params: DebouncedParams): void => { + const onFilter = useEffectEvent((params: DebouncedParams): void => { setParams(params); setCurrent(0); }); diff --git a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx index f2f043de91e2c..c94cfbfd989f7 100644 --- a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx +++ b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { usePermission, useRouteParameter, useRouter } from '@rocket.chat/ui-contexts'; import { memo } from 'react'; import type { ReactElement } from 'react'; @@ -13,7 +13,7 @@ const CurrentChatsRoute = (): ReactElement => { const canViewCurrentChats = usePermission('view-livechat-current-chats'); const router = useRouter(); - const onRowClick = useMutableCallback((_id) => { + const onRowClick = useEffectEvent((_id) => { router.navigate(`/omnichannel/current/${_id}`); }); diff --git a/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx b/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx index 2a86dcc2508ee..914b8f608cc4b 100644 --- a/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx +++ b/apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx @@ -1,5 +1,5 @@ import { TextInput, Box, Select, InputBox } from '@rocket.chat/fuselage'; -import { useMutableCallback, useLocalStorage } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useMethod } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { Dispatch, SetStateAction } from 'react'; @@ -42,15 +42,15 @@ const FilterByText = ({ setFilter, reload, customFields, setCustomFields, hasCus const [to, setTo] = useLocalStorage('to', ''); const [tags, setTags] = useLocalStorage('tags', []); - const handleGuest = useMutableCallback((e) => setGuest(e.target.value)); - const handleServedBy = useMutableCallback((e) => setServedBy(e)); - const handleStatus = useMutableCallback((e) => setStatus(e)); - const handleDepartment = useMutableCallback((e) => setDepartment(e)); - const handleFrom = useMutableCallback((e) => setFrom(e.target.value)); - const handleTo = useMutableCallback((e) => setTo(e.target.value)); - const handleTags = useMutableCallback((e) => setTags(e)); + const handleGuest = useEffectEvent((e) => setGuest(e.target.value)); + const handleServedBy = useEffectEvent((e) => setServedBy(e)); + const handleStatus = useEffectEvent((e) => setStatus(e)); + const handleDepartment = useEffectEvent((e) => setDepartment(e)); + const handleFrom = useEffectEvent((e) => setFrom(e.target.value)); + const handleTo = useEffectEvent((e) => setTo(e.target.value)); + const handleTags = useEffectEvent((e) => setTags(e)); - const reset = useMutableCallback(() => { + const reset = useEffectEvent(() => { setGuest(''); setServedBy('all'); setStatus('all'); @@ -61,7 +61,7 @@ const FilterByText = ({ setFilter, reload, customFields, setCustomFields, hasCus setCustomFields(undefined); }); - const onSubmit = useMutableCallback((e) => e.preventDefault()); + const onSubmit = useEffectEvent((e) => e.preventDefault()); useEffect(() => { setFilter((data) => ({ @@ -77,13 +77,13 @@ const FilterByText = ({ setFilter, reload, customFields, setCustomFields, hasCus })); }, [setFilter, guest, servedBy, status, department, from, to, tags, customFields]); - const handleClearFilters = useMutableCallback(() => { + const handleClearFilters = useEffectEvent(() => { reset(); }); const removeClosedChats = useMethod('livechat:removeAllClosedRooms'); - const handleRemoveClosed = useMutableCallback(async () => { + const handleRemoveClosed = useEffectEvent(async () => { const onDeleteAll = async (): Promise => { try { await removeClosedChats(); diff --git a/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx b/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx index a1daa91b9014a..a028b29b073f5 100644 --- a/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx +++ b/apps/meteor/client/views/omnichannel/currentChats/RemoveChatButton.tsx @@ -1,5 +1,5 @@ import { IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; @@ -14,11 +14,11 @@ const RemoveChatButton = ({ _id }: RemoveChatButtonProps) => { const dispatchToastMessage = useToastMessageDispatch(); const { t } = useTranslation(); - const handleRemoveClick = useMutableCallback(async () => { + const handleRemoveClick = useEffectEvent(async () => { removeCurrentChatMutation.mutate(_id); }); - const handleDelete = useMutableCallback((e) => { + const handleDelete = useEffectEvent((e) => { e.stopPropagation(); const onDeleteAgent = async (): Promise => { try { diff --git a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx index 3ec457ffe9885..6c96bb87f8599 100644 --- a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx +++ b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx @@ -1,5 +1,5 @@ import { IconButton, Pagination } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts'; import { useQuery, hashKey } from '@tanstack/react-query'; import { useMemo, useState } from 'react'; @@ -27,8 +27,8 @@ const CustomFieldsTable = () => { const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination(); const { sortBy, sortDirection, setSort } = useSort<'_id' | 'label' | 'scope' | 'visibility'>('_id'); - const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/customfields/new')); - const onRowClick = useMutableCallback((id) => () => router.navigate(`/omnichannel/customfields/edit/${id}`)); + const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/customfields/new')); + const onRowClick = useEffectEvent((id) => () => router.navigate(`/omnichannel/customfields/edit/${id}`)); const handleDelete = useRemoveCustomField(); diff --git a/apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx b/apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx index 16c0feaa8e4ff..42c62ec616bd4 100644 --- a/apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx +++ b/apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx @@ -13,7 +13,7 @@ import { ToggleSwitch, Box, } from '@rocket.chat/fuselage'; -import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useMethod, useTranslation, useRouter } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import { useMemo } from 'react'; @@ -62,7 +62,7 @@ const EditCustomFields = ({ customFieldData }: { customFieldData?: Serialized { + const handleSave = useEffectEvent(async ({ visibility, ...data }) => { try { await saveCustomField(customFieldData?._id as unknown as string, { visibility: visibility ? 'visible' : 'hidden', diff --git a/apps/meteor/client/views/omnichannel/customFields/useRemoveCustomField.tsx b/apps/meteor/client/views/omnichannel/customFields/useRemoveCustomField.tsx index eafb2b35956fe..4dd947ad8dbf6 100644 --- a/apps/meteor/client/views/omnichannel/customFields/useRemoveCustomField.tsx +++ b/apps/meteor/client/views/omnichannel/customFields/useRemoveCustomField.tsx @@ -1,4 +1,4 @@ -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useMethod } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; @@ -12,7 +12,7 @@ export const useRemoveCustomField = () => { const removeCustomField = useMethod('livechat:removeCustomField'); const queryClient = useQueryClient(); - const handleDelete = useMutableCallback((id) => { + const handleDelete = useEffectEvent((id) => { const onDeleteAgent = async () => { try { await removeCustomField(id); diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx index fe12054932c45..976b62891a12a 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx @@ -1,5 +1,5 @@ import { Box, Button } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -17,9 +17,9 @@ function AddAgent({ agentList, onAdd }: { agentList: IDepartmentAgent[]; onAdd: const dispatchToastMessage = useToastMessageDispatch(); - const handleAgent = useMutableCallback((e) => setUserId(e)); + const handleAgent = useEffectEvent((e) => setUserId(e)); - const handleSave = useMutableCallback(async () => { + const handleSave = useEffectEvent(async () => { if (!userId) { return; } diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/RemoveAgentButton.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/RemoveAgentButton.tsx index f9c82c2de115f..fc26999d1f472 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/RemoveAgentButton.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/RemoveAgentButton.tsx @@ -1,5 +1,5 @@ import { IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import { useTranslation } from 'react-i18next'; @@ -10,7 +10,7 @@ function RemoveAgentButton({ agentId, onRemove }: { agentId: string; onRemove: ( const dispatchToastMessage = useToastMessageDispatch(); const { t } = useTranslation(); - const handleDelete = useMutableCallback((e) => { + const handleDelete = useEffectEvent((e) => { e.stopPropagation(); const onRemoveAgent = async () => { diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsPage.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsPage.tsx index 0d7def48d1a7e..bbc71c31b8167 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentsPage.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsPage.tsx @@ -1,5 +1,5 @@ import { Tabs, Button } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRoute, useTranslation, useRouteParameter } from '@rocket.chat/ui-contexts'; import DepartmentsTableV2 from './DepartmentsTable'; @@ -14,13 +14,13 @@ const DepartmentsPage = () => { const context = useRouteParameter('context'); const id = useRouteParameter('id'); - const handleTabClick = useMutableCallback((tab) => + const handleTabClick = useEffectEvent((tab) => departmentsRoute.push({ context: tab, }), ); - const onAddNew = useMutableCallback(() => + const onAddNew = useEffectEvent(() => departmentsRoute.push({ context: 'new', }), diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentItemMenu.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentItemMenu.tsx index ce5fe853dc733..e6a0b555b4e67 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentItemMenu.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentItemMenu.tsx @@ -1,6 +1,6 @@ import type { ILivechatDepartment } from '@rocket.chat/core-typings'; import { Box, Icon, Menu } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useEndpoint, useRoute, useSetModal, useTranslation, useSetting } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import type { ReactElement } from 'react'; @@ -32,7 +32,7 @@ const DepartmentItemMenu = ({ department, archived }: DepartmentItemMenuProps): _id, }); - const handleEdit = useMutableCallback(() => { + const handleEdit = useEffectEvent(() => { route.push({ context: 'edit', id: _id }); }); @@ -42,7 +42,7 @@ const DepartmentItemMenu = ({ department, archived }: DepartmentItemMenuProps): }); }, [queryClient]); - const handleToggleArchive = useMutableCallback(async () => { + const handleToggleArchive = useEffectEvent(async () => { try { await toggleArchive(); dispatchToastMessage({ type: 'success', message: archived ? t('Department_unarchived') : t('Department_archived') }); @@ -55,7 +55,7 @@ const DepartmentItemMenu = ({ department, archived }: DepartmentItemMenuProps): } }); - const handlePermanentDepartmentRemoval = useMutableCallback(() => { + const handlePermanentDepartmentRemoval = useEffectEvent(() => { setModal( setModal(null)} name={name} />); }); diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx index baf48927a266b..3e3462e8df80d 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx @@ -1,6 +1,6 @@ import type { ILivechatDepartment } from '@rocket.chat/core-typings'; import { Pagination } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts'; import { useQuery, hashKey, keepPreviousData } from '@tanstack/react-query'; import { useState, useMemo } from 'react'; @@ -35,7 +35,7 @@ const DepartmentsTable = ({ archived }: { archived: boolean }) => { const getDepartments = useEndpoint('GET', archived ? DEPARTMENTS_ENDPOINTS.archived : DEPARTMENTS_ENDPOINTS.department); - const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/departments/new')); + const handleAddNew = useEffectEvent(() => router.navigate('/omnichannel/departments/new')); const query = useDebouncedValue( useMemo( diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/RemoveDepartmentModal.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/RemoveDepartmentModal.tsx index 751d9cffc39f8..2c7c150a581ca 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/RemoveDepartmentModal.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/RemoveDepartmentModal.tsx @@ -1,5 +1,5 @@ import { Box, Input } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts'; import type { ChangeEvent, ReactElement } from 'react'; import { useState } from 'react'; @@ -21,7 +21,7 @@ const RemoveDepartmentModal = ({ _id = '', name, reset, onClose }: RemoveDepartm const removeDepartment = useEndpoint('DELETE', '/v1/livechat/department/:_id', { _id }); const dispatchToast = useToastMessageDispatch(); - const onSubmit = useMutableCallback(async (e) => { + const onSubmit = useEffectEvent(async (e) => { e.preventDefault(); try { diff --git a/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx b/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx index cbd9b6587a56d..1f5368a44953a 100644 --- a/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx +++ b/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx @@ -17,7 +17,7 @@ import { FieldHint, Option, } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useMethod, useEndpoint, useTranslation, useRouter } from '@rocket.chat/ui-contexts'; import { useQueryClient } from '@tanstack/react-query'; import { useMemo, useState } from 'react'; @@ -137,7 +137,7 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen const dispatchToastMessage = useToastMessageDispatch(); - const handleSave = useMutableCallback(async (data: FormValues) => { + const handleSave = useEffectEvent(async (data: FormValues) => { const { agentList, enabled, diff --git a/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx b/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx index 5ef2e8a8ab98d..8c2b4b2a98bc8 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx @@ -1,5 +1,5 @@ import { Pagination } from '@rocket.chat/fuselage'; -import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useRoute, useTranslation, useEndpoint, useUserId } from '@rocket.chat/ui-contexts'; import { useQuery, hashKey } from '@tanstack/react-query'; import { useState, useMemo } from 'react'; @@ -41,7 +41,7 @@ const CallTable = () => { 500, ); - const onRowClick = useMutableCallback((id, token) => { + const onRowClick = useEffectEvent((id, token) => { directoryRoute.push( { tab: 'calls', diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx index 30ae27fd01a65..7ea876d6dd600 100644 --- a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx +++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx @@ -1,6 +1,6 @@ import type { ILivechatCustomField, IOmnichannelRoom, IVisitor, Serialized } from '@rocket.chat/core-typings'; import { Box, Margins, Tag, Button, ButtonGroup } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { IRouterPaths } from '@rocket.chat/ui-contexts'; import { useToastMessageDispatch, useRoute, useUserSubscription, useTranslation, usePermission } from '@rocket.chat/ui-contexts'; import { Meteor } from 'meteor/meteor'; @@ -78,7 +78,7 @@ function ChatInfo({ id, route }: ChatInfoProps) { return field?.visibility === 'visible' && field?.scope === 'room'; }; - const onEditClick = useMutableCallback(() => { + const onEditClick = useEffectEvent(() => { const hasEditAccess = !!subscription || hasLocalEditRoomPermission || hasGlobalEditRoomPermission; if (!hasEditAccess) { return dispatchToastMessage({ type: 'error', message: t('Not_authorized') }); diff --git a/apps/meteor/client/views/omnichannel/managers/AddManager.tsx b/apps/meteor/client/views/omnichannel/managers/AddManager.tsx index 7f4c2696c6922..bc6f94ab3597b 100644 --- a/apps/meteor/client/views/omnichannel/managers/AddManager.tsx +++ b/apps/meteor/client/views/omnichannel/managers/AddManager.tsx @@ -1,5 +1,5 @@ import { Button, Box, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage'; -import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useUniqueId } from '@rocket.chat/fuselage-hooks'; import { UserAutoComplete } from '@rocket.chat/ui-client'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; @@ -17,7 +17,7 @@ const AddManager = ({ reload }: { reload: () => void }): ReactElement => { const saveAction = useEndpointAction('POST', '/v1/livechat/users/manager'); - const handleSave = useMutableCallback(async () => { + const handleSave = useEffectEvent(async () => { try { await saveAction({ username }); dispatchToastMessage({ type: 'success', message: t('Manager_added') }); diff --git a/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx b/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx index d7e65207683d0..7c9e7df45cdc5 100644 --- a/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx +++ b/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx @@ -1,5 +1,5 @@ import { IconButton } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; @@ -14,11 +14,11 @@ const RemoveManagerButton = ({ _id, reload }: { _id: string; reload: () => void const setModal = useSetModal(); const dispatchToastMessage = useToastMessageDispatch(); - const handleRemoveClick = useMutableCallback(async () => { + const handleRemoveClick = useEffectEvent(async () => { await deleteAction(); reload(); }); - const handleDelete = useMutableCallback((e) => { + const handleDelete = useEffectEvent((e) => { e.stopPropagation(); const onDeleteManager = async (): Promise => { try { diff --git a/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx b/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx index d0001ebe94790..b73966e5e2761 100644 --- a/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx +++ b/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx @@ -1,5 +1,5 @@ import { Box, Select, Label } from '@rocket.chat/fuselage'; -import { useMutableCallback, useLocalStorage } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks'; import type { Dispatch, SetStateAction } from 'react'; import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; @@ -23,11 +23,11 @@ export const QueueListFilter = ({ setFilter, ...props }: QueueListFilterProps) = const [status, setStatus] = useLocalStorage('status', 'online'); const [department, setDepartment] = useLocalStorage('department', 'all'); - const handleServedBy = useMutableCallback((e) => setServedBy(e)); - const handleStatus = useMutableCallback((e) => setStatus(e)); - const handleDepartment = useMutableCallback((e) => setDepartment(e)); + const handleServedBy = useEffectEvent((e) => setServedBy(e)); + const handleStatus = useEffectEvent((e) => setStatus(e)); + const handleDepartment = useEffectEvent((e) => setDepartment(e)); - const onSubmit = useMutableCallback((e) => e.preventDefault()); + const onSubmit = useEffectEvent((e) => e.preventDefault()); useEffect(() => { const filters = { status } as { diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.tsx index 431a0dbf83c13..0f0650094a2b8 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.tsx +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.tsx @@ -1,6 +1,6 @@ import type { SelectOption } from '@rocket.chat/fuselage'; import { Box, Select, Margins, Option } from '@rocket.chat/fuselage'; -import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; import type { MutableRefObject } from 'react'; import { useRef, useState, useMemo, useEffect, Fragment } from 'react'; import { useTranslation } from 'react-i18next'; @@ -57,7 +57,7 @@ const RealTimeMonitoringPage = () => { randomizeKeys(keys); }, [allParams]); - const reloadCharts = useMutableCallback(() => { + const reloadCharts = useEffectEvent(() => { Object.values(reloadRef.current).forEach((reload) => { reload(); }); @@ -103,7 +103,7 @@ const RealTimeMonitoringPage = () => {