Replace some occurences of useEndpointData

tassoevan · tassoevan · commit dbf7d6e1ffa3 · 2025-07-17T18:12:11.000-03:00
diff --git a/apps/meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx b/apps/meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx
@@ -1,18 +1,16 @@
 import type { DeviceManagementSession, DeviceManagementPopulatedSession, Serialized } from '@rocket.chat/core-typings';
 import { Box, Pagination, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
 import type { PaginatedResult } from '@rocket.chat/rest-typings';
+import type { UseQueryResult } from '@tanstack/react-query';
 import type { ComponentProps, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { AsyncStatePhase } from '../../../lib/asyncState';
 import GenericNoResults from '../../GenericNoResults/GenericNoResults';
 import { GenericTable, GenericTableHeader, GenericTableBody, GenericTableLoadingTable } from '../../GenericTable';
 
-type DeviceManagementTableProps<T> = {
-	data?: Serialized<PaginatedResult<{ sessions: T[] }>>;
-	phase?: Partial<AsyncStatePhase>;
-	error?: Error;
-	reload?: () => void;
+// FIXME: this tight coupling with the query result is not ideal; it indicates visual components should not be tightly
+// coupled with data fetching logic.
+type DeviceManagementTableProps<T> = UseQueryResult<PaginatedResult<{ sessions: Serialized<T>[] }>> & {
 	headers: (ReactElement | false)[];
 	renderRow: (data: Serialized<T>) => ReactElement;
 	current?: ComponentProps<typeof Pagination>['current'];
@@ -24,10 +22,12 @@ type DeviceManagementTableProps<T> = {
 
 // TODO: Missing error state
 const DeviceManagementTable = <T extends DeviceManagementSession | DeviceManagementPopulatedSession>({
-	data,
-	phase,
+	isPending,
+	isError,
 	error,
-	reload,
+	isSuccess,
+	data,
+	refetch,
 	headers,
 	renderRow,
 	current,
@@ -38,16 +38,16 @@ const DeviceManagementTable = <T extends DeviceManagementSession | DeviceManagem
 }: DeviceManagementTableProps<T>): ReactElement => {
 	const { t } = useTranslation();
 
-	if (!data && phase === AsyncStatePhase.REJECTED) {
+	if (isError) {
 		return (
 			<Box display='flex' justifyContent='center' alignItems='center' height='100%'>
 				<States>
 					<StatesIcon name='warning' variation='danger' />
 					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
 					<StatesSubtitle>{t('We_Could_not_retrive_any_data')}</StatesSubtitle>
-					<StatesSubtitle>{error?.message}</StatesSubtitle>
+					<StatesSubtitle>{error.message}</StatesSubtitle>
 					<StatesActions>
-						<StatesAction onClick={reload}>{t('Retry')}</StatesAction>
+						<StatesAction onClick={refetch}>{t('Retry')}</StatesAction>
 					</StatesActions>
 				</States>
 			</Box>
@@ -56,15 +56,15 @@ const DeviceManagementTable = <T extends DeviceManagementSession | DeviceManagem
 
 	return (
 		<>
-			{data?.sessions.length === 0 && phase === AsyncStatePhase.RESOLVED && <GenericNoResults />}
+			{data?.sessions.length === 0 && isSuccess && <GenericNoResults />}
 			<GenericTable>
 				{data?.sessions && data.sessions.length > 0 && headers && <GenericTableHeader>{headers}</GenericTableHeader>}
 				<GenericTableBody>
-					{phase === AsyncStatePhase.LOADING && <GenericTableLoadingTable headerCells={headers.filter(Boolean).length} />}
-					{phase === AsyncStatePhase.RESOLVED && data?.sessions && data.sessions.map(renderRow)}
+					{isPending && <GenericTableLoadingTable headerCells={headers.filter(Boolean).length} />}
+					{isSuccess && data?.sessions && data.sessions.map(renderRow)}
 				</GenericTableBody>
 			</GenericTable>
-			{phase === AsyncStatePhase.RESOLVED && (
+			{isSuccess && (
 				<Pagination
 					divider
 					current={current}
diff --git a/apps/meteor/client/lib/queryKeys.ts b/apps/meteor/client/lib/queryKeys.ts
@@ -25,3 +25,16 @@ export const rolesQueryKeys = {
 	all: ['roles'] as const,
 	userRoles: () => [...rolesQueryKeys.all, 'user-roles'] as const,
 };
+
+export const omnichannelQueryKeys = {
+	all: ['omnichannel'] as const,
+	department: (id: string) => [...omnichannelQueryKeys.all, 'department', id] as const,
+};
+
+export const deviceManagementQueryKeys = {
+	all: ['device-management'] as const,
+	userSessions: (params: { sort?: string; count?: number; offset?: number }) =>
+		[...deviceManagementQueryKeys.all, 'users-sessions', params] as const,
+	sessions: (params: { sort?: string; count?: number; offset?: number }) =>
+		[...deviceManagementQueryKeys.all, 'all-users-sessions', params] as const,
+};
diff --git a/apps/meteor/client/omnichannel/cannedResponses/CannedResponseEditWithDepartmentData.tsx b/apps/meteor/client/omnichannel/cannedResponses/CannedResponseEditWithDepartmentData.tsx
@@ -1,24 +1,37 @@
 import type { IOmnichannelCannedResponse, Serialized } from '@rocket.chat/core-typings';
 import { Callout } from '@rocket.chat/fuselage';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import CannedResponseEdit from './CannedResponseEdit';
 import { FormSkeleton } from '../../components/Skeleton';
-import { AsyncStatePhase } from '../../hooks/useAsyncState';
-import { useEndpointData } from '../../hooks/useEndpointData';
+import { omnichannelQueryKeys } from '../../lib/queryKeys';
 
 const CannedResponseEditWithDepartmentData = ({ cannedResponseData }: { cannedResponseData: Serialized<IOmnichannelCannedResponse> }) => {
 	const departmentId = useMemo(() => cannedResponseData?.departmentId, [cannedResponseData]) as string;
-	const { value: departmentData, phase: state, error } = useEndpointData('/v1/livechat/department/:_id', { keys: { _id: departmentId } });
+
+	const getDepartment = useEndpoint('GET', '/v1/livechat/department/:_id', { _id: departmentId });
+	const {
+		data: departmentData,
+		isPending,
+		isError,
+	} = useQuery({
+		queryKey: omnichannelQueryKeys.department(departmentId),
+		queryFn: async () => {
+			const { department } = await getDepartment({});
+			return department;
+		},
+	});
 
 	const { t } = useTranslation();
 
-	if (state === AsyncStatePhase.LOADING) {
+	if (isPending) {
 		return <FormSkeleton />;
 	}
 
-	if (error) {
+	if (isError) {
 		return (
 			<Callout m={16} type='danger'>
 				{t('Not_Available')}
diff --git a/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx b/apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx
@@ -1,4 +1,6 @@
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +10,7 @@ import { GenericTableHeaderCell } from '../../../../components/GenericTable';
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 import DeviceManagementTable from '../../../../components/deviceManagement/DeviceManagementTable';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
+import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
 
 const sortMapping = {
 	client: 'device.name',
@@ -30,7 +32,11 @@ const DeviceManagementAccountTable = (): ReactElement => {
 		[itemsPerPage, current, sortBy, sortDirection],
 	);
 
-	const { value: data, phase, error, reload } = useEndpointData('/v1/sessions/list', { params: query });
+	const listSessions = useEndpoint('GET', '/v1/sessions/list');
+	const queryResult = useQuery({
+		queryKey: deviceManagementQueryKeys.userSessions(query),
+		queryFn: () => listSessions(query),
+	});
 
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');
 
@@ -53,10 +59,7 @@ const DeviceManagementAccountTable = (): ReactElement => {
 
 	return (
 		<DeviceManagementTable
-			data={data}
-			phase={phase}
-			error={error}
-			reload={reload}
+			{...queryResult}
 			headers={headers}
 			renderRow={(session): ReactElement => (
 				<DeviceManagementAccountRow
@@ -66,7 +69,7 @@ const DeviceManagementAccountTable = (): ReactElement => {
 					deviceType={session.device?.type}
 					deviceOSName={session.device?.os.name}
 					loginAt={session.loginAt}
-					onReload={reload}
+					onReload={queryResult.refetch}
 				/>
 			)}
 			current={current}
diff --git a/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx b/apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx
@@ -1,7 +1,9 @@
 import type { DeviceManagementPopulatedSession, DeviceManagementSession, Serialized } from '@rocket.chat/core-typings';
 import { useDebouncedValue, useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, MutableRefObject } from 'react';
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DeviceManagementAdminRow from './DeviceManagementAdminRow';
@@ -10,7 +12,7 @@ import { GenericTableHeaderCell } from '../../../../components/GenericTable';
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 import DeviceManagementTable from '../../../../components/deviceManagement/DeviceManagementTable';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
+import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
 
 const sortMapping = {
 	client: 'device.name',
@@ -42,11 +44,13 @@ const DeviceManagementAdminTable = ({ reloadRef }: { reloadRef: MutableRefObject
 		500,
 	);
 
-	const { value: data, phase, error, reload } = useEndpointData('/v1/sessions/list.all', { params: query });
+	const listAllSessions = useEndpoint('GET', '/v1/sessions/list.all');
+	const queryResult = useQuery({
+		queryKey: deviceManagementQueryKeys.sessions(query),
+		queryFn: () => listAllSessions(query),
+	});
 
-	useEffect(() => {
-		reloadRef.current = reload;
-	}, [reloadRef, reload]);
+	reloadRef.current = queryResult.refetch;
 
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');
 
@@ -78,10 +82,7 @@ const DeviceManagementAdminTable = ({ reloadRef }: { reloadRef: MutableRefObject
 		<>
 			<FilterByText placeholder={t('Search_Devices_Users')} value={text} onChange={(event) => setText(event.target.value)} />
 			<DeviceManagementTable
-				data={data}
-				phase={phase}
-				error={error}
-				reload={reload}
+				{...queryResult}
 				headers={headers}
 				renderRow={(session): ReactElement => (
 					<DeviceManagementAdminRow
@@ -94,7 +95,7 @@ const DeviceManagementAdminTable = ({ reloadRef }: { reloadRef: MutableRefObject
 						deviceOSName={session?.device?.os?.name}
 						rcVersion={session?.device?.version}
 						loginAt={session.loginAt}
-						onReload={reload}
+						onReload={queryResult.refetch}
 					/>
 				)}
 				current={current}
