refactor: query ParentTeam data from reusable hooks

apps/meteor/client/hooks/useTeamInfoQuery.ts

@@ -0,0 +1,26 @@
+import type { ITeam, Serialized } from '@rocket.chat/core-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
+import { teamsQueryKeys } from '../lib/queryKeys';
+
+type TeamInfoQueryOptions<TData = Partial<Serialized<ITeam>>> = Omit<
+	UseQueryOptions<Partial<Serialized<ITeam>>, Error, TData, ReturnType<typeof teamsQueryKeys.teamInfo>>,
+	'queryKey' | 'queryFn'
+>;
+
+export const useTeamInfoQuery = <TData = Partial<Serialized<ITeam>>>(teamId: string, options: TeamInfoQueryOptions<TData> = {}) => {
+	const teamsInfoEndpoint = useEndpoint('GET', '/v1/teams.info');
+
+	return useQuery({
+		queryKey: teamsQueryKeys.teamInfo(teamId),
+		queryFn: async () => {
+			const result = await teamsInfoEndpoint({ teamId });
+			return result.teamInfo;
+		},
+		placeholderData: keepPreviousData,
+		enabled: teamId !== '',
+		...options,
+	});
+};

apps/meteor/client/lib/queryKeys.ts

@@ -104,6 +104,8 @@ export const usersQueryKeys = {
 export const teamsQueryKeys = {
 	all: ['teams'] as const,
 	team: (teamId: ITeam['_id']) => [...teamsQueryKeys.all, teamId] as const,
+	teamInfo: (teamId: ITeam['_id']) => [...teamsQueryKeys.team(teamId), 'info'] as const,
 	roomsOfUser: (teamId: ITeam['_id'], userId: IUser['_id'], options?: { canUserDelete: boolean }) =>
 		[...teamsQueryKeys.team(teamId), 'rooms-of-user', userId, options] as const,
+	listUserTeams: (userId: IUser['_id']) => [...teamsQueryKeys.all, 'listUserTeams', userId] as const,
 };

apps/meteor/client/views/hooks/roomActions/useDeleteRoom.tsx

@@ -3,9 +3,10 @@ import { isRoomFederated } from '@rocket.chat/core-typings';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericModal } from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useRouter, usePermission, useEndpoint } from '@rocket.chat/ui-contexts';
-import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 
+import { useTeamInfoQuery } from '../../../hooks/useTeamInfoQuery';
 import DeleteTeamModal from '../../teams/contextualBar/info/DeleteTeam';
 
 export const useDeleteRoom = (room: IRoom | Pick<IRoom, RoomAdminFieldsType>, { reload }: { reload?: () => void } = {}) => {
@@ -19,19 +20,12 @@ export const useDeleteRoom = (room: IRoom | Pick<IRoom, RoomAdminFieldsType>, {
 
 	const deleteRoomEndpoint = useEndpoint('POST', '/v1/rooms.delete');
 	const deleteTeamEndpoint = useEndpoint('POST', '/v1/teams.delete');
-	const teamsInfoEndpoint = useEndpoint('GET', '/v1/teams.info');
 
 	const teamId = room.teamId || '';
-	const { data: teamInfoData } = useQuery({
-		queryKey: ['teamId', teamId],
-		queryFn: async () => teamsInfoEndpoint({ teamId }),
-		placeholderData: keepPreviousData,
-		retry: false,
-		enabled: room.teamId !== '',
-	});
+	const { data: teamInfo } = useTeamInfoQuery(teamId);
 
 	const hasPermissionToDeleteRoom = usePermission(`delete-${room.t}`, room._id);
-	const hasPermissionToDeleteTeamRoom = usePermission(`delete-team-${room.t === 'c' ? 'channel' : 'group'}`, teamInfoData?.teamInfo.roomId);
+	const hasPermissionToDeleteTeamRoom = usePermission(`delete-team-${room.t === 'c' ? 'channel' : 'group'}`, teamInfo?.roomId);
 	const isTeamRoom = room.teamId;
 	const canDeleteRoom = isRoomFederated(room) ? false : hasPermissionToDeleteRoom && (!isTeamRoom || hasPermissionToDeleteTeamRoom);
 

apps/meteor/client/views/room/Header/ParentTeam.tsx

@@ -1,12 +1,13 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { TEAM_TYPE } from '@rocket.chat/core-typings';
 import { useButtonPattern } from '@rocket.chat/fuselage-hooks';
-import { useUserId, useEndpoint } from '@rocket.chat/ui-contexts';
-import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useUserId } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 
 import { HeaderTag, HeaderTagIcon, HeaderTagSkeleton } from '../../../components/Header';
+import { useTeamInfoQuery } from '../../../hooks/useTeamInfoQuery';
 import { goToRoomById } from '../../../lib/utils/goToRoomById';
+import { useUserTeamsQuery } from '../hooks/useUserTeamsQuery';
 
 type APIErrorResult = { success: boolean; error: string };
 
@@ -22,30 +23,19 @@ const ParentTeam = ({ room }: { room: IRoom }): ReactElement | null => {
 		throw new Error('invalid uid');
 	}
 
-	const teamsInfoEndpoint = useEndpoint('GET', '/v1/teams.info');
-	const userTeamsListEndpoint = useEndpoint('GET', '/v1/users.listTeams');
-
 	const {
-		data: teamInfoData,
+		data: teamInfo,
 		isLoading: teamInfoLoading,
 		isError: teamInfoError,
-	} = useQuery({
-		queryKey: ['teamId', teamId],
-		queryFn: async () => teamsInfoEndpoint({ teamId }),
-		placeholderData: keepPreviousData,
-		retry: (_, error: APIErrorResult) => error?.error === 'unauthorized' && false,
-	});
+	} = useTeamInfoQuery(teamId, { retry: (_, error) => (error as unknown as APIErrorResult)?.error !== 'unauthorized' });
 
-	const { data: userTeams, isLoading: userTeamsLoading } = useQuery({
-		queryKey: ['userId', userId],
-		queryFn: async () => userTeamsListEndpoint({ userId }),
-	});
+	const { data: userTeams, isLoading: userTeamsLoading } = useUserTeamsQuery(userId);
 
-	const userBelongsToTeam = userTeams?.teams?.find((team) => team._id === teamId) || false;
-	const isTeamPublic = teamInfoData?.teamInfo.type === TEAM_TYPE.PUBLIC;
+	const userBelongsToTeam = userTeams?.find((team) => team._id === teamId) || false;
+	const isTeamPublic = teamInfo?.type === TEAM_TYPE.PUBLIC;
 
 	const redirectToMainRoom = (): void => {
-		const rid = teamInfoData?.teamInfo.roomId;
+		const rid = teamInfo?.roomId;
 		if (!rid) {
 			return;
 		}
@@ -70,7 +60,7 @@ const ParentTeam = ({ room }: { room: IRoom }): ReactElement | null => {
 	return (
 		<HeaderTag {...buttonProps}>
 			<HeaderTagIcon icon={{ name: isTeamPublic ? 'team' : 'team-lock' }} />
-			{teamInfoData?.teamInfo.name}
+			{teamInfo?.name}
 		</HeaderTag>
 	);
 };

apps/meteor/client/views/room/HeaderV2/ParentRoom/ParentTeam.tsx

@@ -1,11 +1,12 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { TEAM_TYPE } from '@rocket.chat/core-typings';
-import { useUserId, useEndpoint } from '@rocket.chat/ui-contexts';
-import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useUserId } from '@rocket.chat/ui-contexts';
 import { useTranslation } from 'react-i18next';
 
 import ParentRoomButton from './ParentRoomButton';
+import { useTeamInfoQuery } from '../../../../hooks/useTeamInfoQuery';
 import { goToRoomById } from '../../../../lib/utils/goToRoomById';
+import { useUserTeamsQuery } from '../../hooks/useUserTeamsQuery';
 
 type APIErrorResult = { success: boolean; error: string };
 
@@ -27,31 +28,20 @@ const ParentTeam = ({ room }: ParentTeamProps) => {
 		throw new Error('invalid uid');
 	}
 
-	const teamsInfoEndpoint = useEndpoint('GET', '/v1/teams.info');
-	const userTeamsListEndpoint = useEndpoint('GET', '/v1/users.listTeams');
-
 	const {
-		data: teamInfoData,
+		data: teamInfo,
 		isLoading: teamInfoLoading,
 		isError: teamInfoError,
-	} = useQuery({
-		queryKey: ['teamId', teamId],
-		queryFn: async () => teamsInfoEndpoint({ teamId }),
-		placeholderData: keepPreviousData,
-		retry: (_, error: APIErrorResult) => error?.error === 'unauthorized' && false,
-	});
+	} = useTeamInfoQuery(teamId, { retry: (_, error) => (error as unknown as APIErrorResult)?.error !== 'unauthorized' });
 
