From 4855fa8eb29db1230834ef3ba00632a9cc1e5698 Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Tue, 10 Oct 2023 15:36:53 -0300 Subject: [PATCH] refactor: AutoCompleteTagsMultiple to TS (#30577) --- apps/meteor/ee/client/hooks/useTagsList.ts | 9 ++++---- ...ltiple.js => AutoCompleteTagsMultiple.tsx} | 23 +++++++++++++++---- .../omnichannel/tags/CurrentChatTags.tsx | 2 +- 3 files changed, 25 insertions(+), 9 deletions(-) rename apps/meteor/ee/client/omnichannel/tags/{AutoCompleteTagsMultiple.js => AutoCompleteTagsMultiple.tsx} (68%) diff --git a/apps/meteor/ee/client/hooks/useTagsList.ts b/apps/meteor/ee/client/hooks/useTagsList.ts index 907fa96f4aab..41062d1b9dce 100644 --- 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,8 +11,10 @@ type TagsListOptions = { viewAll?: boolean; }; +type TagListItem = { _id: string; label: string; value: string; _updatedAt: Date }; + type UseTagsListResult = { - itemsList: RecordList; + itemsList: RecordList; initialItemCount: number; reload: () => void; loadMoreItems: (start: number, end: number) => void; @@ -21,8 +22,8 @@ type UseTagsListResult = { export const useTagsList = (options: TagsListOptions): UseTagsListResult => { const { viewAll, department, filter } = options; - const [itemsList, setItemsList] = useState(() => new RecordList()); - const reload = useCallback(() => setItemsList(new RecordList()), []); + const [itemsList, setItemsList] = useState(() => new RecordList()); + const reload = useCallback(() => setItemsList(new RecordList()), []); const getTags = useEndpoint('GET', '/v1/livechat/tags'); diff --git a/apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.js b/apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.tsx similarity index 68% rename from apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.js rename to apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.tsx index db48060ff546..f0baca991e2e 100644 --- a/apps/meteor/ee/client/omnichannel/tags/AutoCompleteTagsMultiple.js +++ b/apps/meteor/ee/client/omnichannel/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 index 61c1d11af947..553d31b7479d 100644 --- 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; handler: () => void; department?: string; viewAll?: boolean }; +type CurrentChatTagsProps = { value: Array<{ value: string; label: string }>; handler: () => void; department?: string; viewAll?: boolean }; const CurrentChatTags: FC = ({ value, handler, department, viewAll }) => (