Chore: Convert AutoCompleteAgent to tsx

apps/meteor/client/components/AutoCompleteAgent.js → apps/meteor/client/components/AutoCompleteAgent.tsx

@@ -1,14 +1,24 @@
 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, ReactElement, useMemo, useState } from 'react';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../lib/asyncState';
 import { useAgentsList } from './Omnichannel/hooks/useAgentsList';
 
-const AutoCompleteAgent = (props) => {
-	const { value, onChange = () => {}, haveAll = false, haveNoAgentsSelectedOption = false } = props;
-	const [agentsFilter, setAgentsFilter] = useState('');
+type AutoCompleteAgentProps = {
+	value: string | number | readonly string[];
+	onChange: (value: string) => void;
+	haveAll?: boolean;
+	haveNoAgentsSelectedOption?: boolean;
+};
+const AutoCompleteAgent = ({
+	value,
+	onChange,
+	haveAll = false,
+	haveNoAgentsSelectedOption = false,
+}: AutoCompleteAgentProps): ReactElement => {
+	const [agentsFilter, setAgentsFilter] = useState<string>('');
 
 	const debouncedAgentsFilter = useDebouncedValue(agentsFilter, 500);
 
@@ -19,17 +29,13 @@ const AutoCompleteAgent = (props) => {
 		),
 	);
 
-	const { phase: agentsPhase, items: agentsItems, itemCount: agentsTotal } = useRecordList(AgentsList);
+	const { phase: agentsPhase, itemCount: agentsTotal, items: agentsItems } = useRecordList(AgentsList);
 
 	const sortedByName = agentsItems.sort((a, b) => {
-		if (['all', 'no-agent-selected'].includes(a.value)) {
-			return -1;
-		}
-
-		if (a.username > b.username) {
+		if (a.label > b.label) {
 			return 1;
 		}
-		if (a.username < b.username) {
+		if (a.label < b.label) {
 			return -1;
 		}
 
@@ -42,10 +48,12 @@ const AutoCompleteAgent = (props) => {
 			onChange={onChange}
 			flexShrink={0}
 			filter={agentsFilter}
-			setFilter={setAgentsFilter}
+			setFilter={setAgentsFilter as (value: string | number | undefined) => void}
 			options={sortedByName}
 			data-qa='autocomplete-agent'
-			endReached={agentsPhase === AsyncStatePhase.LOADING ? () => {} : (start) => loadMoreAgents(start, Math.min(50, agentsTotal))}
+			endReached={
+				agentsPhase === AsyncStatePhase.LOADING ? (): void => undefined : (start): void => loadMoreAgents(start, Math.min(50, agentsTotal))
+			}
 		/>
 	);
 };

apps/meteor/client/components/Omnichannel/hooks/useAgentsList.ts

@@ -1,4 +1,3 @@
-import type { ILivechatAgent } from '@rocket.chat/core-typings';
 import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import { useCallback, useState } from 'react';
 
@@ -12,17 +11,19 @@ type AgentsListOptions = {
 	haveNoAgentsSelectedOption: boolean;
 };
 
+type AgentOption = { value: string; label: string; _updatedAt: Date; _id: string };
+
 export const useAgentsList = (
 	options: AgentsListOptions,
 ): {
-	itemsList: RecordList<ILivechatAgent>;
+	itemsList: RecordList<AgentOption>;
 	initialItemCount: number;
 	reload: () => void;
 	loadMoreItems: (start: number, end: number) => void;
 } => {
 	const t = useTranslation();
-	const [itemsList, setItemsList] = useState(() => new RecordList<ILivechatAgent>());
-	const reload = useCallback(() => setItemsList(new RecordList<ILivechatAgent>()), []);
+	const [itemsList, setItemsList] = useState(() => new RecordList<AgentOption>());
+	const reload = useCallback(() => setItemsList(new RecordList<AgentOption>()), []);
 
 	const getAgents = useEndpoint('GET', '/v1/livechat/users/agent');
 
@@ -39,25 +40,30 @@ export const useAgentsList = (
 				sort: `{ "name": 1 }`,
 			});
 
-			const items = agents.map((agent: any) => {
-				agent._updatedAt = new Date(agent._updatedAt);
-				agent.label = agent.username;
-				agent.value = agent._id;
-				return agent;
+			const items = agents.map<AgentOption>((agent) => {
+				const agentOption = {
+					_updatedAt: new Date(agent._updatedAt),
+					label: agent.username || agent._id,
+					value: agent._id,
+					_id: agent._id,
+				};
+				return agentOption;
 			});
 
 			options.haveAll &&
 				items.unshift({
 					label: t('All'),
 					value: 'all',
 					_updatedAt: new Date(),
+					_id: 'all',
 				});
 
 			options.haveNoAgentsSelectedOption &&
 				items.unshift({
 					label: t('Empty_no_agent_selected'),
 					value: 'no-agent-selected',
 					_updatedAt: new Date(),
+					_id: 'no-agent-selected',
 				});
 
 			return {

apps/meteor/client/hooks/lists/useRecordList.ts

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { AsyncStatePhase } from '../../lib/asyncState';
 import { RecordList } from '../../lib/lists/RecordList';
 
-type RecordListValue<T> = {
+export type RecordListValue<T> = {
 	phase: AsyncStatePhase;
 	items: T[];
 	itemCount: number;