refactor: AutoCompleteTagsMultiple to use useInfiniteTagsList

Author: aleksandernsilva

apps/meteor/client/omnichannel/tags/AutoCompleteTagsMultiple.tsx

@@ -4,14 +4,11 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useRecordList } from '../../hooks/lists/useRecordList';
-import { AsyncStatePhase } from '../../hooks/useAsyncState';
-import { useTagsList } from '../../hooks/useTagsList';
+import { useInfiniteTagsList } from '../../components/Omnichannel/hooks/useInfiniteTagsList';
 
 type AutoCompleteTagsMultipleProps = {
 	id?: string;
 	value?: PaginatedMultiSelectOption[];
-	onlyMyTags?: boolean;
 	onChange?: (value: PaginatedMultiSelectOption[]) => void;
 	department?: string;
 	viewAll?: boolean;
@@ -20,7 +17,6 @@ type AutoCompleteTagsMultipleProps = {
 const AutoCompleteTagsMultiple = ({
 	id,
 	value = [],
-	onlyMyTags = false,
 	onChange = () => undefined,
 	department,
 	viewAll = false,
@@ -30,14 +26,11 @@ const AutoCompleteTagsMultiple = ({
 
 	const debouncedTagsFilter = useDebouncedValue(tagsFilter, 500);
 
-	const { itemsList: tagsList, loadMoreItems: loadMoreTags } = useTagsList(
-		useMemo(
-			() => ({ filter: debouncedTagsFilter, onlyMyTags, department, viewAll }),
-			[debouncedTagsFilter, onlyMyTags, department, viewAll],
-		),
-	);
-
-	const { phase: tagsPhase, items: tagsItems, itemCount: tagsTotal } = useRecordList(tagsList);
+	const { data: tagsItems = [], fetchNextPage } = useInfiniteTagsList({
+		filter: debouncedTagsFilter,
+		department,
+		viewAll,
+	});
 
 	const tagsOptions = useMemo(() => {
 		const pending = value.filter(({ value }) => !tagsItems.find((tag) => tag.value === value));
@@ -57,9 +50,7 @@ const AutoCompleteTagsMultiple = ({
 			flexShrink={0}
 			flexGrow={0}
 			placeholder={t('Select_an_option')}
-			endReached={
-				tagsPhase === AsyncStatePhase.LOADING ? () => undefined : (start) => start && loadMoreTags(start, Math.min(50, tagsTotal))
-			}
+			endReached={() => fetchNextPage()}
 		/>
 	);
 };

apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx

@@ -379,7 +379,7 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 													onChange={onChange}
 													onLoadItems={(list) => {
 														// NOTE: list.itemCount > 1 to account for the "None" option
-														setUnitRequired(!canManageUnits && list.itemCount > 1);
+														setUnitRequired(!canManageUnits && list.length > 1);
 													}}
 												/>
 											)}