Use route to control user dialog.

1 files changed, 24 insertions, 4 deletions

diff --git a/Timeline/ClientApp/src/app/user/user.service.ts b/Timeline/ClientApp/src/app/user/user.service.ts
index e876706c..076d0c21 100644
--- a/Timeline/ClientApp/src/app/user/user.service.ts
+++ b/Timeline/ClientApp/src/app/user/user.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { Router, ActivationStart } from '@angular/router';
 
 import { Observable } from 'rxjs';
 
@@ -15,7 +16,16 @@ import { UserDialogComponent } from './user-dialog/user-dialog.component';
   providedIn: 'root'
 })
 export class UserService {
-  constructor(private dialog: MatDialog, private internalService: InternalUserService) { }
+
+  private dialogRef: MatDialogRef<UserDialogComponent> | null = null;
+
+  constructor(router: Router, private dialog: MatDialog, private internalService: InternalUserService) {
+    router.events.subscribe(event => {
+      if (event instanceof ActivationStart && event.snapshot.outlet === 'user') {
+        setTimeout(() => this.openUserDialog(), 0);
+      }
+    });
+  }
 
   get currentUserInfo(): UserInfo | null {
     return this.internalService.currentUserInfo;
@@ -25,9 +35,19 @@ export class UserService {
     return this.internalService.userInfo$;
   }
 
-  openUserDialog() {
-    this.dialog.open(UserDialogComponent, {
+  private openUserDialog() {
+    if (this.dialogRef) {
+      return;
+    }
+
+    this.dialogRef = this.dialog.open(UserDialogComponent, {
       width: '300px'
     });
+
+    const subscription = this.dialogRef.afterClosed().subscribe(_ => {
+      this.internalService.userRouteNavigate(null);
+      this.dialogRef = null;
+      subscription.unsubscribe();
+    });
   }
 }