refactor: Strict types on useCallback (#34870)

apps/meteor/client/components/Omnichannel/hooks/useAgentsList.ts

@@ -37,7 +37,7 @@ export const useAgentsList = (
 	}, [options, reload]);
 
 	const fetchData = useCallback(
-		async (start, end) => {
+		async (start: number, end: number) => {
 			const { users: agents, total } = await getAgents({
 				...(text && { text }),
 				...(excludeId && { excludeId }),

apps/meteor/client/components/Omnichannel/hooks/useAvailableAgentsList.ts

@@ -29,7 +29,7 @@ export const useAvailableAgentsList = (
 	}, [options, reload]);
 
 	const fetchData = useCallback(
-		async (start, end) => {
+		async (start: number, end: number) => {
 			const { agents, total } = await getAgents({
 				...(options.text && { text: options.text }),
 				...(options.includeExtension && { includeExtension: options.includeExtension }),

apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts

@@ -40,7 +40,7 @@ export const useDepartmentsList = (
 	}, [options, reload]);
 
 	const fetchData = useCallback(
-		async (start, end) => {
+		async (start: number, end: number) => {
 			const { departments, total } = await getDepartments({
 				onlyMyDepartments: `${!!options.onlyMyDepartments}`,
 				text: options.filter,

apps/meteor/client/components/Omnichannel/modals/ForwardChatModal.tsx

@@ -24,16 +24,19 @@ import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import AutoCompleteAgent from '../../AutoCompleteAgent';
 import { useDepartmentsList } from '../hooks/useDepartmentsList';
 
-const ForwardChatModal = ({
-	onForward,
-	onCancel,
-	room,
-	...props
-}: {
+type ForwardChatModalFormData = {
+	comment: string;
+	department: string;
+	username: string;
+};
+
+type ForwardChatModalProps = {
 	onForward: (departmentId?: string, userId?: string, comment?: string) => Promise<void>;
 	onCancel: () => void;
 	room: IOmnichannelRoom;
-}): ReactElement => {
+};
+
+const ForwardChatModal = ({ onForward, onCancel, room, ...props }: ForwardChatModalProps): ReactElement => {
 	const { t } = useTranslation();
 	const getUserData = useEndpoint('GET', '/v1/users.info');
 	const idleAgentsAllowedForForwarding = useSetting('Livechat_enabled_when_agent_idle', true);
@@ -46,7 +49,7 @@ const ForwardChatModal = ({
 		setValue,
 		watch,
 		formState: { isSubmitting },
-	} = useForm();
+	} = useForm<ForwardChatModalFormData>();
 
 	useEffect(() => {
 		setFocus('comment');
@@ -73,7 +76,7 @@ const ForwardChatModal = ({
 	);
 
 	const onSubmit = useCallback(
-		async ({ department: departmentId, username, comment }) => {
+		async ({ department: departmentId, username, comment }: ForwardChatModalFormData) => {
 			let uid;
 
 			if (username) {

apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx

@@ -32,7 +32,7 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, name, disab
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const setUploadedPreview = useCallback(
-		async (file, avatarObj) => {
+		async (file: File, avatarObj: AvatarObject) => {
 			setAvatarObj(avatarObj);
 			try {
 				const dataURL = await readFileAsDataURL(file);

apps/meteor/client/hooks/useRoomsList.ts

@@ -33,7 +33,7 @@ export const useRoomsList = (
 	}, [options, reload]);
 
 	const fetchData = useCallback(
-		async (start, end) => {
+		async (start: number, end: number) => {
 			const { items: rooms, total } = await getRooms({
 				selector: JSON.stringify({ name: options.text || '' }),
 				offset: start,

apps/meteor/client/hooks/useTagsList.ts

@@ -32,7 +32,7 @@ export const useTagsList = (options: TagsListOptions): UseTagsListResult => {
 	}, [options, reload]);
 
 	const fetchData = useCallback(
-		async (start, end) => {
+		async (start: number, end: number) => {
 			const { tags, total } = await getTags({
 				text: filter,
 				offset: start,

apps/meteor/client/omnichannel/cannedResponses/CannedResponseEdit.tsx

@@ -10,6 +10,15 @@ import CannedResponseForm from './components/cannedResponseForm';
 import { useRemoveCannedResponse } from './useRemoveCannedResponse';
 import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../components/Page';
 
+type CannedResponseEditFormData = {
+	_id: string;
+	shortcut: string;
+	text: string;
+	tags: string[];
+	scope: string;
+	departmentId: string;
+};
+
 type CannedResponseEditProps = {
 	cannedResponseData?: Serialized<IOmnichannelCannedResponse>;
 	departmentData?: Serialized<ILivechatDepartment>;
@@ -32,7 +41,7 @@ const CannedResponseEdit = ({ cannedResponseData }: CannedResponseEditProps) =>
 
 	const saveCannedResponse = useEndpoint('POST', '/v1/canned-responses');
 
-	const methods = useForm({ defaultValues: getInitialData(cannedResponseData) });
+	const methods = useForm<CannedResponseEditFormData>({ defaultValues: getInitialData(cannedResponseData) });
 
 	const {
 		handleSubmit,
@@ -43,10 +52,9 @@ const CannedResponseEdit = ({ cannedResponseData }: CannedResponseEditProps) =>
 	const handleDelete = useRemoveCannedResponse();
 
 	const handleSave = useCallback(
-		async ({ departmentId, ...data }) => {
+		async ({ departmentId, ...data }: CannedResponseEditFormData) => {
 			try {
 				await saveCannedResponse({
-					_id: cannedResponseData?._id,
 					...data,
 					...(departmentId && { departmentId }),
 				});

apps/meteor/client/omnichannel/cannedResponses/modals/CreateCannedResponse/CreateCannedResponseModal.tsx

@@ -8,6 +8,18 @@ import { useTranslation } from 'react-i18next';
 import GenericModal from '../../../../components/GenericModal';
 import CannedResponseForm from '../../components/cannedResponseForm';
 
+type CreateCannedResponseModalFormData = {
+	_id: string;
+	shortcut: string;
+	text: string;
+	tags: {
+		label: string;
+		value: string;
+	}[];
+	scope: string;
+	departmentId: string;
+};
+
 const getInitialData = (
 	cannedResponseData: (IOmnichannelCannedResponse & { departmentName: ILivechatDepartment['name'] }) | undefined,
 ) => ({
@@ -22,19 +34,17 @@ const getInitialData = (
 	departmentId: cannedResponseData?.departmentId || '',
 });
 
-const CreateCannedResponseModal = ({
-	cannedResponseData,
-	onClose,
-	reloadCannedList,
-}: {
+type CreateCannedResponseModalProps = {
 	cannedResponseData?: IOmnichannelCannedResponse & { departmentName: ILivechatDepartment['name'] };
 	onClose: () => void;
 	reloadCannedList: () => void;
-}) => {
+};
+
+const CreateCannedResponseModal = ({ cannedResponseData, onClose, reloadCannedList }: CreateCannedResponseModalProps) => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const methods = useForm({ defaultValues: getInitialData(cannedResponseData) });
+	const methods = useForm<CreateCannedResponseModalFormData>({ defaultValues: getInitialData(cannedResponseData) });
 	const {
 		handleSubmit,
 		formState: { isDirty },
@@ -43,10 +53,9 @@ const CreateCannedResponseModal = ({
 	const saveCannedResponse = useEndpoint('POST', '/v1/canned-responses');
 
 	const handleCreate = useCallback(
-		async ({ departmentId, ...data }) => {
+		async ({ departmentId, ...data }: CreateCannedResponseModalFormData) => {
 			try {
 				await saveCannedResponse({
-					_id: cannedResponseData?._id,
 					...data,
 					...(departmentId && { departmentId }),
 				});

apps/meteor/client/omnichannel/hooks/useCannedResponseList.ts

@@ -30,7 +30,7 @@ export const useCannedResponseList = (
 	const getDepartments = useEndpoint('GET', '/v1/livechat/department');
 
 	const fetchData = useCallback(
-		async (start, end) => {
+		async (start: number, end: number) => {
 			const { cannedResponses, total } = await getCannedResponses({
 				...(options.filter && { text: options.filter }),
 				...(options.type && ['global', 'user'].find((option) => option === options.type) && { scope: options.type }),

apps/meteor/client/providers/CallProvider/CallProvider.tsx

@@ -76,7 +76,12 @@ export const CallProvider = ({ children }: CallProviderProps) => {
 	const voipSounds = useVoipSounds();
 
 	const closeRoom = useCallback(
-		async (data = {}): Promise<void> => {
+		async (
+			data: {
+				comment?: string;
+				tags?: string[];
+			} = {},
+		): Promise<void> => {
 			roomInfo &&
 				(await voipCloseRoomEndpoint({
 					rid: roomInfo.rid,

apps/meteor/client/providers/SettingsProvider.tsx

@@ -91,30 +91,19 @@ const SettingsProvider = ({ children, privileged = false }: SettingsProviderProp
 
 	const queryClient = useQueryClient();
 
-	// FIXME: This is a temporary solution to invalidate queries when settings change
-	const settingsChangeCallback = useCallback(
-		(changes: { _id: string }[]): void => {
+	const saveSettings = useMethod('saveSettings');
+	const dispatch = useCallback(
+		async (changes: Partial<ISetting>[]) => {
+			// FIXME: This is a temporary solution to invalidate queries when settings change
 			changes.forEach((val) => {
-				switch (val._id) {
-					case 'Enterprise_License':
-						queryClient.invalidateQueries({ queryKey: ['licenses'] });
-						break;
-
-					default:
-						break;
+				if (val._id === 'Enterprise_License') {
+					queryClient.invalidateQueries({ queryKey: ['licenses'] });
 				}
 			});
-		},
-		[queryClient],
-	);
 
-	const saveSettings = useMethod('saveSettings');
-	const dispatch = useCallback(
-		async (changes) => {
-			settingsChangeCallback(changes);
-			await saveSettings(changes);
+			await saveSettings(changes as Pick<ISetting, '_id' | 'value'>[]);
 		},
-		[saveSettings, settingsChangeCallback],
+		[queryClient, saveSettings],
 	);
 
 	const contextValue = useMemo<SettingsContextValue>(

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

@@ -13,7 +13,7 @@ const PreferencesMyDataSection = () => {
 	const requestDataDownload = useMethod('requestDataDownload');
 
 	const downloadData = useCallback(
-		async (fullExport) => {
+		async (fullExport: boolean) => {
 			try {
 				const result = await requestDataDownload({ fullExport });
 				if (result.requested) {

apps/meteor/client/views/account/security/TwoFactorTOTP.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, TextInput, Margins } from '@rocket.chat/fuselage';
 import { useSafely } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useToastMessageDispatch, useUser, useMethod } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ComponentProps } from 'react';
+import type { ReactElement, ComponentPropsWithoutRef } from 'react';
 import { useState, useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +11,13 @@ import BackupCodesModal from './BackupCodesModal';
 import TextCopy from '../../../components/TextCopy';
 import TwoFactorTotpModal from '../../../components/TwoFactorModal/TwoFactorTotpModal';
 
-const TwoFactorTOTP = (props: ComponentProps<typeof Box>): ReactElement => {
+type TwoFactorTOTPFormData = {
+	authCode: string;
+};
+
+type TwoFactorTOTPProps = ComponentPropsWithoutRef<typeof Box>;
+
+const TwoFactorTOTP = (props: TwoFactorTOTPProps): ReactElement => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const user = useUser();
@@ -28,7 +34,7 @@ const TwoFactorTOTP = (props: ComponentProps<typeof Box>): ReactElement => {
 	const [totpSecret, setTotpSecret] = useSafely(useState<string>());
 	const [codesRemaining, setCodesRemaining] = useSafely(useState(0));
 
-	const { register, handleSubmit } = useForm({ defaultValues: { authCode: '' } });
+	const { register, handleSubmit } = useForm<TwoFactorTOTPFormData>({ defaultValues: { authCode: '' } });
 
 	const totpEnabled = user?.services?.totp?.enabled;
 
@@ -78,7 +84,7 @@ const TwoFactorTOTP = (props: ComponentProps<typeof Box>): ReactElement => {
 	}, [closeModal, disableTotpFn, dispatchToastMessage, setModal, t]);
 
 	const handleVerifyCode = useCallback(
-		async ({ authCode }) => {
+		async ({ authCode }: TwoFactorTOTPFormData) => {
 			try {
 				const result = await verifyCodeFn(authCode);
 

apps/meteor/client/views/account/tokens/AccountTokensTable/AddToken.tsx

@@ -1,14 +1,22 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { Box, TextInput, Button, Margins, Select } from '@rocket.chat/fuselage';
 import { useSetModal, useToastMessageDispatch, useUserId, useMethod } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
 import { useCallback, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import GenericModal from '../../../../components/GenericModal';
 
-const AddToken = ({ reload }: { reload: () => void }): ReactElement => {
+type AddTokenFormData = {
+	name: string;
+	bypassTwoFactor: string;
+};
+
+type AddTokenProps = {
+	reload: () => void;
+};
+
+const AddToken = ({ reload }: AddTokenProps) => {
 	const { t } = useTranslation();
 	const userId = useUserId();
 	const setModal = useSetModal();
@@ -23,7 +31,7 @@ const AddToken = ({ reload }: { reload: () => void }): ReactElement => {
 		handleSubmit,
 		control,
 		formState: { isSubmitted, submitCount },
-	} = useForm({ defaultValues: initialValues });
+	} = useForm<AddTokenFormData>({ defaultValues: initialValues });
 
 	const twoFactorAuthOptions: SelectOption[] = useMemo(
 		() => [
@@ -34,7 +42,7 @@ const AddToken = ({ reload }: { reload: () => void }): ReactElement => {
 	);
 
 	const handleAddToken = useCallback(
-		async ({ name: tokenName, bypassTwoFactor }) => {
+		async ({ name: tokenName, bypassTwoFactor }: AddTokenFormData) => {
 			try {
 				const token = await createTokenFn({ tokenName, bypassTwoFactor: bypassTwoFactor === 'bypass' });
 

apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx

@@ -21,7 +21,7 @@ const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps): Rea
 	const [errors, setErrors] = useState({ name: false, emoji: false, aliases: false });
 
 	const setEmojiPreview = useCallback(
-		async (file) => {
+		async (file: Blob) => {
 			setEmojiFile(file);
 			setNewEmojiPreview(URL.createObjectURL(file));
 			setErrors((prevState) => ({ ...prevState, emoji: false }));

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

@@ -31,7 +31,8 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr
 	const [clickUpload] = useSingleFileInput(handleChangeFile, 'audio/mp3');
 
 	const saveAction = useCallback(
-		async (name, soundFile): Promise<string | undefined> => {
+		// FIXME
+		async (name: string, soundFile: any) => {
 			const soundData = createSoundData(soundFile, name);
 			const validation = validate(soundData, soundFile) as Array<Parameters<typeof t>[0]>;
 

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

@@ -53,7 +53,8 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl
 	const hasUnsavedChanges = useMemo(() => previousName !== name || previousSound !== sound, [name, previousName, previousSound, sound]);
 
 	const saveAction = useCallback(
-		async (sound) => {
+		// FIXME
+		async (sound: any) => {
 			const soundData = createSoundData(sound, name, { previousName, previousSound, _id, extension: sound.extension });
 			const validation = validate(soundData, sound);
 			if (validation.length === 0) {