From 454e99f8128c3675523e2ced8dd73c9e4021b0aa Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Wed, 5 Mar 2025 12:07:20 +0100
Subject: [PATCH] feat(navbar): update balance display and use signal for state

---
 .../components/navbar/navbar.component.html    |  7 ++++---
 .../components/navbar/navbar.component.ts      | 18 +++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html
index 81fb5c1..bd3229c 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.html
+++ b/frontend/src/app/shared/components/navbar/navbar.component.html
@@ -10,10 +10,11 @@
         </div>
       </div>
 
-
       <div class="hidden md:flex items-center space-x-4">
-        <div class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300">
-          {{ balance | currency : 'EUR' : 'symbol' : '1.2-2' }}
+        <div
+          class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300"
+        >
+          <span>Balance: {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
         </div>
         @if (!isLoggedIn) {
           <button (click)="login()" class="button-base px-4 py-1.5">Anmelden</button>
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts
index 9365d41..a6bbc15 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.ts
+++ b/frontend/src/app/shared/components/navbar/navbar.component.ts
@@ -1,10 +1,9 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
 import { UserService } from '../../../service/user.service';
-import { firstValueFrom } from 'rxjs';
-import { CurrencyPipe } from '@angular/common';
 
+import { CurrencyPipe } from '@angular/common';
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
@@ -12,21 +11,22 @@ import { CurrencyPipe } from '@angular/common';
   imports: [RouterModule, CurrencyPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NavbarComponent {
+export class NavbarComponent implements OnInit {
   isMenuOpen = false;
   private keycloakService: KeycloakService = inject(KeycloakService);
   isLoggedIn = this.keycloakService.isLoggedIn();
+
   private userService = inject(UserService);
   private user = this.userService.getCurrentUser();
-  balance = 0;
 
+  public balance = signal(0);
 
-  async ngOnInit() {
-    const user = await firstValueFrom(this.user);
-    this.balance = user?.balance ?? 0;
+  ngOnInit() {
+    this.user.subscribe((user) => {
+      this.balance.set(user?.balance ?? 0);
+    });
   }
 
-
   login() {
     try {
       const baseUrl = window.location.origin;