feat: store UserId in localStorage and display User Initials in HeaderComponent

src/app/services/api.service.ts

@@ -34,6 +34,10 @@ export class ApiService {
 
   // ------------- USERS ------------- //
 
+  getUserById(userId: string): Observable<User> {
+    return this.http.get<User>(`${this.apiUrl}/api/users/${userId}/`);
+  }
+
   getUsersByIds(userIds: string[]): Observable<User[]> {
     return this.http.get<User[]>(`${this.apiUrl}/api/users/`, {
       params: { ids: userIds.join(',') },

src/app/services/auth.service.ts

@@ -1,6 +1,13 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { catchError, lastValueFrom, map, Observable, of } from 'rxjs';
+import {
+  BehaviorSubject,
+  catchError,
+  lastValueFrom,
+  map,
+  Observable,
+  of,
+} from 'rxjs';
 import { apiConfig } from '../environments/config';
 
 @Injectable({
@@ -9,13 +16,25 @@ import { apiConfig } from '../environments/config';
 export class AuthService {
   private apiUrl = apiConfig.apiUrl;
 
-  constructor(private http: HttpClient) {}
+  private currentUserIdSubject: BehaviorSubject<string | null> =
+    new BehaviorSubject<string | null>(null);
+
+  constructor(private http: HttpClient) {
+    const storedUserId =
+      localStorage.getItem('currentUserId') ||
+      sessionStorage.getItem('currentUserId');
+    this.currentUserIdSubject = new BehaviorSubject<string | null>(
+      storedUserId
+    );
+  }
 
   async login(body: any, storage: boolean) {
     const data = (await lastValueFrom(
       this.http.post(`${this.apiUrl}/auth/login/`, body)
-    )) as { token: string };
+    )) as { token: string; user_id: string };
     this.storeAuthToken(data.token, storage);
+    this.storeUserId(data.user_id, storage);
+    this.currentUserIdSubject.next(data.user_id);
   }
 
   async logout() {
@@ -31,6 +50,7 @@ export class AuthService {
     ).catch((error) => console.error('Logout failed:', error));
 
     this.deleteAuthToken();
+    this.deleteUserId();
     window.location.href = '/login';
   }
 
@@ -60,14 +80,32 @@ export class AuthService {
       : sessionStorage.setItem('authToken', data.toString());
   }
 
+  private storeUserId(userId: string, storage: boolean) {
+    if (storage) {
+      localStorage.setItem('currentUserId', userId);
+    } else {
+      sessionStorage.setItem('currentUserId', userId);
+    }
+  }
+
   private deleteAuthToken() {
     localStorage.removeItem('authToken');
     sessionStorage.removeItem('authToken');
   }
 
+  private deleteUserId() {
+    localStorage.removeItem('currentUserId');
+    sessionStorage.removeItem('currentUserId');
+    this.currentUserIdSubject.next(null);
+  }
+
   checkAuthToken(): string | null {
     return (
       localStorage.getItem('authToken') || sessionStorage.getItem('authToken')
     );
   }
+
+  getCurrentUserId(): Observable<string | null> {
+    return this.currentUserIdSubject.asObservable();
+  }
 }

src/app/shared/components/header/header.component.html

@@ -18,12 +18,7 @@
       />
     </div>
     <div class="img-user" (click)="toggleNavbar()">
-      {{
+      {{ currentUser?.initials || "" }}
-        this.firebaseService.getUserDetails(
-          firebaseService.getCurrentUserId(),
-          "initials"
-        )
-      }}
     </div>
   </div>
 </div>

src/app/shared/components/header/header.component.ts

@@ -4,6 +4,9 @@ import { NavbarComponent } from './navbar/navbar.component';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { FirebaseService } from '../../../services/firebase.service';
+import { Observable } from 'rxjs';
+import { AuthService } from '../../../services/auth.service';
+import { ApiService } from '../../../services/api.service';
 
 @Component({
   selector: 'app-header',
@@ -15,8 +18,38 @@ import { FirebaseService } from '../../../services/firebase.service';
 export class HeaderComponent {
   navbarVisible: boolean = false;
   navbarLanguageVisible: boolean = false;
+  currentUser: any = null;
 
-  constructor(public firebaseService: FirebaseService) {}
+  constructor(
+    public firebaseService: FirebaseService,
+    private authService: AuthService,
+    private apiService: ApiService
+  ) {}
+
+  /**
+   * Loads the current user data by calling the loadCurrentUser method.
+   */
+  ngOnInit() {
+    this.loadCurrentUser();
+  }
+
+  /**
+   * Loads the current user data by calling the getCurrentUserId method of the AuthService.
+   */
+  loadCurrentUser(): void {
+    this.authService.getCurrentUserId().subscribe((userId) => {
+      if (userId) {
+        this.apiService.getUserById(userId).subscribe(
+          (userData) => {
+            this.currentUser = userData;
+          },
+          () => {
+            this.currentUser = {};
+          }
+        );
+      }
+    });
+  }
 
   /**
    * Toggles the visibility of the navbar.