Skip to content

Commit

Permalink
feat: Get contacts from contacts.search endpoint (#33573)
Browse files Browse the repository at this point in the history
  • Loading branch information
dougfabris committed Oct 15, 2024
1 parent 047b31d commit 5c221e7
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 }),
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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')}
Expand All @@ -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')}
Expand All @@ -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
Expand All @@ -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>
);
})}
Expand Down
Original file line number Diff line number Diff line change
@@ -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));
};

0 comments on commit 5c221e7

Please sign in to comment.