chore: get contact channels from new endpoint [SCI-142]

RocketChat · Nov 4, 2024 · 0c281a5 · 0c281a5
1 parent 0cfd567
commit 0c281a5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 21 deletions.
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx b/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx
@@ -118,7 +118,7 @@ const ContactInfo = ({ contact, onClose }: ContactInfoProps) => {
 					customFieldEntries={customFieldEntries}
 				/>
 			)}
-			{context === 'channels' && <ContactInfoChannels channels={contact?.channels} />}
+			{context === 'channels' && <ContactInfoChannels contactId={contact?._id} />}
 			{context === 'history' && showContactHistory && <ContactInfoHistory contact={contact} />}
 		</>
 	);

diff --git a/...eor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx b/...eor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx
@@ -1,35 +1,57 @@
-import type { ILivechatContactChannel, Serialized } from '@rocket.chat/core-typings';
-import { Box } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ILivechatContact } from '@rocket.chat/core-typings';
+import { Box, States, StatesIcon, StatesTitle, Throbber } from '@rocket.chat/fuselage';
+import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import React from 'react';
+import { Virtuoso } from 'react-virtuoso';
 
-import { ContextualbarEmptyContent, ContextualbarScrollableContent } from '../../../../../components/Contextualbar';
+import { ContextualbarContent, ContextualbarEmptyContent } from '../../../../../components/Contextualbar';
+import { VirtuosoScrollbars } from '../../../../../components/CustomScrollbars';
 import ContactInfoChannelsItem from './ContactInfoChannelsItem';
 
 type ContactInfoChannelsProps = {
-	channels?: Serialized<ILivechatContactChannel>[];
+	contactId: ILivechatContact['_id'];
 };
 
-const ContactInfoChannels = ({ channels }: ContactInfoChannelsProps) => {
+const ContactInfoChannels = ({ contactId }: ContactInfoChannelsProps) => {
 	const t = useTranslation();
 
-	if (!channels || channels.length === 0) {
-		return <ContextualbarEmptyContent icon='balloon' title={t('No_channels_yet')} subtitle={t('No_channels_yet_description')} />;
-	}
+	const getContactChannels = useEndpoint('GET', '/v1/omnichannel/contacts.channels');
+	const { data, isError, isLoading } = useQuery(['getContactChannels', contactId], () => getContactChannels({ contactId }));
 
 	return (
-		<>
-			<Box pbs={24} pis={24} mbe={8} fontScale='p2m'>
-				{t('Last_contacts')}
-			</Box>
-			<ContextualbarScrollableContent p={0}>
-				<Box>
-					{channels.map((channel) => (
-						<ContactInfoChannelsItem key={channel.visitorId} {...channel} />
-					))}
+		<ContextualbarContent paddingInline={0}>
+			{isLoading && (
+				<Box pi={24} pb={12}>
+					<Throbber size='x12' />
 				</Box>
-			</ContextualbarScrollableContent>
-		</>
+			)}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+				</States>
+			)}
+			{data?.channels?.length === 0 && (
+				<ContextualbarEmptyContent icon='balloon' title={t('No_channels_yet')} subtitle={t('No_channels_yet_description')} />
+			)}
+			{!isError && data?.channels && data.channels.length > 0 && (
+				<>
+					<Box is='span' fontScale='p2' pbs={24} pis={24} mbe={8}>
+						{t('Last_contacts')}
+					</Box>
+					<Box role='list' flexGrow={1} flexShrink={1} overflow='hidden' display='flex'>
+						<Virtuoso
+							totalCount={data.channels.length}
+							overscan={25}
+							data={data?.channels}
+							components={{ Scroller: VirtuosoScrollbars }}
+							itemContent={(_, data) => <ContactInfoChannelsItem key={data.visitorId} {...data} />}
+						/>
+					</Box>
+				</>
+			)}
+		</ContextualbarContent>
 	);
 };