From b91f195955eee68b510c99800a994f35f51650fb Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Mon, 1 Jul 2024 14:33:19 +0900
Subject: [PATCH] [footer] refresh auth state in real time

---
 .../master-page/master-page.component.html        |  2 +-
 frontend/src/app/services/services-api.service.ts |  2 +-
 .../global-footer/global-footer.component.html    |  8 ++++----
 .../global-footer/global-footer.component.ts      | 15 +++++++++++----
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 591a8730e..25843bb28 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -129,7 +129,7 @@
     </main>
 
     <div class="flex-grow-1"></div>
-    <app-global-footer *ngIf="footerVisible"></app-global-footer>
+    <app-global-footer *ngIf="footerVisible" [user]="user"></app-global-footer>
   </div>
 </div>
 
diff --git a/frontend/src/app/services/services-api.service.ts b/frontend/src/app/services/services-api.service.ts
index 0dc58b957..546b38730 100644
--- a/frontend/src/app/services/services-api.service.ts
+++ b/frontend/src/app/services/services-api.service.ts
@@ -1,6 +1,6 @@
 import { Router, NavigationStart } from '@angular/router';
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { StateService } from './state.service';
 import { StorageService } from './storage.service';
 import { MenuGroup } from '../interfaces/services.interface';
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index 69fdf50e7..bd1783513 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -33,8 +33,8 @@
             </div>
           }
           <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login']">
-            <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
-            <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
+            <span *ngIf="user" i18n="shared.my-account" class="nowrap">My Account</span>
+            <span *ngIf="!user" i18n="shared.sign-in" class="nowrap">Sign In</span>
           </a>
         </div>
         @if (!env.customize?.theme) {
@@ -44,8 +44,8 @@
         }
         @if (!enterpriseInfo?.footer_img) {
           <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login']">
-            <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
-            <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
+            <span *ngIf="user" i18n="shared.my-account" class="nowrap">My Account</span>
+            <span *ngIf="!user" i18n="shared.sign-in" class="nowrap">Sign In</span>
           </a>
           <p class="explore-tagline-desktop">
             <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.ts b/frontend/src/app/shared/components/global-footer/global-footer.component.ts
index 826172c4b..50f9a53d7 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.ts
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener, OnDestroy } from '@angular/core';
+import { Input, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, OnChanges, SimpleChanges, Inject, LOCALE_ID, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Observable, merge, of, Subject, Subscription } from 'rxjs';
 import { tap, takeUntil } from 'rxjs/operators';
@@ -16,7 +16,9 @@ import { EnterpriseService } from '../../../services/enterprise.service';
   styleUrls: ['./global-footer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GlobalFooterComponent implements OnInit, OnDestroy {
+export class GlobalFooterComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() user: any = undefined;
+
   private destroy$: Subject<any> = new Subject<any>();
   env: Env;
   officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
@@ -29,7 +31,6 @@ export class GlobalFooterComponent implements OnInit, OnDestroy {
   network$: Observable<string>;
   networkPaths: { [network: string]: string };
   currentNetwork = '';
-  loggedIn = false;
   urlSubscription: Subscription;
   isServicesPage = false;
 
@@ -72,11 +73,17 @@ export class GlobalFooterComponent implements OnInit, OnDestroy {
     });
 
     this.urlSubscription = this.route.url.subscribe((url) => {
-      this.loggedIn = this.storageService.getAuth() !== null;
+      this.user = this.storageService.getAuth();
       this.cd.markForCheck();
     })
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.user) {
+      this.user = this.storageService.getAuth();
+    }
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.complete();