Implement stale data handling for employee list based on timestamp

src/app/reactive-state/components/employee-list/employee-list.component.html

@@ -1 +1,50 @@
-<p>employee-list works!</p>
+<!-- <mat-card>
+  <mat-card-title-group>
+    <mat-card-title> Candidats </mat-card-title>
+  </mat-card-title-group>
+  <mat-spinner *ngIf="loading$ | async"></mat-spinner>
+  <mat-nav-list *ngIf="employees$ | async as employees">
+    <a
+      *ngFor="let employee of employees"
+      mat-list-item
+      routerLink="employee.id.toString()"
+    >
+      <img
+        [src]="employee.imageUrl"
+        [alt]="employee.lastName"
+        matListItemAvatar
+      />
+      <p mat-list-item>{{ employee.firstName }} {{ employee.lastName }}</p>
+      <p mat-list-item>{{ employee.job }} chez {{ employee.company }}</p>
+    </a>
+  </mat-nav-list>
+</mat-card> -->
+
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Candidats</mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <mat-spinner *ngIf="loading$ | async"></mat-spinner>
+
+    <mat-nav-list *ngIf="employees$ | async as employees">
+      <mat-list-item
+        *ngFor="let employee of employees"
+        [routerLink]="employee.id.toString()"
+      >
+        <img
+          matListItemAvatar
+          [src]="employee.imageUrl"
+          [alt]="employee.lastName"
+        />
+        <div matListItemTitle>
+          {{ employee.firstName }} {{ employee.lastName }}
+        </div>
+        <div matListItemLine>
+          {{ employee.job }} chez {{ employee.company }}
+        </div>
+      </mat-list-item>
+    </mat-nav-list>
+  </mat-card-content>
+</mat-card>

src/app/reactive-state/components/employee-list/employee-list.component.ts

@@ -1,21 +1,45 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { EmployeesService } from '../../services/employees.service';
+import { Employee } from '../../models/employee.model';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { CommonModule } from '@angular/common';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { MatListModule } from '@angular/material/list';
 
 @Component({
   selector: 'app-employee-list',
   standalone: true,
-  imports: [],
+  imports: [
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatToolbarModule,
+    MatListModule,
+    CommonModule,
+    RouterLink,
+  ],
   templateUrl: './employee-list.component.html',
   styleUrl: './employee-list.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush, // Prevents lake of performance/ reduced the possibilities of change detection
 })
 export class EmployeeListComponent implements OnInit {
   loading$!: Observable<boolean>;
+  employees$!: Observable<Employee[]>;
 
-  constructor(private EmployeesService: EmployeesService) {}
+  constructor(
+    private router: Router,
+    private EmployeesService: EmployeesService
+  ) {}
 
   ngOnInit(): void {
+    this.initObservables();
+    this.EmployeesService.getEmployeesFromServer();
+  }
+
+  private initObservables(): void {
     this.loading$ = this.EmployeesService.loading$;
+    this.employees$ = this.EmployeesService.employees$;
   }
 }

src/app/reactive-state/reactive-state.routes.ts

@@ -8,7 +8,6 @@ export const REACTIVESTATE_ROUTES: Routes = [
   {
     path: '',
     component: EmployeeListComponent,
-    // resolve: { posts: PostsResolver }, // Resolves the posts data before rendering the component and return it at the key 'posts'
   },
   {
     path: ':id',

src/app/reactive-state/services/employees.service.ts

@@ -1,9 +1,12 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, tap, delay } from 'rxjs';
 import { Employee } from '../models/employee.model';
+import { environment } from '../../../environments/environment';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class EmployeesService {
   constructor(private http: HttpClient) {}
 
@@ -23,7 +26,31 @@ export class EmployeesService {
     return this._employees$.asObservable();
   }
 
+  private lastEmployeesLoad = 0;
+
   private setLoadingStatus(loading: boolean): void {
     this._loading$.next(loading);
   }
+
+  getEmployeesFromServer(): void {
+    console.log('Getting employees from server');
+    // Prevent multiple requests in a short period of time (5 minutes) -
+    if (Date.now() - this.lastEmployeesLoad <= 300000) {
+      console.log('Preventing multiple requests');
+      return;
+    }
+    this.setLoadingStatus(true);
+    this.http
+      .get<Employee[]>(`${environment.apiUrl}/candidates`)
+      .pipe(
+        delay(2000),
+        tap((employees) => {
+          // Time of the last request
+          this.lastEmployeesLoad = Date.now();
+          this._employees$.next(employees);
+          this.setLoadingStatus(false);
+        })
+      )
+      .subscribe();
+  }
 }