diff --git a/apps/meteor/client/components/GenericTable/V2/GenericTable.tsx b/apps/meteor/client/components/GenericTable/V2/GenericTable.tsx index c4c690674bcc..5b99249e3b33 100644 --- a/apps/meteor/client/components/GenericTable/V2/GenericTable.tsx +++ b/apps/meteor/client/components/GenericTable/V2/GenericTable.tsx @@ -1,5 +1,5 @@ import { Box, Table } from '@rocket.chat/fuselage'; -import type { ReactNode } from 'react'; +import type { ReactNode, TableHTMLAttributes } from 'react'; import React, { forwardRef } from 'react'; import ScrollableContentWrapper from '../../ScrollableContentWrapper'; @@ -7,13 +7,14 @@ import ScrollableContentWrapper from '../../ScrollableContentWrapper'; type GenericTableProps = { fixed?: boolean; children: ReactNode; -}; +} & TableHTMLAttributes; -export const GenericTable = forwardRef(function GenericTable({ fixed = true, children }, ref) { +export const GenericTable = forwardRef(function GenericTable({ fixed = true, children, ...props }, ref) { return ( - + {/* TODO: Fix fuselage */} +
{children}
diff --git a/apps/meteor/client/views/omnichannel/departments/ArchivedDepartmentsPageWithData.tsx b/apps/meteor/client/views/omnichannel/departments/ArchivedDepartmentsPageWithData.tsx index 8164a112d16a..e63bf39f3be9 100644 --- a/apps/meteor/client/views/omnichannel/departments/ArchivedDepartmentsPageWithData.tsx +++ b/apps/meteor/client/views/omnichannel/departments/ArchivedDepartmentsPageWithData.tsx @@ -3,7 +3,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; import { useEndpoint } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; import type { ReactElement } from 'react'; -import React, { useMemo, useState } from 'react'; +import React, { useState } from 'react'; import FilterByText from '../../../components/FilterByText'; import { usePagination } from '../../../components/GenericTable/hooks/usePagination'; @@ -13,27 +13,22 @@ import DepartmentsTable from './DepartmentsTable'; const ArchivedDepartmentsPageWithData = (): ReactElement => { const [text, setText] = useState(''); + const [debouncedText = ''] = useDebouncedValue(text, 500); const pagination = usePagination(); const sort = useSort<'name' | 'email' | 'active'>('name'); - const query = useDebouncedValue( - useMemo(() => { - return { - onlyMyDepartments: 'true' as const, - text, - sort: JSON.stringify({ [sort.sortBy]: sort.sortDirection === 'asc' ? 1 : -1 }), - ...(pagination.current && { offset: pagination.current }), - ...(pagination.itemsPerPage && { count: pagination.itemsPerPage }), - fields: JSON.stringify({ name: 1, username: 1, emails: 1, avatarETag: 1 }), - }; - }, [pagination, sort.sortBy, sort.sortDirection, text]), - 500, - ); - const getArchivedDepartments = useEndpoint('GET', '/v1/livechat/departments/archived'); - const { data, isLoading } = useQuery(['omnichannel', 'departments', 'archived', query], async () => getArchivedDepartments(query)); + const { data, isLoading } = useQuery(['omnichannel', 'departments', 'archived', debouncedText, pagination, sort], async () => + getArchivedDepartments({ + onlyMyDepartments: 'true' as const, + text, + sort: JSON.stringify({ [sort.sortBy]: sort.sortDirection === 'asc' ? 1 : -1 }), + ...(pagination.current && { offset: pagination.current }), + ...(pagination.itemsPerPage && { count: pagination.itemsPerPage }), + }), + ); const removeButton = (dep: Omit) => ; diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsPageWithData.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsPageWithData.tsx index 773c18453711..fa87d2c3aee6 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentsPageWithData.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsPageWithData.tsx @@ -3,7 +3,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; import { useEndpoint } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; import type { ReactElement } from 'react'; -import React, { useMemo, useState } from 'react'; +import React, { useState } from 'react'; import FilterByText from '../../../components/FilterByText'; import { usePagination } from '../../../components/GenericTable/hooks/usePagination'; @@ -13,34 +13,41 @@ import DepartmentsTable from './DepartmentsTable'; const DepartmentsPageWithData = (): ReactElement => { const [text, setText] = useState(''); - + const [debouncedText = ''] = useDebouncedValue(text, 500); const pagination = usePagination(); const sort = useSort<'name' | 'email' | 'active'>('name'); - const query = useDebouncedValue( - useMemo(() => { - return { - onlyMyDepartments: 'true' as const, - text, + const getDepartments = useEndpoint('GET', '/v1/livechat/department'); + + const result = useQuery( + ['omnichannel', 'departments', debouncedText, pagination, sort], + () => + getDepartments({ + onlyMyDepartments: 'true', + text: debouncedText, sort: JSON.stringify({ [sort.sortBy]: sort.sortDirection === 'asc' ? 1 : -1 }), ...(pagination.current && { offset: pagination.current }), ...(pagination.itemsPerPage && { count: pagination.itemsPerPage }), - fields: JSON.stringify({ name: 1, username: 1, emails: 1, avatarETag: 1 }), - }; - }, [pagination, sort.sortBy, sort.sortDirection, text]), - 500, + }), + { + keepPreviousData: true, + }, ); - const getDepartments = useEndpoint('GET', '/v1/livechat/department'); - - const { data, isLoading } = useQuery(['omnichannel', 'departments', query], () => getDepartments(query)); - const removeButton = (dep: Omit) => ; return ( <> setText(text)} /> - + ); }; diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable.tsx index d8e88b5e512b..2768d0cd38e7 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable.tsx @@ -1,7 +1,7 @@ import type { ILivechatDepartment } from '@rocket.chat/core-typings'; import { Pagination } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; +import type { ReactElement, TableHTMLAttributes } from 'react'; import React, { useMemo } from 'react'; import { @@ -20,9 +20,9 @@ type DepartmentsTableProps = { pagination: any; sort: any; loading: boolean; -}; +} & TableHTMLAttributes; -function DepartmentsTable({ data, removeButton, pagination, sort, loading }: DepartmentsTableProps) { +function DepartmentsTable({ data, removeButton, pagination, sort, loading, ...props }: DepartmentsTableProps) { const t = useTranslation(); const { departments } = data || {}; @@ -46,14 +46,14 @@ function DepartmentsTable({ data, removeButton, pagination, sort, loading }: Dep {t('Show_on_registration_page')} , - , + , ], [setSort, sortBy, sortDirection, t], ); return ( <> - + {headers} {departments && !loading ? ( diff --git a/packages/rest-typings/src/v1/omnichannel.ts b/packages/rest-typings/src/v1/omnichannel.ts index ebb12f52dc7a..c1235322ea51 100644 --- a/packages/rest-typings/src/v1/omnichannel.ts +++ b/packages/rest-typings/src/v1/omnichannel.ts @@ -525,10 +525,6 @@ const LivechatDepartmentSchema = { type: 'string', nullable: true, }, - fields: { - type: 'string', - nullable: true, - }, }, additionalProperties: false, };