refactor: remove unnecessary ReactElement type annotations in components (#40821)

Author: tassoevan

apps/meteor/client/hooks/useResizeInlineBreakpoint.ts

@@ -1,10 +1,10 @@
 import { useResizeObserver, useStableArray } from '@rocket.chat/fuselage-hooks';
 import { useMemo } from 'react';
 
-export const useResizeInlineBreakpoint = (sizes: number[] = [], debounceDelay = 0): unknown[] => {
-	const { ref, borderBoxSize } = useResizeObserver({ debounceDelay });
+export const useResizeInlineBreakpoint = <TElement extends Element>(sizes: number[] = [], debounceDelay = 0) => {
+	const { ref, borderBoxSize } = useResizeObserver<TElement>({ debounceDelay });
 	const inlineSize = borderBoxSize ? borderBoxSize.inlineSize : 0;
 	const stableSizes = useStableArray(sizes);
 	const newSizes = useMemo(() => stableSizes.map((current) => (inlineSize ? inlineSize > current : true)), [inlineSize, stableSizes]);
-	return [ref, ...newSizes];
+	return [ref, ...newSizes] as const;
 };

apps/meteor/client/views/account/AccountRouter.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Suspense, useEffect } from 'react';
 
 import AccountSidebar from './AccountSidebar';
@@ -10,7 +10,7 @@ type AccountRouterProps = {
 	children?: ReactNode;
 };
 
-const AccountRouter = ({ children }: AccountRouterProps): ReactElement => {
+const AccountRouter = ({ children }: AccountRouterProps) => {
 	const router = useRouter();
 
 	useEffect(

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountPage.tsx

@@ -1,10 +1,9 @@
 import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DeviceManagementAccountTable from './DeviceManagementAccountTable';
 
-const DeviceManagementAccountPage = (): ReactElement => {
+const DeviceManagementAccountPage = () => {
 	const { t } = useTranslation();
 
 	return (

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx

@@ -1,7 +1,6 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
-import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DeviceIcon from '../../../../components/deviceManagement/DeviceIcon';
@@ -16,7 +15,7 @@ type DevicesRowProps = {
 	loginAt: string;
 };
 
-const DeviceManagementAccountRow = ({ _id, deviceName, deviceType = 'browser', deviceOSName, loginAt }: DevicesRowProps): ReactElement => {
+const DeviceManagementAccountRow = ({ _id, deviceName, deviceType = 'browser', deviceOSName, loginAt }: DevicesRowProps) => {
 	const { t } = useTranslation();
 	const formatDateAndTime = useFormatDateAndTime();
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx

@@ -2,7 +2,6 @@ import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 import { GenericTableHeaderCell, usePagination, useSort } from '@rocket.chat/ui-client';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,7 +15,7 @@ const sortMapping = {
 	loginAt: 'loginAt',
 };
 
-const DeviceManagementAccountTable = (): ReactElement => {
+const DeviceManagementAccountTable = () => {
 	const { t } = useTranslation();
 	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = usePagination();
 	const { sortBy, sortDirection, setSort } = useSort<'client' | 'os' | 'loginAt'>('loginAt');
@@ -59,7 +58,7 @@ const DeviceManagementAccountTable = (): ReactElement => {
 		<DeviceManagementTable
 			{...queryResult}
 			headers={headers}
-			renderRow={(session): ReactElement => (
+			renderRow={(session) => (
 				<DeviceManagementAccountRow
 					key={session._id}
 					_id={session._id}

apps/meteor/client/views/account/integrations/AccountIntegrationsRoute.tsx

@@ -1,10 +1,9 @@
 import { useSetting } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 
 import AccountIntegrationsPage from './AccountIntegrationsPage';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 
-const AccountIntegrationsRoute = (): ReactElement => {
+const AccountIntegrationsRoute = () => {
 	const webdavEnabled = useSetting('Webdav_Integration_Enabled', false);
 
 	if (!webdavEnabled) {

apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.tsx

@@ -1,7 +1,6 @@
 import { ButtonGroup, Button, Box, Accordion } from '@rocket.chat/fuselage';
 import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useTranslation, useEndpoint, useUserPreference, useSetting } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 
 import PreferencesConversationTranscript from './PreferencesConversationTranscript';
@@ -12,7 +11,7 @@ type FormData = {
 	omnichannelTranscriptEmail: boolean;
 };
 
-const OmnichannelPreferencesPage = (): ReactElement => {
+const OmnichannelPreferencesPage = () => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 

apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx

@@ -1,9 +1,8 @@
 import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
-import type { ReactElement } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-export const PreferencesGeneral = (): ReactElement => {
+export const PreferencesGeneral = () => {
 	const { t } = useTranslation();
 	const { control } = useFormContext();
 

apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx

@@ -3,7 +3,6 @@ import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@
 import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import { useId } from 'react';
-import type { ReactElement } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import PreferencesGlobalSection from './PreferencesGlobalSection';
@@ -18,7 +17,7 @@ import type { AccountPreferencesData } from './useAccountPreferencesValues';
 import { useAccountPreferencesValues } from './useAccountPreferencesValues';
 import { getDirtyFields } from '../../../lib/getDirtyFields';
 
-const AccountPreferencesPage = (): ReactElement => {
+const AccountPreferencesPage = () => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const dataDownloadEnabled = useSetting('UserData_EnableDownload');

apps/meteor/client/views/account/profile/AccountProfileForm.tsx

@@ -14,7 +14,7 @@ import {
 	useLayout,
 } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
-import type { AllHTMLAttributes, ReactElement } from 'react';
+import type { AllHTMLAttributes } from 'react';
 import { useCallback } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
@@ -26,7 +26,7 @@ import UserAvatarEditor from '../../../components/avatar/UserAvatarEditor';
 import { useUpdateAvatar } from '../../../hooks/useUpdateAvatar';
 import { USER_STATUS_TEXT_MAX_LENGTH, BIO_TEXT_MAX_LENGTH } from '../../../lib/constants';
 
-const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactElement => {
+const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>) => {
 	const t = useTranslation();
 	const user = useUser();
 	const dispatchToastMessage = useToastMessageDispatch();