From 6bd292816642a6cf2aba9ee09440bf280177a09e Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.email>
Date: Thu, 27 Feb 2025 15:39:05 +0100
Subject: [PATCH] refactor(deposit, login-success, user.service): convert async
 to observables

---
 .../app/feature/deposit/deposit.component.ts  |  8 ++++---
 .../login-success/login-success.component.ts  | 16 ++++++++------
 frontend/src/app/service/user.service.ts      | 21 ++++++++++---------
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts
index 7a45859..0cecdac 100644
--- a/frontend/src/app/feature/deposit/deposit.component.ts
+++ b/frontend/src/app/feature/deposit/deposit.component.ts
@@ -10,7 +10,7 @@ import {
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { loadStripe, Stripe } from '@stripe/stripe-js';
 import { DepositService } from '../../service/deposit.service';
-import { debounceTime } from 'rxjs';
+import { debounceTime, from } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { NgIf } from '@angular/common';
 
@@ -29,7 +29,7 @@ export class DepositComponent implements OnInit {
   private stripe: Stripe | null = null;
   private service: DepositService = inject(DepositService);
 
-  async ngOnInit() {
+  ngOnInit() {
     this.form = new FormGroup({
       amount: new FormControl(50, [Validators.min(50)]),
     });
@@ -40,7 +40,9 @@ export class DepositComponent implements OnInit {
       }
     });
 
-    this.stripe = await loadStripe(environment.STRIPE_KEY);
+    from(loadStripe(environment.STRIPE_KEY)).subscribe(stripe => {
+      this.stripe = stripe;
+    });
   }
 
   submit() {
diff --git a/frontend/src/app/feature/login-success/login-success.component.ts b/frontend/src/app/feature/login-success/login-success.component.ts
index 067afe6..a637258 100644
--- a/frontend/src/app/feature/login-success/login-success.component.ts
+++ b/frontend/src/app/feature/login-success/login-success.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/cor
 import { UserService } from '../../service/user.service';
 import { KeycloakService } from 'keycloak-angular';
 import { Router } from '@angular/router';
+import { from, switchMap } from 'rxjs';
 
 @Component({
   selector: 'app-login-success',
@@ -16,11 +17,14 @@ export default class LoginSuccessComponent implements OnInit {
   private keycloakService: KeycloakService = inject(KeycloakService);
   private router: Router = inject(Router);
 
-  async ngOnInit() {
-    const userProfile = await this.keycloakService.loadUserProfile();
-    const user = await this.userService.getOrCreateUser(userProfile);
-    sessionStorage.setItem('user', JSON.stringify(user));
-
-    this.router.navigate(['home']);
+  ngOnInit() {
+    from(this.keycloakService.loadUserProfile()).pipe(
+      switchMap(userProfile => this.userService.getOrCreateUser(userProfile))
+    ).subscribe(user => {
+      if (user) {
+        sessionStorage.setItem('user', JSON.stringify(user));
+      }
+      this.router.navigate(['home']);
+    });
   }
 }
diff --git a/frontend/src/app/service/user.service.ts b/frontend/src/app/service/user.service.ts
index ba6bead..500b784 100644
--- a/frontend/src/app/service/user.service.ts
+++ b/frontend/src/app/service/user.service.ts
@@ -1,7 +1,7 @@
 import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { KeycloakProfile } from 'keycloak-js';
-import { catchError, EMPTY, Observable } from 'rxjs';
+import { catchError, EMPTY, Observable, of, switchMap } from 'rxjs';
 import { User } from '../model/User';
 
 @Injectable({
@@ -21,18 +21,19 @@ export class UserService {
     });
   }
 
-  public async getOrCreateUser(userProfile: KeycloakProfile) {
+  public getOrCreateUser(userProfile: KeycloakProfile): Observable<User | undefined> {
     if (userProfile.id == null) {
-      return;
+      return of(undefined);
     }
-    return await this.getUser(userProfile.id)
-      .toPromise()
-      .then(async (user) => {
+    
+    return this.getUser(userProfile.id).pipe(
+      switchMap(user => {
         if (user) {
-          return user;
+          return of(user);
         }
-
-        return await this.createUser(userProfile.id ?? '', userProfile.username ?? '').toPromise();
-      });
+        
+        return this.createUser(userProfile.id ?? '', userProfile.username ?? '');
+      })
+    );
   }
 }