import type { AvatarObject, AvatarServiceObject, AvatarReset, AvatarUrlObj, IUser } from '@rocket.chat/core-typings'; import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { useEndpointMutation } from './useEndpointMutation'; import { useEndpointUploadMutation } from './useEndpointUploadMutation'; const isAvatarReset = (avatarObj: AvatarObject): avatarObj is AvatarReset => avatarObj === 'reset'; const isServiceObject = (avatarObj: AvatarObject): avatarObj is AvatarServiceObject => !isAvatarReset(avatarObj) && typeof avatarObj === 'object' && 'service' in avatarObj; const isAvatarUrl = (avatarObj: AvatarObject): avatarObj is AvatarUrlObj => !isAvatarReset(avatarObj) && typeof avatarObj === 'object' && 'service' && 'avatarUrl' in avatarObj; export const useUpdateAvatar = (avatarObj: AvatarObject, userId: IUser['_id']) => { const { t } = useTranslation(); const avatarUrl = isAvatarUrl(avatarObj) ? avatarObj.avatarUrl : ''; const successMessage = t('Avatar_changed_successfully'); const dispatchToastMessage = useToastMessageDispatch(); const { mutateAsync: saveAvatarAction } = useEndpointUploadMutation('/v1/users.setAvatar', { onSuccess: () => { dispatchToastMessage({ type: 'success', message: successMessage }); }, }); const { mutateAsync: saveAvatarUrlAction } = useEndpointMutation('POST', '/v1/users.setAvatar', { onSuccess: () => { dispatchToastMessage({ type: 'success', message: successMessage }); }, }); const { mutateAsync: resetAvatarAction } = useEndpointMutation('POST', '/v1/users.resetAvatar', { onSuccess: () => { dispatchToastMessage({ type: 'success', message: successMessage }); }, }); const updateAvatar = useCallback(async () => { if (isAvatarReset(avatarObj)) { await resetAvatarAction({ userId, }); return; } if (isAvatarUrl(avatarObj)) { await saveAvatarUrlAction({ userId, ...(avatarUrl && { avatarUrl }), }); return; } if (isServiceObject(avatarObj)) { const { blob, contentType, service } = avatarObj; const formData = new FormData(); formData.append('userId', userId); formData.append('service', service); // `blob` holds the provider's data URI (see UserAvatarSuggestion); wrap it in a Blob so it is sent as a // file part the REST endpoint can read back as the data URI string formData.append('image', new Blob([blob], { type: contentType }), 'avatar'); await saveAvatarAction(formData); return; } if (avatarObj instanceof FormData) { avatarObj.set('userId', userId); await saveAvatarAction(avatarObj); } }, [avatarObj, avatarUrl, resetAvatarAction, saveAvatarAction, saveAvatarUrlAction, successMessage, userId]); return updateAvatar; };