From a424b82a3f34a9cd6bc6013d5553755f7caa8eba Mon Sep 17 00:00:00 2001
From: Ronan Connolly <Ronan@RonanConnolly.dev>
Date: Tue, 30 Apr 2024 17:14:27 +0200
Subject: [PATCH] Add more control work flow syntax, and block adding new
 favourites when the 10 max limit is hit

---
 .../shared/data/store/joke-store/joke-store.service.spec.ts  | 2 +-
 src/app/shared/feature/joke-list/joke-list.component.html    | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/data/store/joke-store/joke-store.service.spec.ts b/src/app/shared/data/store/joke-store/joke-store.service.spec.ts
index 4a995f1..a838f68 100644
--- a/src/app/shared/data/store/joke-store/joke-store.service.spec.ts
+++ b/src/app/shared/data/store/joke-store/joke-store.service.spec.ts
@@ -3,7 +3,7 @@ import { TestBed } from '@angular/core/testing';
 import { JokeStoreService } from './joke-store.service';
 import { ChuckNorrisJokeGeneratorService } from '../../rest/chuck-norris-joke-generator/chuck-norris-joke-generator.service';
 import { Joke } from './joke-store.model';
-import { Subject, of } from 'rxjs';
+import { of } from 'rxjs';
 
 describe('JokeStoreService', () => {
   let service: JokeStoreService;
diff --git a/src/app/shared/feature/joke-list/joke-list.component.html b/src/app/shared/feature/joke-list/joke-list.component.html
index 2945322..5221681 100644
--- a/src/app/shared/feature/joke-list/joke-list.component.html
+++ b/src/app/shared/feature/joke-list/joke-list.component.html
@@ -1,3 +1,4 @@
+@if(favouritesStoreService.favourites$ | async; as favourites){
 <ul>
   @for (joke of jokes; track joke){
   <li>
@@ -5,6 +6,7 @@
       mat-icon-button
       title="Favourites"
       (click)="favouritesStoreService.toggleFavourite(joke)"
+      [disabled]="favourites.length >= 10 && joke.isFavourite === false"
     >
       <mat-icon>{{
         joke.isFavourite
@@ -19,3 +21,6 @@
   <h1>🤡 Loading jokes...</h1>
   }
 </ul>
+} @else {
+<h1>❌ Error loading favourites</h1>
+}