feat: Get contacts from contacts.search endpoint (#33573)

RocketChat · Oct 15, 2024 · c0910ce · c0910ce
1 parent d90f561
commit c0910ce
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 25 deletions.
diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
@@ -2,7 +2,6 @@ import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitl
 import { useDebouncedState, useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import { hashQueryKey } from '@tanstack/react-query';
-import type { ReactElement } from 'react';
 import React, { useMemo, useState } from 'react';
 
 import FilterByText from '../../../../components/FilterByText';
@@ -24,19 +23,19 @@ import { parseOutboundPhoneNumber } from '../../../../lib/voip/parseOutboundPhon
 import { CallDialpadButton } from '../components/CallDialpadButton';
 import { useCurrentContacts } from './hooks/useCurrentContacts';
 
-function ContactTable(): ReactElement {
+function ContactTable() {
+	const t = useTranslation();
+
 	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
-	const { sortBy, sortDirection, setSort } = useSort<'username' | 'phone' | 'name' | 'visitorEmails.address' | 'lastChat.ts'>('username');
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'phone' | 'visitorEmails.address' | 'lastChat.ts'>('name');
 	const isCallReady = useIsCallReady();
 
 	const [term, setTerm] = useDebouncedState('', 500);
 
-	const t = useTranslation();
-
 	const query = useDebouncedValue(
 		useMemo(
 			() => ({
-				term,
+				searchText: term,
 				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
 				...(itemsPerPage && { count: itemsPerPage }),
 				...(current && { offset: current }),
@@ -72,9 +71,6 @@ function ContactTable(): ReactElement {
 
 	const headers = (
 		<>
-			<GenericTableHeaderCell key='username' direction={sortDirection} active={sortBy === 'username'} onClick={setSort} sort='username'>
-				{t('Username')}
-			</GenericTableHeaderCell>
 			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
 				{t('Name')}
 			</GenericTableHeaderCell>
@@ -105,7 +101,7 @@ function ContactTable(): ReactElement {
 
 	return (
 		<>
-			{((isSuccess && data?.visitors.length > 0) || queryHasChanged) && (
+			{((isSuccess && data?.contacts.length > 0) || queryHasChanged) && (
 				<FilterByText onChange={setTerm}>
 					<Button onClick={onButtonNewClick} primary>
 						{t('New_contact')}
@@ -120,8 +116,8 @@ function ContactTable(): ReactElement {
 					</GenericTableBody>
 				</GenericTable>
 			)}
-			{isSuccess && data?.visitors.length === 0 && queryHasChanged && <GenericNoResults />}
-			{isSuccess && data?.visitors.length === 0 && !queryHasChanged && (
+			{isSuccess && data?.contacts.length === 0 && queryHasChanged && <GenericNoResults />}
+			{isSuccess && data?.contacts.length === 0 && !queryHasChanged && (
 				<GenericNoResults
 					icon='user-plus'
 					title={t('No_contacts_yet')}
@@ -132,14 +128,14 @@ function ContactTable(): ReactElement {
 					linkText={t('Learn_more_about_contacts')}
 				/>
 			)}
-			{isSuccess && data?.visitors.length > 0 && (
+			{isSuccess && data?.contacts.length > 0 && (
 				<>
 					<GenericTable>
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
-							{data?.visitors.map(({ _id, username, fname, name, visitorEmails, phone, lastChat }) => {
-								const phoneNumber = (phone?.length && phone[0].phoneNumber) || '';
-								const visitorEmail = visitorEmails?.length && visitorEmails[0].address;
+							{data?.contacts.map(({ _id, name, emails, phones, lastChat }) => {
+								const phoneNumber = phones?.length && phones[0].phoneNumber;
+								const visitorEmail = emails?.length && emails[0].address;
 
 								return (
 									<GenericTableRow
@@ -152,12 +148,15 @@ function ContactTable(): ReactElement {
 										rcx-show-call-button-on-hover
 										onClick={onRowClick(_id)}
 									>
-										<GenericTableCell withTruncatedText>{username}</GenericTableCell>
-										<GenericTableCell withTruncatedText>{parseOutboundPhoneNumber(fname || name)}</GenericTableCell>
-										<GenericTableCell withTruncatedText>{parseOutboundPhoneNumber(phoneNumber)}</GenericTableCell>
-										<GenericTableCell withTruncatedText>{visitorEmail}</GenericTableCell>
+										<GenericTableCell withTruncatedText>{name}</GenericTableCell>
+										<GenericTableCell withTruncatedText>{phoneNumber ? parseOutboundPhoneNumber(phoneNumber) : undefined}</GenericTableCell>
+										<GenericTableCell withTruncatedText>{visitorEmail || undefined}</GenericTableCell>
 										<GenericTableCell withTruncatedText>{lastChat && formatDate(lastChat.ts)}</GenericTableCell>
-										<GenericTableCell>{isCallReady && <CallDialpadButton phoneNumber={phoneNumber} />}</GenericTableCell>
+										{isCallReady && phoneNumber && (
+											<GenericTableCell>
+												<CallDialpadButton phoneNumber={phoneNumber} />
+											</GenericTableCell>
+										)}
 									</GenericTableRow>
 								);
 							})}

diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/hooks/useCurrentContacts.ts b/apps/meteor/client/views/omnichannel/directory/contacts/hooks/useCurrentContacts.ts
@@ -1,12 +1,14 @@
-import type { GETLivechatRoomsParams, OperationResult } from '@rocket.chat/rest-typings';
+import type { OperationResult, PaginatedRequest } 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');
+	query: PaginatedRequest<{
+		searchText: string;
+	}>,
+): UseQueryResult<OperationResult<'GET', '/v1/omnichannel/contacts.search'>> => {
+	const currentContacts = useEndpoint('GET', '/v1/omnichannel/contacts.search');
 
 	return useQuery(['current-contacts', query], () => currentContacts(query));
 };