Use the new control work flow syntax for loops and if else in the tem…

…plate

src/app/shared/data/store/favourites-store/favourites-store.service.spec.ts

@@ -72,15 +72,15 @@ describe('FavouritesStoreService', () => {
       service.addFavourite(newJoke);
 
       service.favourites$.subscribe((favourites) => {
-        expect(favourites[1].value).toBe(newJoke.value);
+        expect(favourites[0].value).toBe(newJoke.value);
         done();
       });
 
       // Assert
       expect(newJoke.isFavourite).toBe(true);
       expect(localStorageService.saveToLocalStorage).toHaveBeenCalledWith(
         localStorageKey.favourites,
-        JSON.stringify([originalJoke, newJoke])
+        JSON.stringify([newJoke, originalJoke])
       );
     });
   });
@@ -135,7 +135,7 @@ describe('FavouritesStoreService', () => {
       expect(originalJoke.isFavourite).toBe(true);
       expect(localStorageService.saveToLocalStorage).toHaveBeenCalledWith(
         localStorageKey.favourites,
-        JSON.stringify([originalJoke, newJoke])
+        JSON.stringify([newJoke, originalJoke])
       );
     });
   });

src/app/shared/data/store/favourites-store/favourites-store.service.ts

@@ -27,7 +27,8 @@ export class FavouritesStoreService {
   public addFavourite(joke: Joke): void {
     joke.isFavourite = true;
     // new jokes are added to the top of the list:
-    this._favourites$.next([...this._favourites$.value, joke]);
+    this._favourites$.next([joke, ...this._favourites$.value.splice(0, 9)]);
+
     this.persistToLocalStorage();
   }
 

src/app/shared/data/store/joke-store/joke-store.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { ChuckNorrisJokeGeneratorService } from '../../rest/chuck-norris-joke-generator/chuck-norris-joke-generator.service';
-import { BehaviorSubject, Observable, concat, tap } from 'rxjs';
+import { BehaviorSubject, Observable, concat } from 'rxjs';
 import { Joke } from './joke-store.model';
 
 @Injectable({

src/app/shared/feature/joke-list/joke-list.component.html

@@ -1,5 +1,6 @@
 <ul>
-  <li *ngFor="let joke of jokes">
+  @for (joke of jokes; track joke){
+  <li>
     <button
       mat-icon-button
       title="Favourites"
@@ -13,4 +14,8 @@
     </button>
     {{ joke.value }}
   </li>
+
+  } @empty {
+  <h1>🤡 Loading jokes...</h1>
+  }
 </ul>

src/app/views/favourites/favourites.component.html

@@ -1,3 +1,8 @@
-<cnjg-joke-list
-  [jokes]="(favouritesStoreService.favourites$ | async) || []"
-></cnjg-joke-list>
+@if(favouritesStoreService.favourites$ | async; as favourites){
+@if(favourites.length > 0){
+<cnjg-joke-list [jokes]="favourites"></cnjg-joke-list>
+}@else {
+<h1>🤡 No jokes to be found...</h1>
+} }@else {
+<h1>❌ Error loading favourites</h1>
+}

src/app/views/favourites/favourites.component.scss

@@ -1,3 +1,8 @@
 :host {
   height: 100%;
 }
+
+h1 {
+  align-content: center;
+  height: 100%;
+}