chore: Remove unnecessary useForm in CannedResponsesTable (#30854)

RocketChat · Nov 7, 2023 · 5b47d5e · 5b47d5e
1 parent 4f3f5bc
commit 5b47d5e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 52 deletions.
diff --git a/apps/meteor/ee/client/omnichannel/cannedResponses/CannedResponseFilter.tsx b/apps/meteor/ee/client/omnichannel/cannedResponses/CannedResponseFilter.tsx
@@ -1,55 +1,49 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box, Icon, TextInput, Select } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { FC, FormEvent } from 'react';
-import React, { memo, useCallback } from 'react';
+import type { ChangeEvent } from 'react';
+import React, { memo } from 'react';
 
 import AutoCompleteAgent from '../../../../client/components/AutoCompleteAgent';
 
+type SharingValues = '' | 'user' | 'global' | 'department';
+
 type CannedResponsesFilterProps = {
-	sharingValue: string;
-	createdByValue: string;
-	shortcutValue: string;
-	setSharing: (eventOrValue: unknown) => void;
-	setCreatedBy: (eventOrValue: unknown) => void;
-	setShortcut: (eventOrValue: unknown) => void;
+	createdBy: string;
+	setCreatedBy: (value: string) => void;
+	sharing: SharingValues;
+	setSharing: (value: SharingValues) => void;
+	text: string;
+	setText: (text: string) => void;
 };
 
-const CannedResponsesFilter: FC<CannedResponsesFilterProps> = ({
-	sharingValue = '',
-	createdByValue = '',
-	shortcutValue = '',
-	setSharing,
-	setCreatedBy,
-	setShortcut,
-	...props
-}) => {
+const CannedResponsesFilter = ({ createdBy, setCreatedBy, sharing, setSharing, text, setText }: CannedResponsesFilterProps) => {
 	const t = useTranslation();
+
 	const sharingList: SelectOption[] = [
 		['', t('All')],
 		['user', t('Private')],
 		['global', t('Public')],
 		['department', t('Department')],
 	];
 
-	const handleFormSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
-		event.preventDefault();
-	}, []);
-
 	return (
-		<Box mb={16} is='form' onSubmit={handleFormSubmit} display='flex' flexDirection='row' color='default' {...props}>
+		<Box mb={16} display='flex' flexDirection='row'>
 			<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
 				<Box mb={4}>{t('Search')}</Box>
-				<TextInput addon={<Icon name='magnifier' size='x20' />} onChange={setShortcut} value={shortcutValue} />
+				<TextInput
+					value={text}
+					onChange={(e: ChangeEvent<HTMLInputElement>) => setText(e.target.value)}
+					addon={<Icon name='magnifier' size='x20' />}
+				/>
 			</Box>
-
 			<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
 				<Box mb={4}>{t('Sharing')}</Box>
-				<Select onChange={setSharing} options={sharingList} value={sharingValue} />
+				<Select value={sharing} onChange={(value) => setSharing(value as SharingValues)} options={sharingList} />
 			</Box>
 			<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
 				<Box mb={4}>{t('Created_by')}</Box>
-				<AutoCompleteAgent onChange={setCreatedBy} value={createdByValue} haveAll />
+				<AutoCompleteAgent value={createdBy} onChange={setCreatedBy} haveAll />
 			</Box>
 		</Box>
 	);

diff --git a/apps/meteor/ee/client/omnichannel/cannedResponses/CannedResponsesTable.tsx b/apps/meteor/ee/client/omnichannel/cannedResponses/CannedResponsesTable.tsx
@@ -17,19 +17,10 @@ import {
 import { usePagination } from '../../../../client/components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../../client/components/GenericTable/hooks/useSort';
 import UserAvatar from '../../../../client/components/avatar/UserAvatar';
-import { useForm } from '../../../../client/hooks/useForm';
 import { useFormatDateAndTime } from '../../../../client/hooks/useFormatDateAndTime';
 import CannedResponseFilter from './CannedResponseFilter';
 import RemoveCannedResponseButton from './RemoveCannedResponseButton';
 
-type CannedResponseFilterValues = {
-	sharing: string;
-	createdBy: string;
-	tags: Array<{ value: string; label: string }>;
-	text: string;
-	firstMessage: string;
-};
-
 type Scope = 'global' | 'department' | 'user';
 
 const CannedResponsesTable = () => {
@@ -41,21 +32,14 @@ const CannedResponsesTable = () => {
 	const isMonitor = usePermission('save-department-canned-responses');
 	const isManager = usePermission('save-all-canned-responses');
 
-	const { values, handlers } = useForm({
-		sharing: '',
-		createdBy: '',
-		tags: [],
-		text: '',
-	});
-
-	const { sharing, createdBy, text } = values as CannedResponseFilterValues;
-	const { handleSharing, handleCreatedBy, handleText } = handlers;
+	const [createdBy, setCreatedBy] = useState('all');
+	const [sharing, setSharing] = useState<'' | 'user' | 'global' | 'department'>('');
+	const [text, setText] = useState('');
+	const debouncedText = useDebouncedValue(text, 500);
 
 	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
 	const { sortBy, setSort, sortDirection } = useSort<'shortcut' | 'scope' | 'tags' | '_createdAt' | 'createdBy'>('shortcut');
 
-	const debouncedText = useDebouncedValue(text, 500);
-
 	const query = useMemo(
 		() => ({
 			text: debouncedText,
@@ -131,12 +115,12 @@ const CannedResponsesTable = () => {
 		<>
 			{((isSuccess && data?.cannedResponses.length > 0) || queryHasChanged) && (
 				<CannedResponseFilter
-					sharingValue={sharing}
-					createdByValue={createdBy}
-					shortcutValue={text}
-					setSharing={handleSharing}
-					setCreatedBy={handleCreatedBy}
-					setShortcut={handleText}
+					createdBy={createdBy}
+					setCreatedBy={setCreatedBy}
+					sharing={sharing}
+					setSharing={setSharing}
+					text={text}
+					setText={setText}
 				/>
 			)}
 			{isLoading && (