Regression: Fix improper usage of useEndpointData

apps/meteor/client/views/omnichannel/currentChats/hooks/useCurrentChats.ts

@@ -10,6 +10,7 @@ export const useCurrentChats = (query: GETLivechatRoomsParams): UseQueryResult<O
 	const debouncedQuery = useDebouncedValue(query, 500);
 
 	return useQuery(['current-chats', debouncedQuery], () => currentChats(debouncedQuery), {
-		staleTime: Infinity,
+		// TODO: Update this to use an stream of room changes instead of polling
+		cacheTime: 0,
 	});
 };

apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx

@@ -1,9 +1,10 @@
 import { Tabs } from '@rocket.chat/fuselage';
 import { useCurrentRoute, useRoute, useRouteParameter, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import Page from '../../../components/Page';
+import { queryClient } from '../../../lib/queryClient';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import ContextualBar from './ContextualBar';
 import CallTab from './calls/CallTab';
@@ -30,7 +31,7 @@ const OmnichannelDirectoryPage = (): ReactElement => {
 
 	const handleTabClick = useCallback((tab) => (): void => directoryRoute.push({ tab }), [directoryRoute]);
 
-	const [chatReload, setChatReload] = useState();
+	const chatReload = () => queryClient.invalidateQueries({ queryKey: ['current-chats'] });
 
 	const t = useTranslation();
 
@@ -54,9 +55,7 @@ const OmnichannelDirectoryPage = (): ReactElement => {
 					</Tabs.Item>
 				</Tabs>
 				<Page.Content>
-					{(tab === 'contacts' && <ContactTab />) ||
-						(tab === 'chats' && <ChatTab setChatReload={setChatReload} />) ||
-						(tab === 'calls' && <CallTab />)}
+					{(tab === 'contacts' && <ContactTab />) || (tab === 'chats' && <ChatTab />) || (tab === 'calls' && <CallTab />)}
 				</Page.Content>
 			</Page>
 			<ContextualBar chatReload={chatReload} />

apps/meteor/client/views/omnichannel/directory/chats/ChatTab.tsx

@@ -1,17 +1,15 @@
 import { usePermission } from '@rocket.chat/ui-contexts';
-import type { ReactElement, SetStateAction, Dispatch } from 'react';
+import type { ReactElement } from 'react';
 import React from 'react';
 
 import NotAuthorizedPage from '../../../notAuthorized/NotAuthorizedPage';
 import ChatTable from './ChatTable';
 
-// TODO Check if I need to type the setstateaction params, if I should do:
-// { setChatReload: Dispatch<SetStateAction<(param: () => void) => void>> }
-const ChatTab = (props: { setChatReload: Dispatch<SetStateAction<any>> }): ReactElement => {
+const ChatTab = (): ReactElement => {
 	const hasAccess = usePermission('view-l-room');
 
 	if (hasAccess) {
-		return <ChatTable {...props} />;
+		return <ChatTable />;
 	}
 
 	return <NotAuthorizedPage />;

apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx

@@ -3,12 +3,12 @@ import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hoo
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import { Meteor } from 'meteor/meteor';
 import moment from 'moment';
-import type { FC, ReactElement, Dispatch, SetStateAction } from 'react';
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import type { FC, ReactElement } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 
 import FilterByText from '../../../../components/FilterByText';
-import GenericTable from '../../../../components/GenericTable';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
+import GenericTable, { GenericTableLoadingTable } from '../../../../components/GenericTable';
+import { useCurrentChats } from '../../currentChats/hooks/useCurrentChats';
 
 const useQuery = (
 	{
@@ -42,7 +42,7 @@ const useQuery = (
 		[column, current, direction, itemsPerPage, userIdLoggedIn, text],
 	);
 
-const ChatTable: FC<{ setChatReload: Dispatch<SetStateAction<any>> }> = ({ setChatReload }) => {
+const ChatTable: FC = () => {
 	const [params, setParams] = useState<{ text?: string; current: number; itemsPerPage: 25 | 50 | 100 }>({
 		text: '',
 		current: 0,
@@ -74,12 +74,6 @@ const ChatTable: FC<{ setChatReload: Dispatch<SetStateAction<any>> }> = ({ setCh
 		}),
 	);
 
-	const { value: data, reload } = useEndpointData('/v1/livechat/rooms', query as any); // TODO: Check the typing for the livechat/rooms endpoint as it seems wrong
-
-	useEffect(() => {
-		setChatReload?.(() => reload);
-	}, [reload, setChatReload]);
-
 	const header = useMemo(
 		() =>
 			[
@@ -167,12 +161,21 @@ const ChatTable: FC<{ setChatReload: Dispatch<SetStateAction<any>> }> = ({ setCh
 		[onRowClick],
 	);
 
+	const result = useCurrentChats(query);
+
+	if (result.isLoading) {
+		return <GenericTableLoadingTable headerCells={6} />;
+	}
+	if (result.error) {
+		return <Box mbs='x16'>{t('Something_went_wrong')}</Box>;
+	}
+
 	return (
 		<GenericTable
 			header={header}
 			renderRow={renderRow}
-			results={data?.rooms}
-			total={data?.total}
+			results={result.data?.rooms}
+			total={result.data?.total}
 			setParams={setParams}
 			params={params}
 			renderFilter={({ onChange, ...props }: any): ReactElement => <FilterByText onChange={onChange} {...props} />}