diff --git a/native/avatars/avatar-hooks.js b/native/avatars/avatar-hooks.js --- a/native/avatars/avatar-hooks.js +++ b/native/avatars/avatar-hooks.js @@ -223,6 +223,7 @@ dispatchActionPromise( updateUserAvatarActionTypes, (async () => { + setProcessingOrUploadInProgress(false); try { return await updateUserAvatarCall(imageAvatarUpdateRequest); } catch { @@ -230,7 +231,6 @@ } })(), ); - setProcessingOrUploadInProgress(false); }, [ dispatchActionPromise, processSelectedMedia, @@ -245,9 +245,13 @@ ); } +const threadAvatarLoadingStatusSelector = createLoadingStatusSelector( + changeThreadSettingsActionTypes, + `${changeThreadSettingsActionTypes.started}:avatar`, +); function useSelectFromGalleryAndUpdateThreadAvatar( threadID: string, -): () => Promise { +): [() => Promise, boolean] { const dispatchActionPromise = useDispatchActionPromise(); const changeThreadSettingsCall = useServerCall(changeThreadSettings); @@ -255,33 +259,70 @@ const processSelectedMedia = useProcessSelectedMedia(); const uploadProcessedMedia = useUploadProcessedMedia(); + const [processingOrUploadInProgress, setProcessingOrUploadInProgress] = + React.useState(false); + + const updateThreadAvatarLoadingStatus: LoadingStatus = useSelector( + threadAvatarLoadingStatusSelector, + ); + + const inProgress = React.useMemo( + () => + processingOrUploadInProgress || + updateThreadAvatarLoadingStatus === 'loading', + [processingOrUploadInProgress, updateThreadAvatarLoadingStatus], + ); + const selectFromGalleryAndUpdateThreadAvatar = React.useCallback(async () => { const selection: ?MediaLibrarySelection = await selectFromGallery(); if (!selection) { - console.log('MEDIA_SELECTION_FAILED'); + Alert.alert( + 'Media selection failed', + 'Unable to select media from Media Library.', + ); return; } - const processedMedia = await processSelectedMedia(selection); - if (!processedMedia.success) { - console.log('MEDIA_PROCESSING_FAILED'); - // TODO (atul): Clean up any temporary files. + setProcessingOrUploadInProgress(true); + let processedMedia; + try { + processedMedia = await processSelectedMedia(selection); + } catch (e) { + Alert.alert( + 'Media processing failed', + 'Unable to process selected media.', + ); + setProcessingOrUploadInProgress(false); + return; + } + + if (!processedMedia || !processedMedia.success) { + Alert.alert( + 'Media processing failed', + 'Unable to process selected media.', + ); + setProcessingOrUploadInProgress(false); return; } let uploadedMedia: ?UploadMultimediaResult; try { uploadedMedia = await uploadProcessedMedia(processedMedia); - // TODO (atul): Clean up any temporary files. } catch { - console.log('MEDIA_UPLOAD_FAILED'); - // TODO (atul): Clean up any temporary files. + Alert.alert( + 'Media upload failed', + 'Unable to upload selected media. Please try again.', + ); + setProcessingOrUploadInProgress(false); return; } if (!uploadedMedia) { - console.log('MEDIA_UPLOAD_FAILED'); - // TODO (atul): Clean up any temporary files. + Alert.alert( + 'Media upload failed', + 'Unable to upload selected media. Please try again.', + ); + setProcessingOrUploadInProgress(false); return; } @@ -299,7 +340,14 @@ dispatchActionPromise( changeThreadSettingsActionTypes, - changeThreadSettingsCall(updateThreadRequest), + (async () => { + setProcessingOrUploadInProgress(false); + try { + return await changeThreadSettingsCall(updateThreadRequest); + } catch { + Alert.alert('Avatar update failed', 'Unable to update avatar.'); + } + })(), { customKeyName: `${changeThreadSettingsActionTypes.started}:avatar` }, ); }, [ @@ -311,17 +359,20 @@ uploadProcessedMedia, ]); - return selectFromGalleryAndUpdateThreadAvatar; + return React.useMemo( + () => [selectFromGalleryAndUpdateThreadAvatar, inProgress], + [inProgress, selectFromGalleryAndUpdateThreadAvatar], + ); } -function useRemoveUserAvatar(): [() => Promise, boolean] { +function useRemoveUserAvatar(): [() => void, boolean] { const dispatchActionPromise = useDispatchActionPromise(); const updateUserAvatarCall = useServerCall(updateUserAvatar); const updateUserAvatarLoadingStatus: LoadingStatus = useSelector( updateUserAvatarLoadingStatusSelector, ); - const removeUserAvatar = React.useCallback(async () => { + const removeUserAvatar = React.useCallback(() => { const removeAvatarRequest: UpdateUserAvatarRemoveRequest = { type: 'remove', }; @@ -344,11 +395,14 @@ ); } -function useRemoveThreadAvatar(threadID: string): () => Promise { +function useRemoveThreadAvatar(threadID: string): [() => void, boolean] { const dispatchActionPromise = useDispatchActionPromise(); const changeThreadSettingsCall = useServerCall(changeThreadSettings); + const updateThreadAvatarLoadingStatus: LoadingStatus = useSelector( + threadAvatarLoadingStatusSelector, + ); - const removeThreadAvatar = React.useCallback(async () => { + const removeThreadAvatar = React.useCallback(() => { const removeAvatarRequest: UpdateUserAvatarRemoveRequest = { type: 'remove', }; @@ -359,13 +413,24 @@ avatar: removeAvatarRequest, }, }; + dispatchActionPromise( changeThreadSettingsActionTypes, - changeThreadSettingsCall(updateThreadRequest), + (async () => { + try { + return await changeThreadSettingsCall(updateThreadRequest); + } catch { + Alert.alert('Avatar update failed', 'Unable to update avatar.'); + } + })(), + { customKeyName: `${changeThreadSettingsActionTypes.started}:avatar` }, ); }, [changeThreadSettingsCall, dispatchActionPromise, threadID]); - return removeThreadAvatar; + return React.useMemo( + () => [removeThreadAvatar, updateThreadAvatarLoadingStatus === 'loading'], + [removeThreadAvatar, updateThreadAvatarLoadingStatus], + ); } function useENSUserAvatar(): [() => Promise, boolean] { diff --git a/native/avatars/edit-thread-avatar.react.js b/native/avatars/edit-thread-avatar.react.js --- a/native/avatars/edit-thread-avatar.react.js +++ b/native/avatars/edit-thread-avatar.react.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react'; -import { TouchableOpacity } from 'react-native'; +import { ActivityIndicator, TouchableOpacity, View } from 'react-native'; import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js'; @@ -12,6 +12,7 @@ } from './avatar-hooks.js'; import EditAvatarBadge from './edit-avatar-badge.react.js'; import ThreadAvatar from './thread-avatar.react.js'; +import { useStyles } from '../themes/colors.js'; type Props = { +threadInfo: RawThreadInfo | ThreadInfo, @@ -19,12 +20,17 @@ +disabled?: boolean, }; function EditThreadAvatar(props: Props): React.Node { + const styles = useStyles(unboundStyles); const { threadInfo, onPressEmojiAvatarFlow, disabled } = props; - const selectFromGalleryAndUpdateThreadAvatar = + const [selectFromGalleryAndUpdateThreadAvatar, isGalleryAvatarUpdateLoading] = useSelectFromGalleryAndUpdateThreadAvatar(threadInfo.id); - const removeThreadAvatar = useRemoveThreadAvatar(threadInfo.id); + const [removeThreadAvatar, isRemoveAvatarUpdateLoading] = + useRemoveThreadAvatar(threadInfo.id); + + const isAvatarUpdateInProgress = + isGalleryAvatarUpdateLoading || isRemoveAvatarUpdateLoading; const actionSheetConfig = React.useMemo( () => [ @@ -41,12 +47,34 @@ const showAvatarActionSheet = useShowAvatarActionSheet(actionSheetConfig); + let spinner; + if (isAvatarUpdateInProgress) { + spinner = ( + + + + ); + } + return ( + {spinner} {!disabled ? : null} ); } +const unboundStyles = { + spinnerContainer: { + position: 'absolute', + alignItems: 'center', + justifyContent: 'center', + top: 0, + bottom: 0, + left: 0, + right: 0, + }, +}; + export default EditThreadAvatar;