Add explicit types in useCallback calls

apps/meteor/client/hooks/useDownloadFromServiceWorker.ts

@@ -52,9 +52,9 @@ export const useDownloadFromServiceWorker = (href: string, title?: string) => {
 
 	return {
 		disabled: !controller,
-		onContextMenu: useCallback((e) => e.preventDefault(), []),
+		onContextMenu: useCallback((e: MouseEvent) => e.preventDefault(), []),
 		onClick: useCallback(
-			(e: MouseEvent<HTMLElement>) => {
+			(e: MouseEvent) => {
 				e.preventDefault();
 
 				forAttachmentDownload(uid, href, controller);

apps/meteor/client/hooks/useFormatDate.ts

@@ -2,7 +2,7 @@ import { useSetting } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import { useCallback } from 'react';
 
-export const useFormatDate = (): ((time: string | Date | number) => string) => {
+export const useFormatDate = () => {
 	const format = useSetting('Message_DateFormat');
-	return useCallback((time) => moment(time).format(String(format)), [format]);
+	return useCallback((time: string | Date | number) => moment(time).format(String(format)), [format]);
 };

apps/meteor/client/hooks/useSingleFileInput.ts

@@ -2,7 +2,7 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRef, useEffect } from 'react';
 
 export const useSingleFileInput = (
-	onSetFile: (file: FileList[number], formData: FormData) => void,
+	onSetFile: (file: File, formData: FormData) => void,
 	fileType = 'image/*',
 	fileField = 'image',
 ): [onClick: () => void, reset: () => void] => {

apps/meteor/client/hooks/useTimeFromNow.ts

@@ -1,5 +1,5 @@
 import moment from 'moment';
 import { useCallback } from 'react';
 
-export const useTimeFromNow = (withSuffix: boolean): ((date?: Date | string) => string) =>
-	useCallback((date) => moment(date).fromNow(!withSuffix), [withSuffix]);
+export const useTimeFromNow = (withSuffix: boolean) =>
+	useCallback((date?: Date | string) => moment(date).fromNow(!withSuffix), [withSuffix]);

apps/meteor/client/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx

@@ -1,6 +1,6 @@
 import { useDebouncedValue, useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useRouter } from '@rocket.chat/ui-contexts';
-import type { MouseEvent } from 'react';
+import type { ChangeEvent, MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 
 import CannedResponseList from './CannedResponseList';
@@ -27,7 +27,7 @@ export const WrapCannedResponseList = () => {
 
 	const isRoomOverMacLimit = useIsRoomOverMacLimit(room);
 
-	const handleTextChange = useCallback((event) => {
+	const handleTextChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
 		setText(event.currentTarget.value);
 	}, []);
 

apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx

@@ -24,7 +24,7 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr
 	const uploadCustomSound = useMethod('uploadCustomSound');
 	const insertOrUpdateSound = useMethod('insertOrUpdateSound');
 
-	const handleChangeFile = useCallback((soundFile) => {
+	const handleChangeFile = useCallback((soundFile: File) => {
 		setSound(soundFile);
 	}, []);
 

apps/meteor/client/views/admin/customSounds/EditSound.tsx

@@ -28,7 +28,14 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl
 	const previousSound = useMemo(() => data || {}, [data]);
 
 	const [name, setName] = useState(() => data?.name ?? '');
-	const [sound, setSound] = useState(() => data);
+	const [sound, setSound] = useState<
+		| {
+				_id: string;
+				name: string;
+				extension?: string;
+		  }
+		| File
+	>(() => data);
 
 	useEffect(() => {
 		setName(previousName || '');
@@ -39,7 +46,7 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl
 	const uploadCustomSound = useMethod('uploadCustomSound');
 	const insertOrUpdateSound = useMethod('insertOrUpdateSound');
 
-	const handleChangeFile = useCallback((soundFile) => {
+	const handleChangeFile = useCallback((soundFile: File) => {
 		setSound(soundFile);
 	}, []);
 

apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx

@@ -2,7 +2,7 @@ import { Box, Icon, TextInput } from '@rocket.chat/fuselage';
 import type { OptionProp } from '@rocket.chat/ui-client';
 import { MultiSelectCustom } from '@rocket.chat/ui-client';
 import { useCallback, useMemo, useState } from 'react';
-import type { Dispatch, ReactElement, SetStateAction } from 'react';
+import type { Dispatch, FormEvent, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const initialRoomTypeFilterStructure = [
@@ -76,7 +76,7 @@ const RoomsTableFilters = ({ setFilters }: { setFilters: Dispatch<SetStateAction
 	return (
 		<Box
 			is='form'
-			onSubmit={useCallback((e) => e.preventDefault(), [])}
+			onSubmit={useCallback((e: FormEvent) => e.preventDefault(), [])}
 			mb='x8'
 			display='flex'
 			flexWrap='wrap'

apps/meteor/client/views/admin/settings/SettingsPage.tsx

@@ -2,7 +2,7 @@ import { Icon, SearchInput, Skeleton, CardGrid } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useIsSettingsContextLoading } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ChangeEvent, ReactElement } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -15,7 +15,7 @@ import PageBlockWithBorder from '../../../components/Page/PageBlockWithBorder';
 const SettingsPage = (): ReactElement => {
 	const { t } = useTranslation();
 	const [filter, setFilter] = useState('');
-	const handleChange = useCallback((e) => setFilter(e.currentTarget.value), []);
+	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => setFilter(e.currentTarget.value), []);
 
 	const groups = useSettingsGroups(useDebouncedValue(filter, 400));
 	const isLoadingGroups = useIsSettingsContextLoading();

apps/meteor/client/views/admin/users/AdminInviteUsers.tsx

@@ -23,7 +23,7 @@ import { FormSkeleton } from '../../../components/Skeleton';
 const AdminInviteUsers = () => {
 	const t = useTranslation();
 	const [text, setText] = useState('');
-	const getEmails = useCallback((text) => text.split(/[\ ,;]+/i).filter((val: string) => validateEmail(val)), []);
+	const getEmails = useCallback((text: string) => text.split(/[\ ,;]+/i).filter((val: string) => validateEmail(val)), []);
 	const adminRouter = useRoute('admin-settings');
 	const sendInvitationMutation = useSendInvitationEmailMutation();
 	const { data, isLoading } = useSmtpQuery();

apps/meteor/client/views/admin/viewLogs/ServerLogs.tsx

@@ -56,7 +56,7 @@ const ServerLogs = (): ReactElement => {
 
 	const [newLogsVisible, setNewLogsVisible] = useState(false);
 
-	const isAtBottom = useCallback((scrollThreshold = 0) => {
+	const isAtBottom = useCallback<(scrollThreshold?: number) => boolean>((scrollThreshold = 0) => {
 		const wrapper = wrapperRef.current;
 
 		if (!wrapper) {

apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx

@@ -34,7 +34,7 @@ const OmnichannelDirectoryPage = () => {
 		[router],
 	);
 
-	const handleTabClick = useCallback((tab) => router.navigate({ name: 'omnichannel-directory', params: { tab } }), [router]);
+	const handleTabClick = useCallback((tab: string) => router.navigate({ name: 'omnichannel-directory', params: { tab } }), [router]);
 
 	return (
 		<ChatsProvider>

apps/meteor/client/views/room/body/hooks/useListIsAtBottom.ts

@@ -20,7 +20,7 @@ export const useListIsAtBottom = () => {
 		}
 	}, [atBottomRef, sendToBottom]);
 
-	const isAtBottom = useCallback((threshold = 0) => {
+	const isAtBottom = useCallback<(threshold?: number) => boolean>((threshold = 0) => {
 		if (!innerBoxRef.current) {
 			return true;
 		}

apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx

@@ -2,7 +2,7 @@ import type { IDiscussionMessage } from '@rocket.chat/core-typings';
 import { Box, Icon, TextInput, Callout, Throbber } from '@rocket.chat/fuselage';
 import { useResizeObserver, useAutoFocus } from '@rocket.chat/fuselage-hooks';
 import { useSetting } from '@rocket.chat/ui-contexts';
-import type { RefObject } from 'react';
+import type { ChangeEvent, MouseEvent, RefObject } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Virtuoso } from 'react-virtuoso';
@@ -28,7 +28,7 @@ type DiscussionsListProps = {
 	onClose: () => void;
 	error: unknown;
 	text: string;
-	onChangeFilter: (e: unknown) => void;
+	onChangeFilter: (e: ChangeEvent<HTMLInputElement>) => void;
 };
 
 function DiscussionsList({
@@ -45,9 +45,9 @@ function DiscussionsList({
 	const showRealNames = useSetting('UI_Use_Real_Name', false);
 	const inputRef = useAutoFocus(true);
 
-	const onClick = useCallback((e) => {
+	const onClick = useCallback((e: MouseEvent<HTMLElement>) => {
 		const { drid } = e.currentTarget.dataset;
-		goToRoomById(drid);
+		if (drid) goToRoomById(drid);
 	}, []);
 
 	const { ref, contentBoxSize: { inlineSize = 378, blockSize = 1 } = {} } = useResizeObserver<HTMLElement>({

apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsListContextBar.tsx

@@ -1,7 +1,7 @@
 import type { IDiscussionMessage } from '@rocket.chat/core-typings';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useUserId } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ChangeEvent, ReactElement } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
 import DiscussionsList from './DiscussionsList';
@@ -30,7 +30,7 @@ const DiscussionListContextBar = (): ReactElement | null => {
 	const { discussionsList, loadMoreItems } = useDiscussionsList(options, userId);
 	const { phase, error, items: discussions, itemCount: totalItemCount } = useRecordList<IDiscussionMessage>(discussionsList);
 
-	const handleTextChange = useCallback((e) => {
+	const handleTextChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
 		setText(e.currentTarget.value);
 	}, []);
 

apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsListRow.tsx

@@ -9,7 +9,7 @@ import { normalizeThreadMessage } from '../../../../lib/normalizeThreadMessage';
 type DiscussionListRowProps = {
 	discussion: IDiscussionMessage;
 	showRealNames: boolean;
-	onClick: (e: MouseEvent) => void;
+	onClick: (e: MouseEvent<HTMLElement>) => void;
 };
 
 function DiscussionListRow({ discussion, showRealNames, onClick }: DiscussionListRowProps) {

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx

@@ -1,7 +1,7 @@
 import type { IUpload, IUploadWithUser } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box, Icon, TextInput, Select, Throbber, ContextualbarSection } from '@rocket.chat/fuselage';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Virtuoso } from 'react-virtuoso';
@@ -24,7 +24,7 @@ type RoomFilesProps = {
 	filesItems: IUploadWithUser[];
 	loadMoreItems: (start: number, end: number) => void;
 	setType: (value: any) => void;
-	setText: (e: FormEvent<HTMLElement>) => void;
+	setText: (e: ChangeEvent<HTMLInputElement>) => void;
 	total: number;
 	onClickClose: () => void;
 	onClickDelete: (id: IUpload['_id']) => void;

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesWithData.tsx

@@ -1,4 +1,5 @@
 import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import type { ChangeEvent } from 'react';
 import { useState, useCallback, useMemo } from 'react';
 
 import RoomFiles from './RoomFiles';
@@ -15,7 +16,7 @@ const RoomFilesWithData = () => {
 	const [text, setText] = useState('');
 	const [type, setType] = useLocalStorage('file-list-type', 'all');
 
-	const handleTextChange = useCallback((event) => {
+	const handleTextChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
 		setText(event.currentTarget.value);
 	}, []);
 

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersWithData.tsx

@@ -2,7 +2,7 @@ import type { IRoom, IUser } from '@rocket.chat/core-typings';
 import { isRoomFederated, isDirectMessageRoom, isTeamRoom } from '@rocket.chat/core-typings';
 import { useMutableCallback, useDebouncedValue, useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import { useUserRoom, useAtLeastOnePermission, useUser, usePermission, useUserSubscription } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { ChangeEvent, ReactElement } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
 import * as Federation from '../../../../lib/federation/Federation';
@@ -56,7 +56,7 @@ const RoomMembersWithData = ({ rid }: { rid: IRoom['_id'] }): ReactElement => {
 
 	const canAddUsers = room && user && isFederated ? Federation.isEditableByTheUser(user, room, subscription) : hasPermissionToAddUsers;
 
-	const handleTextChange = useCallback((event) => {
+	const handleTextChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
 		setText(event.currentTarget.value);
 	}, []);
 

apps/meteor/client/views/setupWizard/providers/SetupWizardProvider.tsx

@@ -56,7 +56,7 @@ const SetupWizardProvider = ({ children }: { children: ReactElement }): ReactEle
 
 	const goToPreviousStep = useCallback(() => setCurrentStep((currentStep) => currentStep - 1), [setCurrentStep]);
 	const goToNextStep = useCallback(() => setCurrentStep((currentStep) => currentStep + 1), [setCurrentStep]);
-	const goToStep = useCallback((step) => setCurrentStep(() => step), [setCurrentStep]);
+	const goToStep = useCallback((step: number) => setCurrentStep(() => step), [setCurrentStep]);
 
 	const _validateEmail = useCallback(
 		(email: string): true | string => {

apps/meteor/client/views/teams/ConvertToChannelModal/BaseConvertToChannelModal.tsx

@@ -33,7 +33,7 @@ const BaseConvertToChannelModal = ({
 
 	const eligibleRooms = rooms;
 
-	const onChangeRoomSelection = useCallback((room) => {
+	const onChangeRoomSelection = useCallback((room: Serialized<IRoom>) => {
 		setSelectedRooms((selectedRooms) => {
 			if (selectedRooms[room._id]) {
 				delete selectedRooms[room._id];

apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelsWithData.tsx

@@ -1,6 +1,7 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { useLocalStorage, useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, usePermission, useAtLeastOnePermission } from '@rocket.chat/ui-contexts';
+import type { ChangeEvent } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
 import AddExistingModal from './AddExistingModal';
@@ -36,7 +37,7 @@ const TeamsChannelsWithData = () => {
 
 	const { phase, items, itemCount: total } = useRecordList(teamsChannelList);
 
-	const handleTextChange = useCallback((event) => {
+	const handleTextChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
 		setText(event.currentTarget.value);
 	}, []);
 

apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamModal/LeaveTeamModal.tsx

@@ -27,7 +27,7 @@ const LeaveTeamModal = ({ rooms, onCancel, onConfirm }: LeaveTeamModalProps): Re
 	const handleContinue = useCallback(() => setStep(LEAVE_TEAM_STEPS.CONFIRM_LEAVE), []);
 	const handleReturn = useCallback(() => setStep(LEAVE_TEAM_STEPS.LIST_ROOMS), []);
 
-	const onChangeRoomSelection = useCallback((room) => {
+	const onChangeRoomSelection = useCallback((room: Serialized<IRoom>) => {
 		setSelectedRooms((selectedRooms) => {
 			if (selectedRooms[room._id]) {
 				delete selectedRooms[room._id];

apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/BaseRemoveUsersModal.tsx

@@ -39,7 +39,7 @@ const BaseRemoveUsersModal = ({
 
 	const eligibleRooms = rooms?.filter(({ isLastOwner }) => !isLastOwner);
 
-	const onChangeRoomSelection = useCallback((room) => {
+	const onChangeRoomSelection = useCallback((room: Serialized<IRoom>) => {
 		setSelectedRooms((selectedRooms) => {
 			if (selectedRooms[room._id]) {
 				delete selectedRooms[room._id];

apps/meteor/client/voip/modal/DialPad/hooks/useDialPad.ts

@@ -83,7 +83,7 @@ export const useDialPad = ({ initialValue, initialErrorMessage }: DialPadProps):
 		closeDialModal();
 	}, [outboundClient, setError, t, value, closeDialModal]);
 
-	const handleOnChange = useCallback((e) => onChange(e), [onChange]);
+	const handleOnChange = useCallback((e: ChangeEvent) => onChange(e), [onChange]);
 
 	useEffect(() => {
 		setDisabled(!value);

packages/ui-client/src/hooks/useDocumentTitle.ts

@@ -13,7 +13,7 @@ const titles = new Set<{
 
 const useReactiveDocumentTitle = (): string =>
 	useSyncExternalStore(
-		useCallback((callback) => ee.on('change', callback), []),
+		useCallback((callback: () => void) => ee.on('change', callback), []),
 		(): string =>
 			Array.from(titles)
 				.reverse()
@@ -23,7 +23,7 @@ const useReactiveDocumentTitle = (): string =>
 
 const useReactiveDocumentTitleKey = (): string =>
 	useSyncExternalStore(
-		useCallback((callback) => ee.on('change', callback), []),
+		useCallback((callback: () => void) => ee.on('change', callback), []),
 		(): string =>
 			Array.from(titles)
 				.filter(({ refocus }) => refocus)

packages/ui-contexts/src/hooks/useRolesDescription.ts

@@ -4,7 +4,7 @@ import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import type { IRoles } from '../AuthorizationContext';
 import { AuthorizationContext } from '../AuthorizationContext';
 
-export const useRolesDescription = (): ((ids: Array<string>) => [string]) => {
+export const useRolesDescription = () => {
 	const { roleStore } = useContext(AuthorizationContext);
 
 	const [subscribe, getSnapshot] = useMemo(
@@ -22,7 +22,5 @@ export const useRolesDescription = (): ((ids: Array<string>) => [string]) => {
 
 	const roles = useSyncExternalStore(subscribe, getSnapshot);
 
-	return useCallback((values) => values.map((role) => roles[role]?.description || roles[role]?.name || role), [roles]) as (
-		ids: Array<string>,
-	) => [string];
+	return useCallback((ids: string[]) => ids.map((role) => roles[role]?.description || roles[role]?.name || role), [roles]);
 };

packages/ui-contexts/src/hooks/useSessionDispatch.ts

@@ -2,7 +2,7 @@ import { useCallback, useContext } from 'react';
 
 import { SessionContext } from '../SessionContext';
 
-export const useSessionDispatch = (name: string): ((value: unknown) => void) => {
+export const useSessionDispatch = (name: string) => {
 	const { dispatch } = useContext(SessionContext);
-	return useCallback((value) => dispatch(name, value), [dispatch, name]);
+	return useCallback((value: unknown) => dispatch(name, value), [dispatch, name]);
 };