Update photo on browser when new profile photo is chosen

Client/src/app/app.component.ts

@@ -28,6 +28,7 @@ export class AppComponent implements OnInit {
 
     if (user) {
       this.authService.currentUser = user;
+      this.authService.changeProfilePhoto(user.photoUrl);
     }
   }
 

Client/src/app/components/members/member-edit/member-edit.component.html

@@ -12,7 +12,7 @@ <h3>Your Profile</h3>
       <div class="row">
         <div class="col-sm-4">
           <div class="card">
-            <img class="card-img-top img-thumbnail" src="{{user.photoUrl}}" alt="{{user.knownAs}}" />
+            <img class="card-img-top img-thumbnail" src="{{photoUrl}}" alt="{{user.knownAs}}" />
             <div class="card-body">
               <div>
                 <strong>Location:</strong>

Client/src/app/components/members/member-edit/member-edit.component.ts

@@ -21,6 +21,7 @@ export class MemberEditComponent implements OnInit {
   }
 
   user: User;
+  photoUrl: string;
 
   constructor(
     private route: ActivatedRoute,
@@ -33,6 +34,8 @@ export class MemberEditComponent implements OnInit {
     this.route.data.subscribe(data => {
       this.user = data['user'];
     });
+
+    this.authService.currentPhotoUrl.subscribe(photoUrl => this.photoUrl = photoUrl);
   }
 
   updateUser() {

Client/src/app/components/members/photo-editor/photo-editor.component.ts

@@ -66,8 +66,9 @@ export class PhotoEditorComponent implements OnInit {
         this.currentMainPhoto = this.photos.filter(p => p.isMain)[0];
         this.currentMainPhoto.isMain = false;
         photo.isMain = true;
-        this.getMemberPhotoChange.emit(photo.url);
-
+        this.authService.changeProfilePhoto(photo.url);
+        this.authService.currentUser.photoUrl = photo.url;
+        localStorage.setItem('user', JSON.stringify(this.authService.currentUser))
       }, error => {
         this.alertify.error(error);
       })

Client/src/app/components/nav-menu/nav-menu.component.html

@@ -16,7 +16,7 @@
 
     <div class="dropdown" *ngIf="isAuthenticated()" dropdown>
       <span class="mr-2">
-        <img src="{{ authService.currentUser.photoUrl }}" />
+        <img src="{{ photoUrl }}" />
       </span>
       <a class="dropdown-toggle text-light" dropdownToggle>
         Welcome {{ authService.decodedToken?.unique_name | titlecase }}

Client/src/app/components/nav-menu/nav-menu.component.ts

@@ -10,10 +10,13 @@ import { Router } from '@angular/router';
 })
 export class NavMenuComponent implements OnInit {
   model: any = {};
+  photoUrl: string;
 
   constructor(public authService: AuthService, private alertify: AlertifyService, private router: Router) { }
 
-  ngOnInit() { }
+  ngOnInit() {
+    this.authService.currentPhotoUrl.subscribe(photoUrl => this.photoUrl = photoUrl);
+  }
 
   login() {
     this.authService.login(this.model).subscribe(next => {

Client/src/app/services/auth.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map } from 'rxjs/operators';
-import { Observable } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { JwtHelperService } from '@auth0/angular-jwt'
 import { User } from '../models/user';
 
@@ -16,6 +16,8 @@ export class AuthService {
 
   public currentUser: User;
   public decodedToken: any;
+  public photoUrl = new BehaviorSubject<string>('../../assets/placeholder.png');
+  public currentPhotoUrl = this.photoUrl.asObservable();
 
   constructor(private http: HttpClient) { }
 
@@ -29,6 +31,7 @@ export class AuthService {
             localStorage.setItem('user', JSON.stringify(user.userResource));
             this.decodedToken = this.jwtHelper.decodeToken(user.token);
             this.currentUser = user.userResource;
+            this.changeProfilePhoto(this.currentUser.photoUrl);
           }
         })
       );
@@ -42,4 +45,8 @@ export class AuthService {
     const token = localStorage.getItem('token');
     return !this.jwtHelper.isTokenExpired(token);
   }
+
+  changeProfilePhoto(photoUrl: string) {
+    this.photoUrl.next(photoUrl);
+  }
 }