Fix loading issues on subsequent launches

src/app/app.component.html

@@ -4,11 +4,11 @@
 <mat-sidenav-container *ngIf="online" class="sidenav-container">
   <mat-sidenav #sidenav mode="over" closed>
     <mat-nav-list (click)="sidenav.close()">
-      <a mat-list-item *ngIf="isLoggedIn()" routerLink="">{{ getUsername() }}</a>
-      <a mat-list-item *ngIf="isLoggedIn()" routerLink="/budgets">Budgets</a>
-      <a mat-list-item *ngIf="!isLoggedIn()" routerLink="/login">Login</a>
-      <a mat-list-item *ngIf="!isLoggedIn()" routerLink="/register">Register</a>
-      <a mat-list-item *ngIf="isLoggedIn()" (click)="logout()">Logout</a>
+      <a mat-list-item *ngIf="loggedIn" routerLink="">{{ getUsername() }}</a>
+      <a mat-list-item *ngIf="loggedIn" routerLink="/budgets">Budgets</a>
+      <a mat-list-item *ngIf="!loggedIn" routerLink="/login">Login</a>
+      <a mat-list-item *ngIf="!loggedIn" routerLink="/register">Register</a>
+      <a mat-list-item *ngIf="loggedIn" (click)="logout()">Logout</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>

src/app/app.component.ts

@@ -5,7 +5,7 @@ import { TWIGS_SERVICE, TwigsService } from './shared/twigs.service';
 import { CookieService } from 'ngx-cookie-service';
 import { SwUpdate } from '@angular/service-worker';
 import { first, filter, map } from 'rxjs/operators';
-import { interval, concat } from 'rxjs';
+import { interval, concat, BehaviorSubject } from 'rxjs';
 import { Router, ActivationEnd, ActivatedRoute } from '@angular/router';
 import { Actionable, isActionable } from './shared/actionable';
 
@@ -17,10 +17,11 @@ import { Actionable, isActionable } from './shared/actionable';
 export class AppComponent {
   public title = 'Twigs';
   public backEnabled = false;
-  public user: User;
+  public user = new BehaviorSubject<User>(null);
   public online = window.navigator.onLine;
   public currentVersion = '';
   public actionable: Actionable;
+  public loggedIn = false;
 
   constructor(
     @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
@@ -33,7 +34,7 @@ export class AppComponent {
   ) {
     if (this.cookieService.check('Authorization')) {
       this.twigsService.getProfile().subscribe(user => {
-        this.user = user;
+        this.user.next(user);
         if (this.activatedRoute.pathFromRoot.length == 0) {
           this.router.navigateByUrl("/budgets")
         }
@@ -57,10 +58,19 @@ export class AppComponent {
     const everySixHours$ = interval(6 * 60 * 60 * 1000);
     const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
     everySixHoursOnceAppIsStable$.subscribe(() => updates.checkForUpdate());
+    this.user.subscribe(
+      user => {
+        if (user) {
+          this.loggedIn = true;
+        } else {
+          this.loggedIn = false;
+        }
+      }
+    )
   }
 
   getUsername(): String {
-    return this.user.username;
+    return this.user.value.username;
   }
 
   goBack(): void {
@@ -72,8 +82,4 @@ export class AppComponent {
       this.location.go('/');
     });
   }
-
-  isLoggedIn() {
-    return this.user != null;
-  }
 }

src/app/budgets/add-edit-budget/add-edit-budget.component.ts

@@ -22,7 +22,7 @@ export class AddEditBudgetComponent {
     ) {
         this.app.title = this.title;
         this.app.backEnabled = true;
-        this.users = [new UserPermission(this.app.user.id, Permission.OWNER)];
+        this.users = [new UserPermission(this.app.user.value.id, Permission.OWNER)];
     }
 
     save(): void {

src/app/budgets/budget.component.html

@@ -1,5 +1,5 @@
 <mat-progress-spinner *ngIf="loading" diameter="50" mode="indeterminate"></mat-progress-spinner>
-<div class="dashboard" *ngIf="!loading && !isLoggedIn()">
+<div class="dashboard" *ngIf="!loading && !loggedIn">
   <h2 class="log-in">Welcome to Twigs!</h2>
   <p>To begin tracking your finances, login or create an account!</p>
   <div class="auth-button-container">
@@ -7,7 +7,7 @@
     <a routerLink="/login" mat-raised-button color="accent">Login</a>
   </div>
 </div>
-<mat-nav-list class="budgets" *ngIf="!loading && isLoggedIn()">
+<mat-nav-list class="budgets" *ngIf="!loading && loggedIn">
   <a mat-list-item *ngFor="let budget of budgets" routerLink="/budgets/{{ budget.id }}">
     <p matLine class="budget-list-title">
       {{ budget.name }}
@@ -17,12 +17,12 @@
     </p>
   </a>
 </mat-nav-list>
-<div class="no-budgets" *ngIf="!loading && isLoggedIn() && (!budgets || budgets.length === 0)">
+<div class="no-budgets" *ngIf="!loading && loggedIn && (!budgets || budgets.length === 0)">
   <a mat-button routerLink="/budgets/new">
     <mat-icon>add</mat-icon>
     <p>Add budgets to begin tracking your finances.</p>
   </a>
 </div>
-<a mat-fab routerLink="/budgets/new" *ngIf="!loading && isLoggedIn()">
+<a mat-fab routerLink="/budgets/new" *ngIf="!loading && loggedIn">
   <mat-icon aria-label="Add">add</mat-icon>
 </a>

src/app/budgets/budget.component.ts

@@ -10,9 +10,9 @@ import { TWIGS_SERVICE, TwigsService } from '../shared/twigs.service';
 })
 export class BudgetsComponent implements OnInit {
 
-  @Input() budgetId: string;
   public budgets: Budget[];
   public loading = true;
+  public loggedIn = false;
 
   constructor(
     private app: AppComponent,
@@ -20,14 +20,20 @@ export class BudgetsComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.app.backEnabled = this.isLoggedIn();
+    this.app.backEnabled = false;
     this.app.title = 'Budgets';
-    if (!this.isLoggedIn()) {
+    this.app.user.subscribe(
+      user => {
+        if (!user) {
           this.loading = false;
+          this.loggedIn = false;
           return;
         }
+        this.loggedIn = true;
+        this.loading = true;
         this.twigsService.getBudgets().subscribe(
           budgets => {
+            console.log(budgets)
             this.budgets = budgets;
             this.loading = false;
           },
@@ -35,9 +41,12 @@ export class BudgetsComponent implements OnInit {
             this.loading = false;
           }
         );    
+      },
+      error => {
+        this.loading = false;
+      }
+    )
   }
 
-  isLoggedIn(): boolean {
-    return this.app.isLoggedIn();
-  }
+
 }

src/app/users/login/login.component.ts

@@ -30,7 +30,7 @@ export class LoginComponent implements OnInit {
     this.isLoading = true;
     this.twigsService.login(this.email, this.password)
       .subscribe(user => {
-        this.app.user = user;
+        this.app.user.next(user);
         this.router.navigate(['/'])
       },
       error => {