refactor: AutoCompleteTagsMultiple to TS (#30577)

RocketChat · Oct 10, 2023 · 4855fa8 · 4855fa8
1 parent f5c0d6b
commit 4855fa8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/apps/meteor/ee/client/hooks/useTagsList.ts b/apps/meteor/ee/client/hooks/useTagsList.ts
@@ -1,4 +1,3 @@
-import type { ILivechatTagRecord } from '@rocket.chat/core-typings';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useCallback, useState } from 'react';
 
@@ -12,17 +11,19 @@ type TagsListOptions = {
 	viewAll?: boolean;
 };
 
+type TagListItem = { _id: string; label: string; value: string; _updatedAt: Date };
+
 type UseTagsListResult = {
-	itemsList: RecordList<ILivechatTagRecord>;
+	itemsList: RecordList<TagListItem>;
 	initialItemCount: number;
 	reload: () => void;
 	loadMoreItems: (start: number, end: number) => void;
 };
 
 export const useTagsList = (options: TagsListOptions): UseTagsListResult => {
 	const { viewAll, department, filter } = options;
-	const [itemsList, setItemsList] = useState(() => new RecordList<ILivechatTagRecord>());
-	const reload = useCallback(() => setItemsList(new RecordList<ILivechatTagRecord>()), []);
+	const [itemsList, setItemsList] = useState(() => new RecordList<TagListItem>());
+	const reload = useCallback(() => setItemsList(new RecordList<TagListItem>()), []);
 
 	const getTags = useEndpoint('GET', '/v1/livechat/tags');
 

diff --git a/...ichannel/tags/AutoCompleteTagsMultiple.js → ...channel/tags/AutoCompleteTagsMultiple.tsx b/...ichannel/tags/AutoCompleteTagsMultiple.js → ...channel/tags/AutoCompleteTagsMultiple.tsx
@@ -1,3 +1,4 @@
+import type { PaginatedMultiSelectOption } from '@rocket.chat/fuselage';
 import { PaginatedMultiSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
@@ -7,9 +8,21 @@ import { useRecordList } from '../../../../client/hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../../../../client/hooks/useAsyncState';
 import { useTagsList } from '../../hooks/useTagsList';
 
-const AutoCompleteTagMultiple = (props) => {
-	const { value, onlyMyTags = false, onChange = () => {}, department, viewAll = false } = props;
+type AutoCompleteTagsMultipleProps = {
+	value?: PaginatedMultiSelectOption[];
+	onlyMyTags?: boolean;
+	onChange?: (value: PaginatedMultiSelectOption[]) => void;
+	department?: string;
+	viewAll?: boolean;
+};
 
+const AutoCompleteTagsMultiple = ({
+	value = [],
+	onlyMyTags = false,
+	onChange = () => undefined,
+	department,
+	viewAll = false,
+}: AutoCompleteTagsMultipleProps) => {
 	const t = useTranslation();
 	const [tagsFilter, setTagsFilter] = useState('');
 
@@ -41,9 +54,11 @@ const AutoCompleteTagMultiple = (props) => {
 			flexShrink={0}
 			flexGrow={0}
 			placeholder={t('Select_an_option')}
-			endReached={tagsPhase === AsyncStatePhase.LOADING ? () => {} : (start) => loadMoreTags(start, Math.min(50, tagsTotal))}
+			endReached={
+				tagsPhase === AsyncStatePhase.LOADING ? () => undefined : (start) => start && loadMoreTags(start, Math.min(50, tagsTotal))
+			}
 		/>
 	);
 };
 
-export default memo(AutoCompleteTagMultiple);
+export default memo(AutoCompleteTagsMultiple);
diff --git a/apps/meteor/ee/client/omnichannel/tags/CurrentChatTags.tsx b/apps/meteor/ee/client/omnichannel/tags/CurrentChatTags.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import AutoCompleteTagsMultiple from './AutoCompleteTagsMultiple';
 
-type CurrentChatTagsProps = { value: Array<string>; handler: () => void; department?: string; viewAll?: boolean };
+type CurrentChatTagsProps = { value: Array<{ value: string; label: string }>; handler: () => void; department?: string; viewAll?: boolean };
 
 const CurrentChatTags: FC<CurrentChatTagsProps> = ({ value, handler, department, viewAll }) => (
 	<AutoCompleteTagsMultiple onChange={handler} value={value} department={department} viewAll={viewAll} />