feat: created and integrated UserService for global access to user data

src/app/components/summary/summary.component.html

@@ -99,11 +99,12 @@
     <!-- Greeting -->
     <div class="right-container">
       <p>{{ greeting }},</p>
-      <!-- TODO -->
-      <span id="welcome-user"
-        >{{ "firstName" }}<br />
-        {{ "lastName" }}</span
-      >
+      @if (currentUser) {
+      <span id="welcome-user">
+        {{ currentUser["firstName"] }}<br />
+        {{ currentUser["lastName"] }}
+      </span>
+      }
     </div>
   </div>
   } @else {

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.

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<User | null> =
+    new BehaviorSubject<User | null>(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<User | null> {
+    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<User | null> {
+    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;
+          })
+        );
+      })
+    );
+  }
+}

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,18 +35,8 @@ 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;
     });
   }