feat: Allow retry of countries fetch on home component

src/app/app.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
-import { take } from 'rxjs'
-import { OlympicService } from './core/services/olympic-countries.service'
 
 @Component({
   selector: 'app-root',
@@ -11,16 +9,9 @@ import { OlympicService } from './core/services/olympic-countries.service'
 export class AppComponent implements OnInit {
   public title = 'olympic-games-starter'
 
-  constructor(
-    private olympicService: OlympicService,
-    private router: Router,
-  ) { }
+  constructor(private router: Router) { }
 
   ngOnInit(): void {
     this.router.setUpLocationChangeListener()
-    this.olympicService
-      .loadInitialData()
-      .pipe(take(1))
-      .subscribe()
   }
 }

src/app/pages/home/home.component.html

@@ -1,11 +1,13 @@
-<div *ngIf="olympicCountries$ | async as olympicCountries" class="container chart-container">
+<div class="container chart-container">
   <div class="row">
     <div class="col-12 title-col mb-8">
       <sl-button *ngIf="canTryToReloadData" class="teal action-button ms-md-8" (click)="onTryToReload()" i18n>Try to
         reload</sl-button>
       <h2 class="p-4 mx-auto" i18n>Medals per Country</h2>
     </div>
   </div>
+</div>
+<div *ngIf="olympicCountries$ | async as olympicCountries" class="container chart-container">
   <div class="row">
     <div class="col-12 col-md-6 flex-middle">
       <div class="chart-fact me-md-6">

src/app/pages/home/home.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { Router } from '@angular/router'
-import { catchError, delay, Observable, of, Subject, take, tap } from 'rxjs'
+import { catchError, delay, Observable, of, Subject, take, tap, throwError } from 'rxjs'
 import { OlympicBarChartComponent } from 'src/app/components/olympic-bar-chart/olympic-bar-chart.component'
 import OlympicCountry from 'src/app/core/models/olympic-country.interface'
 import { OlympicService } from 'src/app/core/services/olympic-countries.service'
@@ -40,19 +40,24 @@ export class HomeComponent implements OnInit, OnDestroy {
           this.setCanTryReload(olympicCountries.length === 0)
           this.numberOfJOs = this.countNumberOfJoFrom(olympicCountries)
         }),
-        catchError((error, caught) => {
+        catchError(() => {
           this.setCanTryReload(true)
-          return caught
+          return throwError(() => new Error())
         }),
       )
+    this.olympicService
+      .loadInitialData()
+      .pipe(take(1))
+      .subscribe()
   }
 
   ngOnDestroy(): void {
     this.destroyOlympicCountries$.next(true)
   }
 
   onTryToReload(): void {
-    this.olympicService.loadInitialData()
+    this.olympicService
+      .loadInitialData()
       .pipe(take(1))
       .subscribe()
   }
@@ -66,8 +71,8 @@ export class HomeComponent implements OnInit, OnDestroy {
   }
 
   private countNumberOfJoFrom(countries: OlympicCountry[]): number {
-    return countries
-      .map(country => country.participations.length)
+    return [...countries
+      .map(country => country.participations.length), 0]
       .reduce(nbParticipations => Math.max(nbParticipations))
   }
 }