Add more control work flow syntax, and block adding new favourites wh…

…en the 10 max limit is hit
RonanCodes · Apr 30, 2024 · a424b82 · a424b82
1 parent 19d7047
commit a424b82
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -1,10 +1,12 @@
+@if(favouritesStoreService.favourites$ | async; as favourites){
 <ul>
   @for (joke of jokes; track joke){
   <li>
     <button
       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>
+}