fix: Omnichannel contact table

apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx

@@ -18,10 +18,9 @@ import {
 import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 import { useIsCallReady } from '../../../../contexts/CallContext';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
 import { useFormatDate } from '../../../../hooks/useFormatDate';
-import { AsyncStatePhase } from '../../../../lib/asyncState';
 import { CallDialpadButton } from '../components/CallDialpadButton';
+import { useCurrentContacts } from './hooks/useCurrentContacts';
 
 function ContactTable(): ReactElement {
 	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
@@ -64,8 +63,13 @@ function ContactTable(): ReactElement {
 			}),
 	);
 
-	const { reload, ...result } = useEndpointData('/v1/livechat/visitors.search', { params: query });
-
+	const {
+		data: contactResult,
+		isLoading: isLoadingContacts,
+		isError: contanctTableError,
+		isSuccess,
+		refetch: contactReload,
+	} = useCurrentContacts(query);
 	return (
 		<>
 			<FilterByText
@@ -74,6 +78,7 @@ function ContactTable(): ReactElement {
 				onButtonClick={onButtonNewClick}
 				onChange={({ text }): void => setTerm(text)}
 			/>
+
 			<GenericTable>
 				<GenericTableHeader>
 					<GenericTableHeaderCell
@@ -112,8 +117,8 @@ function ContactTable(): ReactElement {
 					<GenericTableHeaderCell key='call' width={44} />
 				</GenericTableHeader>
 				<GenericTableBody>
-					{result.phase === AsyncStatePhase.RESOLVED &&
-						result.value.visitors.map(({ _id, username, fname, name, visitorEmails, phone, lastChat }) => {
+					{contactResult &&
+						contactResult.visitors.map(({ _id, username, fname, name, visitorEmails, phone, lastChat }) => {
 							const phoneNumber = (phone?.length && phone[0].phoneNumber) || '';
 							const visitorEmail = visitorEmails?.length && visitorEmails[0].address;
 
@@ -137,29 +142,30 @@ function ContactTable(): ReactElement {
 								</GenericTableRow>
 							);
 						})}
-					{result.phase === AsyncStatePhase.LOADING && <GenericTableLoadingTable headerCells={6} />}
+					{isLoadingContacts && <GenericTableLoadingTable headerCells={6} />}
+					{contanctTableError && <Box mbs='x16'>{t('Something_went_wrong')}</Box>}
 				</GenericTableBody>
 			</GenericTable>
 
-			{result.phase === AsyncStatePhase.REJECTED && (
+			{contanctTableError && (
 				<Box mbs='x20'>
 					<States>
 						<StatesIcon variation='danger' name='circle-exclamation' />
 						<StatesTitle>{t('Connection_error')}</StatesTitle>
 						<StatesActions>
-							<StatesAction onClick={reload}>
+							<StatesAction onClick={() => contactReload()}>
 								<Icon mie='x4' size='x20' name='reload' />
 								{t('Reload_page')}
 							</StatesAction>
 						</StatesActions>
 					</States>
 				</Box>
 			)}
-			{result.phase === AsyncStatePhase.RESOLVED && (
+			{isSuccess && (
 				<Pagination
 					current={current}
 					itemsPerPage={itemsPerPage}
-					count={result.value.total}
+					count={contactResult.total}
 					onSetItemsPerPage={setItemsPerPage}
 					onSetCurrent={setCurrent}
 					{...paginationProps}

apps/meteor/client/views/omnichannel/directory/contacts/contextualBar/ContactNewEdit.tsx

@@ -14,6 +14,7 @@ import { createToken } from '../../../../../lib/utils/createToken';
 import { useFormsSubscription } from '../../../additionalForms';
 import { FormSkeleton } from '../../components/FormSkeleton';
 import { useCustomFieldsMetadata } from '../../hooks/useCustomFieldsMetadata';
+import { useQueryClient } from '@tanstack/react-query';
 
 type ContactNewEditProps = {
 	id: string;
@@ -59,6 +60,7 @@ const getInitialValues = (data: ContactNewEditProps['data']): ContactFormData =>
 const ContactNewEdit = ({ id, data, close }: ContactNewEditProps): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
 
 	const canViewCustomFields = (): boolean =>
 		hasAtLeastOnePermission(['view-livechat-room-customfields', 'edit-livechat-room-customfields']);
@@ -159,6 +161,7 @@ const ContactNewEdit = ({ id, data, close }: ContactNewEditProps): ReactElement
 		try {
 			await saveContact(payload);
 			dispatchToastMessage({ type: 'success', message: t('Saved') });
+			await queryClient.invalidateQueries({ queryKey: ['current-contacts'] });
 			close();
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });

apps/meteor/client/views/omnichannel/directory/contacts/hooks/useCurrentContacts.ts

@@ -0,0 +1,15 @@
+import type { GETLivechatRoomsParams, OperationResult } from '@rocket.chat/rest-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+export const useCurrentContacts = (
+	query: GETLivechatRoomsParams,
+): UseQueryResult<OperationResult<'GET', '/v1/livechat/visitors.search'>> => {
+	const currentContacts = useEndpoint('GET', '/v1/livechat/visitors.search');
+
+	return useQuery(['current-contacts', query], () => currentContacts(query), {
+		// TODO: Update this to use an stream of room changes instead of polling
+		cacheTime: 0,
+	});
+};