Rocket.Chat/client/components/AutoCompleteDepartment.js

import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
import React, { memo, useMemo, useState } from 'react';

import { useTranslation } from '../contexts/TranslationContext';
import { useRecordList } from '../hooks/lists/useRecordList';
import { AsyncStatePhase } from '../hooks/useAsyncState';
import { useDepartmentsList } from '../views/hooks/useDepartmentsList';

const AutoCompleteDepartment = (props) => {
	const { value, onlyMyDepartments = false, onChange = () => { } } = props;

	const t = useTranslation();
	const [departmentsFilter, setDepartmentsFilter] = useState('');

	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);

	const { itemsList: departmentsList, loadMoreItems: loadMoreDepartments } = useDepartmentsList(
		useMemo(() => ({ filter: debouncedDepartmentsFilter, onlyMyDepartments }), [
			debouncedDepartmentsFilter,
			onlyMyDepartments,
		]),
	);

	const {
		phase: departmentsPhase,
		items: departmentsItems,
		itemCount: departmentsTotal,
	} = useRecordList(departmentsList);

	return (
		<PaginatedSelectFiltered
			value={value}
			onChange={onChange}
			filter={departmentsFilter}
			setFilter={setDepartmentsFilter}
			options={departmentsItems}
			maxWidth='100%'
			placeholder={t('Select_an_option')}
			flexGrow={1}
			endReached={
				departmentsPhase === AsyncStatePhase.LOADING
					? () => { }
					: (start) => loadMoreDepartments(start, Math.min(50, departmentsTotal))
			}
		/>
	);
};

export default memo(AutoCompleteDepartment);