feat: show profile pic upload failed for user avatar change

Author: Bilb

ts/components/SessionInboxView.tsx

@@ -78,6 +78,7 @@ async function createSessionInboxStore() {
       ourDisplayNameInProfile: UserUtils.getOurProfile()?.displayName || '',
       ourNumber: UserUtils.getOurPubKeyStrFromCache(),
       uploadingNewAvatarCurrentUser: false,
+      uploadingNewAvatarCurrentUserFailed: false,
     },
     section: initialSectionState,
     defaultRooms: initialDefaultRoomState,

ts/components/dialog/EditProfilePictureModal.tsx

@@ -22,7 +22,7 @@ import { groupInfoActions } from '../../state/ducks/metaGroups';
 import { useGroupAvatarChangeFromUIPending } from '../../state/selectors/groups';
 import { userActions } from '../../state/ducks/user';
 import { ReduxSogsRoomInfos } from '../../state/ducks/sogsRoomInfo';
-import { useOurAvatarIsUploading } from '../../state/selectors/user';
+import { useOurAvatarIsUploading, useOurAvatarUploadFailed } from '../../state/selectors/user';
 import { useAvatarOfRoomIsUploading } from '../../state/selectors/sogsRoomInfo';
 import {
   ModalActionsContainer,
@@ -41,6 +41,9 @@ import { useProBadgeOnClickCb } from '../menuAndSettingsHooks/useProBadgeOnClick
 import { useUserHasPro } from '../../hooks/useHasPro';
 import { Localizer } from '../basic/Localizer';
 import { UploadFirstImageButton } from '../buttons/avatar/UploadFirstImageButton';
+import { Flex } from '../basic/Flex';
+import { LucideIcon } from '../icon/LucideIcon';
+import { LUCIDE_ICONS_UNICODE } from '../icon/lucide';
 
 const StyledAvatarContainer = styled.div`
   cursor: pointer;
@@ -142,6 +145,7 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo
 
   const groupAvatarChangePending = useGroupAvatarChangeFromUIPending();
   const ourAvatarIsUploading = useOurAvatarIsUploading();
+  const ourAvatarUploadFailed = useOurAvatarUploadFailed();
   const sogsAvatarIsUploading = useAvatarOfRoomIsUploading(conversationId);
 
   const [newAvatarObjectUrl, setNewAvatarObjectUrl] = useState<string | null>(avatarPath);
@@ -312,7 +316,21 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo
           )}
         </StyledAvatarContainer>
       </div>
-      {}
+      {ourAvatarUploadFailed && isMe ? (
+        <Flex
+          $container={true}
+          $justifyContent="center"
+          $alignItems="center"
+          $flexGap="var(--margins-xs)"
+          style={{
+            marginTop: 'var(--margins-lg)',
+            color: 'var(--danger-color)',
+          }}
+        >
+          <LucideIcon unicode={LUCIDE_ICONS_UNICODE.TRIANGLE_ALERT} iconSize="small" />
+          <Localizer token="profileErrorUpdate" />
+        </Flex>
+      ) : null}
       {loading ? (
         <>
           <SpacerSM />

ts/components/dialog/UpdateConversationDetailsDialog.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import useKey from 'react-use/lib/useKey';
 import useMount from 'react-use/lib/useMount';
+import { isEmpty } from 'lodash';
 
 import {
   useAvatarPath,
@@ -42,6 +43,8 @@ import {
 import { ReduxSogsRoomInfos } from '../../state/ducks/sogsRoomInfo';
 import type { WithConvoId } from '../../session/types/with';
 import { UploadFirstImageButton } from '../buttons/avatar/UploadFirstImageButton';
+import { sanitizeDisplayNameOrToast } from '../registration/utils';
+import { ProfileManager } from '../../session/profile_manager/ProfileManager';
 
 function useNameErrorString({
   isMe,
@@ -164,6 +167,21 @@ export function UpdateConversationDetailsDialog(props: WithConvoId) {
     }
 
     if (trimmedGroupName !== nameOnOpen || trimmedGroupDescription !== descriptionOnOpen) {
+      if (isMe) {
+        const sanitizedName = sanitizeDisplayNameOrToast(trimmedGroupName);
+
+        // this should never happen, but just in case
+        if (isEmpty(sanitizedName)) {
+          return;
+        }
+
+        // this truncates if the display name is too long
+        // Note: this not doing any network calls. No need for a loader in this case
+        void ProfileManager.updateOurProfileDisplayName(sanitizedName);
+        closeDialog();
+
+        return;
+      }
       if (isPublic) {
         const updateDetailsAction = ReduxSogsRoomInfos.roomDetailsChange({
           conversationId,

ts/components/dialog/user-settings/pages/DefaultSettingsPage.tsx

@@ -385,8 +385,6 @@ export const DefaultSettingPage = () => {
               conversationId={us}
               onPlusAvatarClick={null}
               dataTestId="avatar-edit-profile-dialog"
-              // no qr click here as a button is already doing that action (and the qr button looks bad when the small size as the +)
-              // Note: this changes with the new Settings design
               onQRClick={() => setMode('qr')}
               enlargedImage={enlargedImage}
               toggleEnlargedImage={() => setEnlargedImage(!enlargedImage)}

ts/session/profile_manager/ProfileManager.ts

@@ -161,7 +161,7 @@ async function updateOurProfileDisplayName(newName: string) {
 
   // might be good to not trigger a sync if the name did not change
   await conversation.commit();
-  await SyncUtils.forceSyncConfigurationNowIfNeeded(true);
+  void SyncUtils.forceSyncConfigurationNowIfNeeded(true);
 
   return truncatedName;
 }

ts/state/ducks/user.ts

@@ -11,12 +11,14 @@ export type UserStateType = {
   ourDisplayNameInProfile: string;
   ourNumber: string;
   uploadingNewAvatarCurrentUser: boolean;
+  uploadingNewAvatarCurrentUserFailed: boolean;
 };
 
 export const initialUserState: UserStateType = {
   ourDisplayNameInProfile: '',
   ourNumber: 'missing',
   uploadingNewAvatarCurrentUser: false,
+  uploadingNewAvatarCurrentUserFailed: false,
 };
 
 /**
@@ -43,9 +45,10 @@ const updateOurAvatar = createAsyncThunk(
       profileKey,
     });
 
-    window.inboxStore?.dispatch(updateEditProfilePictureModal(null));
-    window.inboxStore?.dispatch(userSettingsModal({ userSettingsPage: 'default' }));
-
+    if (res) {
+      window.inboxStore?.dispatch(updateEditProfilePictureModal(null));
+      window.inboxStore?.dispatch(userSettingsModal({ userSettingsPage: 'default' }));
+    }
     return res;
   }
 );
@@ -111,16 +114,18 @@ const userSlice = createSlice({
       window.log.info('a updateOurAvatar was fulfilled with:', action.payload);
 
       state.uploadingNewAvatarCurrentUser = false;
+      state.uploadingNewAvatarCurrentUserFailed = !action.payload;
       return state;
     });
     builder.addCase(updateOurAvatar.rejected, (state, action) => {
       window.log.error('a updateOurAvatar was rejected', action.error);
       state.uploadingNewAvatarCurrentUser = false;
+      state.uploadingNewAvatarCurrentUserFailed = true;
       return state;
     });
     builder.addCase(updateOurAvatar.pending, (state, _action) => {
       state.uploadingNewAvatarCurrentUser = true;
-
+      state.uploadingNewAvatarCurrentUserFailed = false;
       window.log.debug('a updateOurAvatar is pending');
       return state;
     });

ts/state/selectors/user.ts

@@ -25,3 +25,7 @@ export function useOurPkStr() {
 export function useOurAvatarIsUploading() {
   return useSelector((state: StateType) => getUser(state).uploadingNewAvatarCurrentUser);
 }
+
+export function useOurAvatarUploadFailed() {
+  return useSelector((state: StateType) => getUser(state).uploadingNewAvatarCurrentUserFailed);
+}