chore: sanitize FilterByText onChange handler

RocketChat · Aug 2, 2024 · e57bf2d · e57bf2d
1 parent ea8da50
commit e57bf2d
Show file tree

Hide file tree

Showing 25 changed files with 32 additions and 37 deletions.
diff --git a/apps/meteor/client/components/FilterByText.tsx b/apps/meteor/client/components/FilterByText.tsx
@@ -1,13 +1,13 @@
 import { Box, Icon, TextInput, Margins } from '@rocket.chat/fuselage';
 import { useAutoFocus, useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ChangeEvent, FormEvent, AllHTMLAttributes } from 'react';
-import React, { forwardRef, memo, useCallback, useEffect, useState } from 'react';
+import type { ChangeEvent, FormEvent, HTMLAttributes } from 'react';
+import React, { forwardRef, memo, useCallback, useState } from 'react';
 
 type FilterByTextProps = {
-	onChange: (filter: { text: string }) => void;
+	onChange: (filter: string) => void;
 	shouldAutoFocus?: boolean;
-} & Omit<AllHTMLAttributes<HTMLInputElement>, 'is' | 'onChange'>;
+} & Omit<HTMLAttributes<HTMLInputElement>, 'is' | 'onChange'>;
 
 const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function FilterByText(
 	{ placeholder, onChange: setFilter, shouldAutoFocus = false, children, ...props },
@@ -18,13 +18,10 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 	const autoFocusRef = useAutoFocus(shouldAutoFocus);
 	const mergedRefs = useMergedRefs(ref, autoFocusRef);
 
-	const handleInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+	const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setText(event.currentTarget.value);
-	}, []);
-
-	useEffect(() => {
-		setFilter({ text });
-	}, [setFilter, text]);
+		setFilter(event.currentTarget.value);
+	};
 
 	const handleFormSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();

