Skip to content

Commit 34c5f88

Browse files
tassoevantassoevan
authored
chore: Remove useEndpointData (#36468)
1 parent a1ac925 commit 34c5f88

File tree

31 files changed

+539
-505
lines changed

31 files changed

+539
-505
lines changed

‎apps/meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import type { DeviceManagementSession, DeviceManagementPopulatedSession, Serialized } from '@rocket.chat/core-typings';
22
import { Box, Pagination, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
33
import type { PaginatedResult } from '@rocket.chat/rest-typings';
4+
import type { UseQueryResult } from '@tanstack/react-query';
45
import type { ComponentProps, ReactElement } from 'react';
56
import { useTranslation } from 'react-i18next';
67

7-
import { AsyncStatePhase } from '../../../lib/asyncState';
88
import GenericNoResults from '../../GenericNoResults/GenericNoResults';
99
import { GenericTable, GenericTableHeader, GenericTableBody, GenericTableLoadingTable } from '../../GenericTable';
1010

11-
type DeviceManagementTableProps<T> = {
12-
data?: Serialized<PaginatedResult<{ sessions: T[] }>>;
13-
phase?: Partial<AsyncStatePhase>;
14-
error?: Error;
15-
reload?: () => void;
11+
// FIXME: this tight coupling with the query result is not ideal; it indicates visual components should not be tightly
12+
// coupled with data fetching logic.
13+
type DeviceManagementTableProps<T> = UseQueryResult<PaginatedResult<{ sessions: Serialized<T>[] }>> & {
1614
headers: (ReactElement | false)[];
1715
renderRow: (data: Serialized<T>) => ReactElement;
1816
current?: ComponentProps<typeof Pagination>['current'];
@@ -24,10 +22,12 @@ type DeviceManagementTableProps<T> = {
2422

2523
// TODO: Missing error state
2624
const DeviceManagementTable = <T extends DeviceManagementSession | DeviceManagementPopulatedSession>({
27-
data,
28-
phase,
25+
isPending,
26+
isError,
2927
error,
30-
reload,
28+
isSuccess,
29+
data,
30+
refetch,
3131
headers,
3232
renderRow,
3333
current,
@@ -38,16 +38,16 @@ const DeviceManagementTable = <T extends DeviceManagementSession | DeviceManagem
3838
}: DeviceManagementTableProps<T>): ReactElement => {
3939
const { t } = useTranslation();
4040

41-
if (!data && phase === AsyncStatePhase.REJECTED) {
41+
if (isError) {
4242
return (
4343
<Box display='flex' justifyContent='center' alignItems='center' height='100%'>
4444
<States>
4545
<StatesIcon name='warning' variation='danger' />
4646
<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
4747
<StatesSubtitle>{t('We_Could_not_retrive_any_data')}</StatesSubtitle>
48-
<StatesSubtitle>{error?.message}</StatesSubtitle>
48+
<StatesSubtitle>{error.message}</StatesSubtitle>
4949
<StatesActions>
50-
<StatesAction onClick={reload}>{t('Retry')}</StatesAction>
50+
<StatesAction onClick={refetch}>{t('Retry')}</StatesAction>
5151
</StatesActions>
5252
</States>
5353
</Box>
@@ -56,15 +56,15 @@ const DeviceManagementTable = <T extends DeviceManagementSession | DeviceManagem
5656

5757
return (
5858
<>
59-
{data?.sessions.length === 0 && phase === AsyncStatePhase.RESOLVED && <GenericNoResults />}
59+
{data?.sessions.length === 0 && isSuccess && <GenericNoResults />}
6060
<GenericTable>
6161
{data?.sessions && data.sessions.length > 0 && headers && <GenericTableHeader>{headers}</GenericTableHeader>}
6262
<GenericTableBody>
63-
{phase === AsyncStatePhase.LOADING && <GenericTableLoadingTable headerCells={headers.filter(Boolean).length} />}
64-
{phase === AsyncStatePhase.RESOLVED && data?.sessions && data.sessions.map(renderRow)}
63+
{isPending && <GenericTableLoadingTable headerCells={headers.filter(Boolean).length} />}
64+
{isSuccess && data?.sessions && data.sessions.map(renderRow)}
6565
</GenericTableBody>
6666
</GenericTable>
67-
{phase === AsyncStatePhase.RESOLVED && (
67+
{isSuccess && (
6868
<Pagination
6969
divider
7070
current={current}

‎apps/meteor/client/hooks/useEndpointData.ts‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎apps/meteor/client/lib/queryKeys.ts‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { IMessage, IRoom } from '@rocket.chat/core-typings';
1+
import type { ILivechatDepartment, IMessage, IRoom, ITeam, IUser } from '@rocket.chat/core-typings';
22

33
export const roomsQueryKeys = {
44
all: ['rooms'] as const,
@@ -25,3 +25,78 @@ export const rolesQueryKeys = {
2525
all: ['roles'] as const,
2626
userRoles: () => [...rolesQueryKeys.all, 'user-roles'] as const,
2727
};
28+
29+
export const omnichannelQueryKeys = {
30+
all: ['omnichannel'] as const,
31+
department: (id: string) => [...omnichannelQueryKeys.all, 'department', id] as const,
32+
extensions: (
33+
params:
34+
| {
35+
userId: string;
36+
type: 'free' | 'allocated' | 'available';
37+
}
38+
| {
39+
username: string;
40+
type: 'free' | 'allocated' | 'available';
41+
},
42+
) => [...omnichannelQueryKeys.all, 'extensions', params] as const,
43+
livechat: {
44+
appearance: () => [...omnichannelQueryKeys.all, 'livechat', 'appearance'] as const,
45+
customFields: () => [...omnichannelQueryKeys.all, 'livechat', 'custom-fields'] as const,
46+
},
47+
visitorInfo: (uid: string) => [...omnichannelQueryKeys.all, 'visitor-info', uid] as const,
48+
analytics: {
49+
all: (departmentId: ILivechatDepartment['_id']) => [...omnichannelQueryKeys.all, 'analytics', departmentId] as const,
50+
agentsStatus: (departmentId: ILivechatDepartment['_id']) =>
51+
[...omnichannelQueryKeys.analytics.all(departmentId), 'agents-status'] as const,
52+
timings: (departmentId: ILivechatDepartment['_id'], dateRange: { start: string; end: string }) =>
53+
[...omnichannelQueryKeys.analytics.all(departmentId), 'timings', dateRange] as const,
54+
chats: (departmentId: ILivechatDepartment['_id'], dateRange: { start: string; end: string }) =>
55+
[...omnichannelQueryKeys.analytics.all(departmentId), 'chats', dateRange] as const,
56+
chatsPerAgent: (departmentId: ILivechatDepartment['_id'], dateRange: { start: string; end: string }) =>
57+
[...omnichannelQueryKeys.analytics.all(departmentId), 'chats-per-agent', dateRange] as const,
58+
chatsPerDepartment: (departmentId: ILivechatDepartment['_id'], dateRange: { start: string; end: string }) =>
59+
[...omnichannelQueryKeys.analytics.all(departmentId), 'chats-per-department', dateRange] as const,
60+
agentsProductivityTotals: (departmentId: ILivechatDepartment['_id'], dateRange: { start: string; end: string }) =>
61+
[...omnichannelQueryKeys.analytics.all(departmentId), 'agents-productivity', dateRange] as const,
62+
chatsTotals: (departmentId: ILivechatDepartment['_id'], dateRange: { start: string; end: string }) =>
63+
[...omnichannelQueryKeys.analytics.all(departmentId), 'chats-totals', dateRange] as const,
64+
conversationTotals: (departmentId: ILivechatDepartment['_id'], dateRange: { start: string; end: string }) =>
65+
[...omnichannelQueryKeys.analytics.all(departmentId), 'conversation-totals', dateRange] as const,
66+
productivityTotals: (departmentId: ILivechatDepartment['_id'], dateRange: { start: string; end: string }) =>
67+
[...omnichannelQueryKeys.analytics.all(departmentId), 'productivity-totals', dateRange] as const,
68+
},
69+
};
70+
71+
export const deviceManagementQueryKeys = {
72+
all: ['device-management'] as const,
73+
userSessions: (params: { sort?: string; count?: number; offset?: number }) =>
74+
[...deviceManagementQueryKeys.all, 'users-sessions', params] as const,
75+
sessions: (params: { sort?: string; count?: number; offset?: number }) =>
76+
[...deviceManagementQueryKeys.all, 'all-users-sessions', params] as const,
77+
sessionInfo: (sessionId: string) => [...deviceManagementQueryKeys.all, 'session-info', sessionId] as const,
78+
};
79+
80+
export const miscQueryKeys = {
81+
personalAccessTokens: ['personal-access-tokens'] as const,
82+
lookup: (endpoint: string) => ['lookup', endpoint] as const,
83+
autotranslateSupportedLanguages: (targetLanguage: string) => ['autotranslate', 'supported-languages', targetLanguage] as const,
84+
};
85+
86+
export const voipQueryKeys = {
87+
all: ['voip'] as const,
88+
room: (rid: IRoom['_id'], token: string) => [...voipQueryKeys.all, 'room', rid, token] as const,
89+
};
90+
91+
export const usersQueryKeys = {
92+
all: ['users'] as const,
93+
userInfo: ({ uid, username }: { uid?: IUser['_id']; username?: IUser['username'] }) =>
94+
[...usersQueryKeys.all, 'info', { uid, username }] as const,
95+
};
96+
97+
export const teamsQueryKeys = {
98+
all: ['teams'] as const,
99+
team: (teamId: ITeam['_id']) => [...teamsQueryKeys.all, teamId] as const,
100+
roomsOfUser: (teamId: ITeam['_id'], userId: IUser['_id'], options?: { canUserDelete: boolean }) =>
101+
[...teamsQueryKeys.team(teamId), 'rooms-of-user', userId, options] as const,
102+
};

‎apps/meteor/client/omnichannel/cannedResponses/CannedResponseEditWithDepartmentData.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,37 @@
11
import type { IOmnichannelCannedResponse, Serialized } from '@rocket.chat/core-typings';
22
import { Callout } from '@rocket.chat/fuselage';
3+
import { useEndpoint } from '@rocket.chat/ui-contexts';
4+
import { useQuery } from '@tanstack/react-query';
35
import { useMemo } from 'react';
46
import { useTranslation } from 'react-i18next';
57

68
import CannedResponseEdit from './CannedResponseEdit';
79
import { FormSkeleton } from '../../components/Skeleton';
8-
import { AsyncStatePhase } from '../../hooks/useAsyncState';
9-
import { useEndpointData } from '../../hooks/useEndpointData';
10+
import { omnichannelQueryKeys } from '../../lib/queryKeys';
1011

1112
const CannedResponseEditWithDepartmentData = ({ cannedResponseData }: { cannedResponseData: Serialized<IOmnichannelCannedResponse> }) => {
1213
const departmentId = useMemo(() => cannedResponseData?.departmentId, [cannedResponseData]) as string;
13-
const { value: departmentData, phase: state, error } = useEndpointData('/v1/livechat/department/:_id', { keys: { _id: departmentId } });
14+
15+
const getDepartment = useEndpoint('GET', '/v1/livechat/department/:_id', { _id: departmentId });
16+
const {
17+
data: departmentData,
18+
isPending,
19+
isError,
20+
} = useQuery({
21+
queryKey: omnichannelQueryKeys.department(departmentId),
22+
queryFn: async () => {
23+
const { department } = await getDepartment({});
24+
return department;
25+
},
26+
});
1427

1528
const { t } = useTranslation();
1629

17-
if (state === AsyncStatePhase.LOADING) {
30+
if (isPending) {
1831
return <FormSkeleton />;
1932
}
2033

21-
if (error) {
34+
if (isError) {
2235
return (
2336
<Callout m={16} type='danger'>
2437
{t('Not_Available')}

‎apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
2+
import { useEndpoint } from '@rocket.chat/ui-contexts';
3+
import { useQuery } from '@tanstack/react-query';
24
import type { ReactElement } from 'react';
35
import { useMemo } from 'react';
46
import { useTranslation } from 'react-i18next';
@@ -8,7 +10,7 @@ import { GenericTableHeaderCell } from '../../../../components/GenericTable';
810
import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
911
import { useSort } from '../../../../components/GenericTable/hooks/useSort';
1012
import DeviceManagementTable from '../../../../components/deviceManagement/DeviceManagementTable';
11-
import { useEndpointData } from '../../../../hooks/useEndpointData';
13+
import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
1214

1315
const sortMapping = {
1416
client: 'device.name',
@@ -30,7 +32,11 @@ const DeviceManagementAccountTable = (): ReactElement => {
3032
[itemsPerPage, current, sortBy, sortDirection],
3133
);
3234

33-
const { value: data, phase, error, reload } = useEndpointData('/v1/sessions/list', { params: query });
35+
const listSessions = useEndpoint('GET', '/v1/sessions/list');
36+
const queryResult = useQuery({
37+
queryKey: deviceManagementQueryKeys.userSessions(query),
38+
queryFn: () => listSessions(query),
39+
});
3440

3541
const mediaQuery = useMediaQuery('(min-width: 1024px)');
3642

@@ -53,10 +59,7 @@ const DeviceManagementAccountTable = (): ReactElement => {
5359

5460
return (
5561
<DeviceManagementTable
56-
data={data}
57-
phase={phase}
58-
error={error}
59-
reload={reload}
62+
{...queryResult}
6063
headers={headers}
6164
renderRow={(session): ReactElement => (
6265
<DeviceManagementAccountRow
@@ -66,7 +69,7 @@ const DeviceManagementAccountTable = (): ReactElement => {
6669
deviceType={session.device?.type}
6770
deviceOSName={session.device?.os.name}
6871
loginAt={session.loginAt}
69-
onReload={reload}
72+
onReload={queryResult.refetch}
7073
/>
7174
)}
7275
current={current}

0 commit comments

Comments
 (0)
⚡