Merge branch 'develop' into OC-692

RocketChat · Feb 28, 2023 · c23910d · c23910d
2 parents 286091a + 6e5ba71
commit c23910d
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 65 deletions.
diff --git a/apps/meteor/client/components/AutoCompleteDepartment.tsx b/apps/meteor/client/components/AutoCompleteDepartment.tsx
@@ -28,7 +28,7 @@ const AutoCompleteDepartment = ({
 	showArchived = false,
 }: AutoCompleteDepartmentProps): ReactElement | null => {
 	const t = useTranslation();
-	const [departmentsFilter, setDepartmentsFilter] = useState('');
+	const [departmentsFilter, setDepartmentsFilter] = useState<string>('');
 
 	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);
 
@@ -48,32 +48,19 @@ const AutoCompleteDepartment = ({
 
 	const { phase: departmentsPhase, items: departmentsItems, itemCount: departmentsTotal } = useRecordList(departmentsList);
 
-	const sortedByName = useMemo(
-		() =>
-			departmentsItems.sort((a, b) => {
-				const rankA = 'name' in a ? a.name : '';
-				const rankB = 'name' in b ? b.name : '';
-				return rankA.localeCompare(rankB);
-			}),
-		[departmentsItems],
-	);
-
 	const department = useMemo(() => {
 		const valueFound = typeof value === 'string' ? value : value?.value || '';
-		return sortedByName.find((dep) => dep.value.value === valueFound)?.value;
-	}, [sortedByName, value]);
+		return departmentsItems.find((dep) => dep.value === valueFound)?.value;
+	}, [departmentsItems, value]);
 
 	return (
 		<PaginatedSelectFiltered
 			withTitle
-			value={department as any}
+			value={department}
 			onChange={onChange}
 			filter={departmentsFilter}
-			// Workaround for setFilter weird typing
-			setFilter={setDepartmentsFilter as (value: string | number | undefined) => void}
-			// TODO: Fix typing on fuselage
-			// Workaround for options wrong typing
-			options={sortedByName as any}
+			setFilter={setDepartmentsFilter as (value?: string | number) => void}
+			options={departmentsItems}
 			placeholder={t('Select_an_option')}
 			data-qa='autocomplete-department'
 			endReached={

diff --git a/...ponents/AutoCompleteDepartmentMultiple.js → ...onents/AutoCompleteDepartmentMultiple.tsx b/...ponents/AutoCompleteDepartmentMultiple.js → ...onents/AutoCompleteDepartmentMultiple.tsx
@@ -1,54 +1,61 @@
 import { PaginatedMultiSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { FormEventHandler } from 'react';
 import React, { memo, useMemo, useState } from 'react';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../hooks/useAsyncState';
 import { useDepartmentsList } from './Omnichannel/hooks/useDepartmentsList';
 
-const AutoCompleteDepartmentMultiple = (props) => {
-	const { value, onlyMyDepartments = false, showArchived = false, onChange = () => {} } = props;
+type AutoCompleteDepartmentMultipleProps = {
+	value?: string;
+	onChange: FormEventHandler<HTMLElement>;
+	onlyMyDepartments?: boolean;
+	showArchived?: boolean;
+};
 
+const AutoCompleteDepartmentMultiple = ({
+	value,
+	onlyMyDepartments = false,
+	showArchived = false,
+	onChange = () => undefined,
+}: AutoCompleteDepartmentMultipleProps) => {
 	const t = useTranslation();
 	const [departmentsFilter, setDepartmentsFilter] = useState('');
 
 	const debouncedDepartmentsFilter = useDebouncedValue(departmentsFilter, 500);
 
 	const { itemsList: departmentsList, loadMoreItems: loadMoreDepartments } = useDepartmentsList(
 		useMemo(
-			() => ({ filter: debouncedDepartmentsFilter, onlyMyDepartments, ...(showArchived && { showArchived: 'true' }) }),
+			() => ({ filter: debouncedDepartmentsFilter, onlyMyDepartments, ...(showArchived && { showArchived: true }) }),
 			[debouncedDepartmentsFilter, onlyMyDepartments, showArchived],
 		),
 	);
 
 	const { phase: departmentsPhase, items: departmentsItems, itemCount: departmentsTotal } = useRecordList(departmentsList);
 
-	const sortedByName = departmentsItems.sort((a, b) => {
-		if (a.name > b.name) {
-			return 1;
-		}
-		if (a.name < b.name) {
-			return -1;
-		}
-
-		return 0;
-	});
-
 	return (
 		<PaginatedMultiSelectFiltered
 			withTitle
 			value={value}
 			onChange={onChange}
 			filter={departmentsFilter}
-			setFilter={setDepartmentsFilter}
-			options={sortedByName}
+			setFilter={setDepartmentsFilter as (value?: string | number) => void}
+			options={departmentsItems}
 			width='100%'
 			flexShrink={0}
 			flexGrow={0}
 			placeholder={t('Select_an_option')}
 			endReached={
-				departmentsPhase === AsyncStatePhase.LOADING ? () => {} : (start) => loadMoreDepartments(start, Math.min(50, departmentsTotal))
+				departmentsPhase === AsyncStatePhase.LOADING
+					? () => undefined
+					: (start?: number) => {
+							if (start === undefined) {
+								return;
+							}
+							return loadMoreDepartments(start, Math.min(50, departmentsTotal));
+					  }
 			}
 		/>
 	);

diff --git a/apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts b/apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts
@@ -1,4 +1,3 @@
-import type { ILivechatDepartment } from '@rocket.chat/core-typings';
 import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import { useCallback, useState } from 'react';
 
@@ -17,23 +16,12 @@ type DepartmentsListOptions = {
 	showArchived?: boolean;
 };
 
-type DepartmentListItem =
-	| (ILivechatDepartment & {
-			label: string;
-			value: { value: string; label: string };
-	  })
-	| {
-			_id: '';
-			label: string;
-			value: { value: 'all'; label: string };
-			_updatedAt: Date;
-	  }
-	| {
-			_id: '';
-			label: string;
-			value: { value: ''; label: string };
-			_updatedAt: Date;
-	  };
+type DepartmentListItem = {
+	_id: string;
+	label: string;
+	value: string;
+	_updatedAt: Date;
+};
 
 export const useDepartmentsList = (
 	options: DepartmentsListOptions,
@@ -75,28 +63,26 @@ export const useDepartmentsList = (
 				})
 				.map(({ _id, name, _updatedAt, ...department }): DepartmentListItem => {
 					return {
-						...department,
 						_id,
-						name: department.archived ? `${name} [${t('Archived')}]` : name,
 						label: department.archived ? `${name} [${t('Archived')}]` : name,
-						value: { value: _id, label: name },
-						...(_updatedAt && { _updatedAt: new Date(_updatedAt) }),
+						value: _id,
+						_updatedAt: new Date(_updatedAt || ''),
 					};
 				});
 
 			options.haveAll &&
 				items.unshift({
 					_id: '',
 					label: t('All'),
-					value: { value: 'all', label: t('All') },
+					value: 'all',
 					_updatedAt: new Date(),
 				});
 
 			options.haveNone &&
 				items.unshift({
 					_id: '',
 					label: t('None'),
-					value: { value: '', label: t('None') },
+					value: '',
 					_updatedAt: new Date(),
 				});
 

diff --git a/apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.tsx b/apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.tsx
@@ -110,7 +110,7 @@ const ForwardChatModal = ({
 								withTitle
 								filter={departmentsFilter as string}
 								setFilter={setDepartmentsFilter}
-								options={departments as any}
+								options={departments}
 								maxWidth='100%'
 								placeholder={t('Select_an_option')}
 								onChange={(value: string): void => {

diff --git a/...l/additionalForms/DepartmentForwarding.js → .../additionalForms/DepartmentForwarding.tsx b/...l/additionalForms/DepartmentForwarding.js → .../additionalForms/DepartmentForwarding.tsx
@@ -1,13 +1,22 @@
 import { Field, Box, PaginatedMultiSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { FormEventHandler } from 'react';
 import React, { useMemo, useState } from 'react';
 
 import { useDepartmentsList } from '../../../../client/components/Omnichannel/hooks/useDepartmentsList';
 import { useRecordList } from '../../../../client/hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../../../../client/hooks/useAsyncState';
 
-export const DepartmentForwarding = ({ departmentId, value, handler, label }) => {
+type DepartmentForwardingProps = {
+	departmentId: string;
+	value?: string;
+	handler: FormEventHandler<HTMLElement>;
+	label: TranslationKey;
+};
+
+export const DepartmentForwarding = ({ departmentId, value, handler, label }: DepartmentForwardingProps) => {
 	const t = useTranslation();
 	const [departmentsFilter, setDepartmentsFilter] = useState('');
 
@@ -30,14 +39,20 @@ export const DepartmentForwarding = ({ departmentId, value, handler, label }) =>
 						w='100%'
 						flexGrow={1}
 						filter={debouncedDepartmentsFilter}
-						setFilter={setDepartmentsFilter}
+						setFilter={setDepartmentsFilter as (type?: string | number) => void}
 						onChange={handler}
 						options={departmentsItems}
 						value={value}
+						placeholder={t('Select_an_option')}
 						endReached={
 							departmentsPhase === AsyncStatePhase.LOADING
-								? () => {}
-								: (start) => loadMoreDepartments(start, Math.min(50, departmentsTotal))
+								? () => undefined
+								: (start?: number) => {
+										if (start === undefined) {
+											return;
+										}
+										loadMoreDepartments(start, Math.min(50, departmentsTotal));
+								  }
 						}
 					/>
 				</Box>