diff --git a/apps/meteor/client/omnichannel/businessHours/BusinessHoursTable.tsx b/apps/meteor/client/omnichannel/businessHours/BusinessHoursTable.tsx
@@ -47,7 +47,7 @@ const BusinessHoursTable = () => {
 
 	return (
 		<>
-			<FilterByText onChange={({ text }) => setText(text)} />
+			<FilterByText onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/omnichannel/monitors/MonitorsTable.tsx b/apps/meteor/client/omnichannel/monitors/MonitorsTable.tsx
@@ -144,7 +144,7 @@ const MonitorsTable = () => {
 					</FieldRow>
 				</Field>
 			</Box>
-			{((isSuccess && data?.monitors.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setText(text)} />}
+			{((isSuccess && data?.monitors.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx b/apps/meteor/client/omnichannel/slaPolicies/SlaTable.tsx
@@ -84,7 +84,7 @@ const SlaTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
 
 	return (
 		<>
-			{((isSuccess && data?.sla.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setFilter(text)} />}
+			{((isSuccess && data?.sla.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/omnichannel/tags/TagsTable.tsx b/apps/meteor/client/omnichannel/tags/TagsTable.tsx
@@ -70,7 +70,7 @@ const TagsTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.tags.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setFilter(text)} />}
+			{((isSuccess && data?.tags.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/omnichannel/units/UnitsTable.tsx b/apps/meteor/client/omnichannel/units/UnitsTable.tsx
@@ -69,7 +69,7 @@ const UnitsTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.units.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setFilter(text)} />}
+			{((isSuccess && data?.units.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable aria-busy>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx b/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
@@ -66,7 +66,7 @@ const CustomEmoji = ({ onClick, reload }: CustomEmojiProps) => {
 
 	return (
 		<>
-			<FilterByText onChange={({ text }): void => setText(text)} />
+			<FilterByText onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx b/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx
@@ -64,7 +64,7 @@ const CustomSoundsTable = ({ reload, onClick }: CustomSoundsTableProps) => {
 
 	return (
 		<>
-			<FilterByText onChange={({ text }): void => setParams(text)} />
+			<FilterByText onChange={setParams} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/...eteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx b/...eteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx
@@ -70,7 +70,7 @@ const CustomUserStatus = ({ reload, onClick }: CustomUserStatusProps): ReactElem
 
 	return (
 		<>
-			<FilterByText onChange={({ text }): void => setText(text)} />
+			<FilterByText onChange={setText} />
 			{data.length === 0 && <GenericNoResult />}
 			{data && data.length > 0 && (
 				<>

diff --git a/...nt/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx b/...nt/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx
@@ -76,7 +76,7 @@ const DeviceManagementAdminTable = ({ reloadRef }: { reloadRef: MutableRefObject
 
 	return (
 		<>
-			<FilterByText placeholder={t('Search_Devices_Users')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Search_Devices_Users')} onChange={setText} />
 			<DeviceManagementTable
 				data={data}
 				phase={phase}

diff --git a/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx b/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx
@@ -96,7 +96,7 @@ const IntegrationsTable = ({ type }: { type?: string }) => {
 
 	return (
 		<>
-			<FilterByText placeholder={t('Search_Integrations')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Search_Integrations')} onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx b/apps/meteor/client/views/admin/moderation/helpers/ModerationFilter.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import FilterByText from '../../../../components/FilterByText';
 import DateRangePicker from './DateRangePicker';
@@ -12,10 +12,8 @@ type ModerationFilterProps = {
 const ModerationFilter = ({ setText, setDateRange }: ModerationFilterProps) => {
 	const t = useTranslation();
 
-	const handleChange = useCallback(({ text }): void => setText(text), [setText]);
-
 	return (
-		<FilterByText shouldAutoFocus placeholder={t('Search')} onChange={handleChange}>
+		<FilterByText shouldAutoFocus placeholder={t('Search')} onChange={setText}>
 			<DateRangePicker onChange={setDateRange} />
 		</FilterByText>
 	);

diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
@@ -20,7 +20,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
 	const [text, setText] = useState('');
 
 	const handleSearchTextChange = useCallback(
-		({ text }) => {
+		(text) => {
 			setUsersFilters({ text, roles: selectedRoles });
 			setText(text);
 		},

diff --git a/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx b/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx
@@ -96,7 +96,7 @@ const ChannelsTable = () => {
 
 	return (
 		<>
-			<FilterByText placeholder={t('Search_Channels')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Search_Channels')} onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx b/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx
@@ -73,7 +73,7 @@ const TeamsTable = () => {
 
 	return (
 		<>
-			<FilterByText placeholder={t('Teams_Search_teams')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Teams_Search_teams')} onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx
@@ -95,7 +95,7 @@ const UsersTable = ({ workspace = 'local' }): ReactElement => {
 
 	return (
 		<>
-			<FilterByText placeholder={t('Search_Users')} onChange={({ text }): void => setText(text)} />
+			<FilterByText placeholder={t('Search_Users')} onChange={setText} />
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
@@ -60,7 +60,7 @@ const AppsFilters = ({
 
 	return (
 		<Box pi={24} mbe={4}>
-			<FilterByText placeholder={appsSearchPlaceholders[context]} onChange={({ text }): void => setText(text)}>
+			<FilterByText placeholder={appsSearchPlaceholders[context]} onChange={setText}>
 				{!isPrivateAppsPage && (
 					<RadioDropDown group={freePaidFilterStructure} onSelected={freePaidFilterOnSelected} flexGrow={1} {...fixFiltersSize} />
 				)}

diff --git a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx
@@ -73,7 +73,7 @@ const AgentsTable = () => {
 	return (
 		<>
 			<AddAgent reload={refetch} />
-			{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setFilter(text)} />}
+			{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx
@@ -75,7 +75,7 @@ const CustomFieldsTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.customFields.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setFilter(text)} />}
+			{((isSuccess && data?.customFields.length > 0) || queryHasChanged) && <FilterByText onChange={setFilter} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx
@@ -91,7 +91,7 @@ const DepartmentsTable = ({ archived }: { archived: boolean }) => {
 
 	return (
 		<>
-			{((isSuccess && data?.departments.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setText(text)} />}
+			{((isSuccess && data?.departments.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx b/apps/meteor/client/views/omnichannel/directory/calls/CallTable.tsx
@@ -95,7 +95,7 @@ const CallTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setText(text)} />}
+			{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatTable.tsx
@@ -134,7 +134,7 @@ const ChatTable = () => {
 
 	return (
 		<>
-			{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }) => setText(text)} />}
+			{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
@@ -106,7 +106,7 @@ function ContactTable(): ReactElement {
 	return (
 		<>
 			{((isSuccess && data?.visitors.length > 0) || queryHasChanged) && (
-				<FilterByText onChange={({ text }) => setTerm(text)}>
+				<FilterByText onChange={setTerm}>
 					<Button onClick={onButtonNewClick} primary>
 						{t('New_contact')}
 					</Button>

diff --git a/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx b/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx
@@ -80,7 +80,7 @@ const ManagersTable = () => {
 	return (
 		<>
 			<AddManager reload={refetch} />
-			{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={({ text }): void => setText(text)} />}
+			{((isSuccess && data?.users.length > 0) || queryHasChanged) && <FilterByText onChange={setText} />}
 			{isLoading && (
 				<GenericTable aria-busy>
 					<GenericTableHeader>{headers}</GenericTableHeader>

diff --git a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerModal.tsx b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerModal.tsx
@@ -196,7 +196,7 @@ const WebdavFilePickerModal = ({ onUpload, onClose, account }: WebdavFilePickerM
 					</Box>
 				</Box>
 				<Box display='flex' flexDirection='column'>
-					<FilterByText onChange={({ text }): void => setFilterText(text)}>
+					<FilterByText onChange={setFilterText}>
 						{typeView === 'grid' && (
 							<Select value={sortBy} onChange={(value): void => handleSort(value as WebdavSortOptions)} options={options} />
 						)}