diff --git a/apps/meteor/client/lib/userStatuses.ts b/apps/meteor/client/lib/userStatuses.ts index 631c1d1ea0442..21c5b541823ac 100644 --- a/apps/meteor/client/lib/userStatuses.ts +++ b/apps/meteor/client/lib/userStatuses.ts @@ -1,8 +1,6 @@ import { UserStatus } from '@rocket.chat/core-typings'; import type { ICustomUserStatus } from '@rocket.chat/core-typings'; -import { sdk } from '../../app/utils/client/lib/SDKClient'; - export type UserStatusDescriptor = { id: string; name: string; @@ -10,6 +8,10 @@ export type UserStatusDescriptor = { localizeName: boolean; }; +export type UserStatusStreamCallback = (data: { userStatusData: ICustomUserStatus }) => void; +export type UserStatusStreamer = (event: 'updateCustomUserStatus' | 'deleteCustomUserStatus', cb: UserStatusStreamCallback) => () => void; +export type UserStatusLister = () => Promise; + export class UserStatuses implements Iterable { public invisibleAllowed = true; @@ -58,8 +60,8 @@ export class UserStatuses implements Iterable { } } - public async sync() { - const result = await sdk.call('listCustomUserStatus'); + public async sync(listCustomUserStatus: UserStatusLister) { + const result = await listCustomUserStatus(); if (!result) { return; } @@ -69,20 +71,20 @@ export class UserStatuses implements Iterable { } } - public watch(cb?: () => void) { - const updateSubscription = sdk.stream('notify-logged', ['updateCustomUserStatus'], (data) => { + public watch(stream: UserStatusStreamer, cb?: () => void) { + const unsubscribeUpdate = stream('updateCustomUserStatus', (data) => { this.put(this.createFromCustom(data.userStatusData)); cb?.(); }); - const deleteSubscription = sdk.stream('notify-logged', ['deleteCustomUserStatus'], (data) => { + const unsubscribeDelete = stream('deleteCustomUserStatus', (data) => { this.delete(data.userStatusData._id); cb?.(); }); return () => { - updateSubscription.stop(); - deleteSubscription.stop(); + unsubscribeUpdate(); + unsubscribeDelete(); }; } } diff --git a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx index 58b75c7a9fd7c..192e93aab46b6 100644 --- a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx +++ b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx @@ -1,7 +1,7 @@ import { Box } from '@rocket.chat/fuselage'; import type { GenericMenuItemProps } from '@rocket.chat/ui-client'; import { clientCallbacks } from '@rocket.chat/ui-client'; -import { useEndpoint, useSetting } from '@rocket.chat/ui-contexts'; +import { useEndpoint, useMethod, useSetting, useStream } from '@rocket.chat/ui-contexts'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; @@ -20,13 +20,15 @@ export const useStatusItems = (): GenericMenuItemProps[] => { userStatuses.invisibleAllowed = useSetting('Accounts_AllowInvisibleStatusOption', true); const queryClient = useQueryClient(); + const stream = useStream('notify-logged'); + const listCustomUserStatus = useMethod('listCustomUserStatus'); useEffect( () => - userStatuses.watch(() => { + userStatuses.watch(stream, () => { queryClient.setQueryData(['user-statuses'], Array.from(userStatuses)); }), - [queryClient], + [queryClient, stream], ); const { t } = useTranslation(); @@ -46,7 +48,7 @@ export const useStatusItems = (): GenericMenuItemProps[] => { const { data: statuses } = useQuery({ queryKey: ['user-statuses'], queryFn: async () => { - await userStatuses.sync(); + await userStatuses.sync(listCustomUserStatus); return Array.from(userStatuses); }, staleTime: Infinity,