diff --git a/src/app/components/summary/summary.component.html b/src/app/components/summary/summary.component.html index 9b0692b..8c4f5ca 100644 --- a/src/app/components/summary/summary.component.html +++ b/src/app/components/summary/summary.component.html @@ -99,11 +99,12 @@

{{ greeting }},

- - {{ "firstName" }}
- {{ "lastName" }}
+ @if (currentUser) { + + {{ currentUser["firstName"] }}
+ {{ currentUser["lastName"] }} +
+ }
} @else { diff --git a/src/app/components/summary/summary.component.ts b/src/app/components/summary/summary.component.ts index 03afc56..cf2bcd7 100644 --- a/src/app/components/summary/summary.component.ts +++ b/src/app/components/summary/summary.component.ts @@ -7,6 +7,9 @@ import { TaskService } from '../../services/task.service'; import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component'; import { finalize } from 'rxjs'; +import { UserService } from '../../services/user.service'; +import { User } from '../../interfaces/user.interface'; + @Component({ selector: 'app-summary', standalone: true, @@ -18,11 +21,13 @@ export class SummaryComponent { nextUrgendTask: number[] = []; allTasks: Task[] = []; + currentUser: User | null = null; isLoading = false; constructor( public firebaseService: FirebaseService, private translateService: TranslateService, + private userService: UserService, private taskService: TaskService ) {} @@ -31,6 +36,7 @@ export class SummaryComponent { */ ngOnInit() { this.loadAllTasks(); + this.loadCurrentUser(); } /** @@ -52,6 +58,12 @@ export class SummaryComponent { }); } + loadCurrentUser(): void { + this.userService.getCurrentUser().subscribe((userData) => { + this.currentUser = userData; + }); + } + /** * Gets the total number of tasks. * @returns The total count of tasks. diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts new file mode 100644 index 0000000..d8ac7e3 --- /dev/null +++ b/src/app/services/user.service.ts @@ -0,0 +1,66 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject, Observable, of } from 'rxjs'; +import { catchError, switchMap, tap } from 'rxjs/operators'; +import { ApiService } from './api.service'; +import { AuthService } from './auth.service'; +import { User } from '../interfaces/user.interface'; + +@Injectable({ + providedIn: 'root', +}) +export class UserService { + private currentUserCache: User | null = null; + private currentUserSubject: BehaviorSubject = + new BehaviorSubject(null); + private loading = false; + + constructor( + private authService: AuthService, + private apiService: ApiService + ) {} + + /** + * Retrieves the current user from the cache if available, or loads it from the API. + * + * @returns An Observable resolving to the current user, or null if not available. + */ + getCurrentUser(): Observable { + if (this.currentUserCache) { + this.currentUserSubject.next(this.currentUserCache); + return this.currentUserSubject.asObservable(); + } + + return this.loadCurrentUser(); + } + + /** + * Loads the current user data by fetching the user ID from the AuthService and + * retrieving the user details from the ApiService. + * + * @returns an Observable resolving to the current user, or null if none exists + */ + loadCurrentUser(): Observable { + if (this.loading) { + return this.currentUserSubject.asObservable(); + } + + this.loading = true; + + return this.authService.getCurrentUserId().pipe( + switchMap((userId) => { + if (!userId) return of(null); + + return this.apiService.getUserById(userId).pipe( + catchError(() => of(null)), + tap((userData) => { + if (userData) { + this.currentUserCache = userData; + this.currentUserSubject.next(userData); + } + this.loading = false; + }) + ); + }) + ); + } +} diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts index 930f676..484a7ad 100644 --- a/src/app/shared/components/header/header.component.ts +++ b/src/app/shared/components/header/header.component.ts @@ -4,9 +4,8 @@ import { NavbarComponent } from './navbar/navbar.component'; import { CommonModule } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; import { FirebaseService } from '../../../services/firebase.service'; -import { AuthService } from '../../../services/auth.service'; -import { ApiService } from '../../../services/api.service'; -import { catchError, of, switchMap } from 'rxjs'; +import { UserService } from '../../../services/user.service'; +import { User } from '../../../interfaces/user.interface'; @Component({ selector: 'app-header', @@ -18,12 +17,11 @@ import { catchError, of, switchMap } from 'rxjs'; export class HeaderComponent { navbarVisible: boolean = false; navbarLanguageVisible: boolean = false; - currentUser: any = null; + currentUser: User | null = null; constructor( public firebaseService: FirebaseService, - private authService: AuthService, - private apiService: ApiService + private userService: UserService ) {} /** @@ -37,19 +35,9 @@ export class HeaderComponent { * Loads the current user data and sets it to the `currentUser` property. */ loadCurrentUser(): void { - this.authService - .getCurrentUserId() - .pipe( - switchMap((userId) => { - if (!userId) return of(null); - return this.apiService - .getUserById(userId) - .pipe(catchError(() => of(null))); - }) - ) - .subscribe((userData) => { - this.currentUser = userData || {}; - }); + this.userService.getCurrentUser().subscribe((userData) => { + this.currentUser = userData; + }); } /**