refactor: query ParentTeam data from reusable hooks

apps/meteor/client/hooks/useTeamInfoEndpoint.ts

@@ -0,0 +1,17 @@
+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';
+
+export const useTeamInfoEndpoint = (teamId: string, retry: UseQueryOptions['retry'] = false) => {
+	const teamsInfoEndpoint = useEndpoint('GET', '/v1/teams.info');
+
+	return useQuery({
+		queryKey: teamsQueryKeys.teamInfo(teamId),
+		queryFn: async () => teamsInfoEndpoint({ teamId }),
+		placeholderData: keepPreviousData,
+		retry,
+		enabled: teamId !== '',
+	});
+};

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 { useTeamInfoEndpoint } from '../../../hooks/useTeamInfoEndpoint';
 import DeleteTeamModal from '../../teams/contextualBar/info/DeleteTeam';
 
 export const useDeleteRoom = (room: IRoom | Pick<IRoom, RoomAdminFieldsType>, { reload }: { reload?: () => void } = {}) => {
@@ -19,16 +20,9 @@ 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: teamInfoData } = useTeamInfoEndpoint(teamId);
 
 	const hasPermissionToDeleteRoom = usePermission(`delete-${room.t}`, room._id);
 	const hasPermissionToDeleteTeamRoom = usePermission(`delete-team-${room.t === 'c' ? 'channel' : 'group'}`, teamInfoData?.teamInfo.roomId);

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 { useTeamInfoEndpoint } from '../../../hooks/useTeamInfoEndpoint';
 import { goToRoomById } from '../../../lib/utils/goToRoomById';
+import { useUserTeams } from '../hooks/useUserTeams';
 
 type APIErrorResult = { success: boolean; error: string };
 
@@ -22,24 +23,13 @@ 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,
 		isLoading: teamInfoLoading,
 		isError: teamInfoError,
-	} = useQuery({
-		queryKey: ['teamId', teamId],
-		queryFn: async () => teamsInfoEndpoint({ teamId }),
-		placeholderData: keepPreviousData,
-		retry: (_, error: APIErrorResult) => error?.error === 'unauthorized' && false,
-	});
-
-	const { data: userTeams, isLoading: userTeamsLoading } = useQuery({
-		queryKey: ['userId', userId],
-		queryFn: async () => userTeamsListEndpoint({ userId }),
-	});
+	} = useTeamInfoEndpoint(teamId, (_, error) => (error as unknown as APIErrorResult)?.error !== 'unauthorized');
+
+	const { data: userTeams, isLoading: userTeamsLoading } = useUserTeams(userId);
 
 	const userBelongsToTeam = userTeams?.teams?.find((team) => team._id === teamId) || false;
 	const isTeamPublic = teamInfoData?.teamInfo.type === TEAM_TYPE.PUBLIC;

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 { useTeamInfoEndpoint } from '../../../../hooks/useTeamInfoEndpoint';
 import { goToRoomById } from '../../../../lib/utils/goToRoomById';
+import { useUserTeams } from '../../hooks/useUserTeams';
 
 type APIErrorResult = { success: boolean; error: string };
 
@@ -27,24 +28,13 @@ 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,
 		isLoading: teamInfoLoading,
 		isError: teamInfoError,
-	} = useQuery({
-		queryKey: ['teamId', teamId],
-		queryFn: async () => teamsInfoEndpoint({ teamId }),
-		placeholderData: keepPreviousData,
-		retry: (_, error: APIErrorResult) => error?.error === 'unauthorized' && false,
-	});
+	} = useTeamInfoEndpoint(teamId, (_, 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 } = useUserTeams(userId);
 
 	const userBelongsToTeam = Boolean(userTeams?.teams?.find((team) => team._id === teamId)) || false;
 	const isPublicTeam = teamInfoData?.teamInfo.type === TEAM_TYPE.PUBLIC;

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 { useTeamInfoEndpoint } from '../../../../../hooks/useTeamInfoEndpoint';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import { useE2EEState } from '../../../hooks/useE2EEState';
 
@@ -17,16 +17,9 @@ 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: teamInfoData } = useTeamInfoEndpoint(teamId);
 
 	const canCreateTeamChannel = usePermission('create-team-channel', teamInfoData?.teamInfo.roomId);
 	const canCreateTeamGroup = usePermission('create-team-group', teamInfoData?.teamInfo.roomId);

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

@@ -0,0 +1,13 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import { teamsQueryKeys } from '../../../lib/queryKeys';
+
+export const useUserTeams = (userId: string) => {
+	const userTeamsListEndpoint = useEndpoint('GET', '/v1/users.listTeams');
+
+	return useQuery({
+		queryKey: teamsQueryKeys.listUserTeams(userId),
+		queryFn: async () => userTeamsListEndpoint({ userId }),
+	});
+};