MOBILE-2799 user: Update site info if avatar changed

src/components/user-avatar/core-user-avatar.html

@@ -1,4 +1,4 @@
-<img *ngIf="profileUrl" [src]="profileUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'" role="presentation" [siteId]="siteId || null" (click)="gotoProfile($event)">
+<img *ngIf="avatarUrl" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'" role="presentation" [siteId]="siteId || null" (click)="gotoProfile($event)">
-<img *ngIf="!profileUrl" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}" role="presentation" (click)="gotoProfile($event)">
+<img *ngIf="!avatarUrl" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}" role="presentation" (click)="gotoProfile($event)">
 <span *ngIf="checkOnline && isOnline()" class="contact-status online"></span>
 <ng-content></ng-content>

src/components/user-avatar/user-avatar.ts

@@ -39,6 +39,8 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
     @Input() protected courseId?: number;
     @Input() checkOnline = false; // If want to check and show online status.
 
+    avatarUrl?: string;
+
     // Variable to check if we consider this user online or not.
     // @TODO: Use setting when available (see MDL-63972) so we can use site setting.
     protected timetoshowusers = 300000; // Miliseconds default.
@@ -52,7 +54,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
 
         this.pictureObs = eventsProvider.on(CoreUserProvider.PROFILE_PICTURE_UPDATED, (data) => {
             if (data.userId == this.userId) {
-                this.profileUrl = data.picture;
+                this.avatarUrl = data.picture;
             }
         }, this.sitesProvider.getCurrentSiteId());
     }
@@ -82,7 +84,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
             this.user.userpictureurl || this.user.profileimageurlsmall));
 
         if (typeof profileUrl == 'string') {
-            this.profileUrl = profileUrl;
+            this.avatarUrl = profileUrl;
         }
 
         this.fullname = this.fullname || (this.user && (this.user.fullname || this.user.userfullname));
@@ -92,7 +94,6 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
 
         // If not available we cannot ensure the avatar is from the current user.
         this.myUser = this.userId && this.userId == this.currentUserId;
-
     }
 
     /**

src/core/user/pages/profile/profile.ts

@@ -97,20 +97,15 @@ export class CoreUserProfilePage {
     fetchUser(): Promise<any> {
         return this.userProvider.getProfile(this.userId, this.courseId).then((user) => {
 
-            if (this.userId == this.site.getUserId() && user.profileimageurl != this.site.getInfo().userpictureurl) {
-                // The current user image received is different than the one stored in site info. Assume the image was updated.
-                this.eventsProvider.trigger(CoreUserProvider.PROFILE_PICTURE_UPDATED, {
-                    userId: this.userId,
-                    picture: user.profileimageurl
-                }, this.site.getId());
-            }
-
             user.address = this.userHelper.formatAddress('', user.city, user.country);
             user.roles = this.userHelper.formatRoleList(user.roles);
 
             this.user = user;
             this.title = user.fullname;
 
+            // If there's already a subscription, unsubscribe because we'll get a new one.
+            this.subscription && this.subscription.unsubscribe();
+
             this.subscription = this.userDelegate.getProfileHandlersFor(user, this.courseId).subscribe((handlers) => {
                 this.actionHandlers = [];
                 this.newPageHandlers = [];
@@ -133,6 +128,29 @@ export class CoreUserProfilePage {
                 this.isLoadingHandlers = !this.userDelegate.areHandlersLoaded(user.id);
             });
 
+            if (this.userId == this.site.getUserId() && user.profileimageurl != this.site.getInfo().userpictureurl) {
+                // The current user image received is different than the one stored in site info. Assume the image was updated.
+                // Update the site info to get the right avatar in there.
+                return this.sitesProvider.updateSiteInfo(this.site.getId()).then(() => {
+                    if (user.profileimageurl != this.site.getInfo().userpictureurl) {
+                        // The image is still different, this means that the good one is the one in site info.
+                        return this.refreshUser();
+                    } else {
+                        // Now they're the same, send event to use the right avatar in the rest of the app.
+                        this.eventsProvider.trigger(CoreUserProvider.PROFILE_PICTURE_UPDATED, {
+                            userId: this.userId,
+                            picture: user.profileimageurl
+                        }, this.site.getId());
+                    }
+                }, () => {
+                    // Cannot update site info. Assume the profile image is the right one.
+                    this.eventsProvider.trigger(CoreUserProvider.PROFILE_PICTURE_UPDATED, {
+                        userId: this.userId,
+                        picture: user.profileimageurl
+                    }, this.site.getId());
+                });
+            }
+
         }).catch((error) => {
             // Error is null for deleted users, do not show the modal.
             if (error) {