Use query for UserRoles

Author: tassoevan

apps/meteor/client/components/message/header/hooks/useMessageRoles.ts

@@ -4,11 +4,17 @@ import { useCallback } from 'react';
 import { Roles } from '../../../../../app/models/client';
 import { useReactiveValue } from '../../../../hooks/useReactiveValue';
 import { useRoomRolesStore } from '../../../../hooks/useRoomRolesStore';
-import { useUserRolesStore } from '../../../../hooks/useUserRolesStore';
+import { useUserRolesQuery } from '../../../../hooks/useUserRolesQuery';
 
 export const useMessageRoles = (userId: IUser['_id'] | undefined, roomId: IRoom['_id'], shouldLoadRoles: boolean): Array<string> => {
-	const userRoles = useUserRolesStore((state) => (userId ? state.rolesByUser.get(userId) : undefined));
-	const roomRoles = useRoomRolesStore((state) => state.records.find((record) => record.rid === roomId && record.u._id === userId));
+	const { data: userRoles } = useUserRolesQuery({
+		select: (records) => records.find((record) => record.uid === userId)?.roles,
+		enabled: shouldLoadRoles && !!userId,
+	});
+
+	const roomRoles = useRoomRolesStore((state) =>
+		userId ? state.records.find((record) => record.rid === roomId && record.u._id === userId) : undefined,
+	);
 
 	return useReactiveValue(
 		useCallback(() => {

apps/meteor/client/hooks/useUserRolesQuery.ts

@@ -0,0 +1,92 @@
+import type { IRole, IUser } from '@rocket.chat/core-typings';
+import { useMethod, useStream, useUserId } from '@rocket.chat/ui-contexts';
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+import { rolesQueryKeys } from '../lib/queryKeys';
+
+type UserRoles = {
+	uid: IUser['_id'];
+	roles: IRole['_id'][];
+};
+
+type UseUserRolesQueryOptions<TData = UserRoles[]> = Omit<
+	UseQueryOptions<UserRoles[], Error, TData, ReturnType<typeof rolesQueryKeys.userRoles>>,
+	'queryKey' | 'queryFn'
+>;
+
+export const useUserRolesQuery = <TData = UserRoles[]>(options?: UseUserRolesQueryOptions<TData>) => {
+	const queryClient = useQueryClient();
+
+	const uid = useUserId();
+
+	const subscribeToNotifyLogged = useStream('notify-logged');
+
+	const enabled = !!uid && (options?.enabled ?? true);
+
+	useEffect(() => {
+		if (!enabled) return;
+
+		return subscribeToNotifyLogged('roles-change', (role) => {
+			switch (role.type) {
+				case 'added': {
+					const { _id: roleId, scope, u } = role;
+					if (!!scope || !u) return;
+
+					queryClient.setQueryData(rolesQueryKeys.userRoles(), (data: UserRoles[] | undefined = []) => {
+						const record = data?.find((record) => record.uid === u._id);
+
+						if (!record) {
+							return [...data, { uid: u._id, roles: [roleId] }];
+						}
+
+						const roles = new Set(record.roles);
+						roles.add(roleId);
+						record.roles = [...roles];
+
+						return [...data];
+					});
+					break;
+				}
+
+				case 'removed': {
+					const { _id: roleId, scope, u } = role;
+					if (!!scope || !u) return;
+
+					queryClient.setQueryData(rolesQueryKeys.userRoles(), (data: UserRoles[] | undefined = []) => {
+						const record = data?.find((record) => record.uid === u._id);
+
+						if (!record) return data;
+
+						const roles = new Set(record.roles);
+						roles.delete(roleId);
+						record.roles = [...roles];
+
+						return [...data];
+					});
+					break;
+				}
+			}
+		});
+	}, [enabled, queryClient, subscribeToNotifyLogged, uid]);
+
+	const getUserRoles = useMethod('getUserRoles');
+
+	return useQuery({
+		queryKey: rolesQueryKeys.userRoles(),
+		queryFn: async () => {
+			const results = await getUserRoles();
+
+			return results.map(
+				(record): UserRoles => ({
+					uid: record._id,
+					roles: record.roles,
+				}),
+			);
+		},
+		staleTime: Infinity,
+		...options,
+		enabled,
+	});
+};

apps/meteor/client/hooks/useUserRolesStore.ts

@@ -18,3 +18,8 @@ export const subscriptionsQueryKeys = {
 export const cannedResponsesQueryKeys = {
 	all: ['canned-responses'] as const,
 };
+
+export const rolesQueryKeys = {
+	all: ['roles'] as const,
+	userRoles: () => [...rolesQueryKeys.all, 'user-roles'] as const,
+};

apps/meteor/client/lib/queryKeys.ts

@@ -22,4 +22,3 @@ import './slashCommands';
 import './startup';
 import './streamMessage';
 import './unread';
-import './userRoles';