-	const { data: userTeams, isLoading: userTeamsLoading } = useQuery({
-		queryKey: ['userId', userId],
-		queryFn: async () => userTeamsListEndpoint({ userId }),
-	});
+	const { data: userTeams, isLoading: userTeamsLoading } = useUserTeamsQuery(userId);
 
-	const userBelongsToTeam = Boolean(userTeams?.teams?.find((team) => team._id === teamId)) || false;
-	const isPublicTeam = teamInfoData?.teamInfo.type === TEAM_TYPE.PUBLIC;
+	const userBelongsToTeam = Boolean(userTeams?.find((team) => team._id === teamId)) || false;
+	const isPublicTeam = teamInfo?.type === TEAM_TYPE.PUBLIC;
 	const shouldDisplayTeam = isPublicTeam || userBelongsToTeam;
 
 	const redirectToMainRoom = (): void => {
-		const rid = teamInfoData?.teamInfo.roomId;
+		const rid = teamInfo?.roomId;
 		if (!rid) {
 			return;
 		}
@@ -67,7 +57,7 @@ const ParentTeam = ({ room }: ParentTeamProps) => {
 		<ParentRoomButton
 			loading={teamInfoLoading || userTeamsLoading}
 			onClick={redirectToMainRoom}
-			title={t('Back_to__roomName__team', { roomName: teamInfoData?.teamInfo.name })}
+			title={t('Back_to__roomName__team', { roomName: teamInfo?.name })}
 		/>
 	);
 };

apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/useEditRoomPermissions.ts

@@ -1,10 +1,10 @@
 import type { IRoom, IRoomWithRetentionPolicy } from '@rocket.chat/core-typings';
-import { usePermission, useAtLeastOnePermission, useRole, useEndpoint } from '@rocket.chat/ui-contexts';
-import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { usePermission, useAtLeastOnePermission, useRole } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
 import { E2EEState } from '../../../../../../app/e2e/client/E2EEState';
 import { RoomSettingsEnum } from '../../../../../../definition/IRoomTypeConfig';
+import { useTeamInfoQuery } from '../../../../../hooks/useTeamInfoQuery';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import { useE2EEState } from '../../../hooks/useE2EEState';
 
@@ -17,19 +17,12 @@ export const useEditRoomPermissions = (room: IRoom | IRoomWithRetentionPolicy) =
 	const isE2EEReady = e2eeState === E2EEState.READY || e2eeState === E2EEState.SAVE_PASSWORD;
 	const canCreateChannel = usePermission('create-c');
 	const canCreateGroup = usePermission('create-p');
-	const teamsInfoEndpoint = useEndpoint('GET', '/v1/teams.info');
 
 	const teamId = room.teamId || '';
-	const { data: teamInfoData } = useQuery({
-		queryKey: ['teamId', teamId],
-		queryFn: async () => teamsInfoEndpoint({ teamId }),
-		placeholderData: keepPreviousData,
-		retry: false,
-		enabled: room.teamId !== '',
-	});
+	const { data: teamInfo } = useTeamInfoQuery(teamId);
 
-	const canCreateTeamChannel = usePermission('create-team-channel', teamInfoData?.teamInfo.roomId);
-	const canCreateTeamGroup = usePermission('create-team-group', teamInfoData?.teamInfo.roomId);
+	const canCreateTeamChannel = usePermission('create-team-channel', teamInfo?.roomId);
+	const canCreateTeamGroup = usePermission('create-team-group', teamInfo?.roomId);
 
 	const canChangeType = getCanChangeType(
 		room,

apps/meteor/client/views/room/hooks/useUserTeamsQuery.ts

@@ -0,0 +1,24 @@
+import type { ITeam, Serialized } from '@rocket.chat/core-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+import { teamsQueryKeys } from '../../../lib/queryKeys';
+
+type UserTeamsQueryOptions<TData = ITeam[]> = Omit<
+	UseQueryOptions<Serialized<ITeam[]>, Error, TData, ReturnType<typeof teamsQueryKeys.listUserTeams>>,
+	'queryKey' | 'queryFn'
+>;
+
+export const useUserTeamsQuery = <TData = ITeam[]>(userId: string, options: UserTeamsQueryOptions<TData> = {}) => {
+	const userTeamsListEndpoint = useEndpoint('GET', '/v1/users.listTeams');
+
+	return useQuery({
+		queryKey: teamsQueryKeys.listUserTeams(userId),
+		queryFn: async () => {
+			const response = await userTeamsListEndpoint({ userId });
+			return response.teams;
+		},
+		...options,
+	});
+};