Convert Joke string into interface and add in favourite_border to mak…

…e it more obvious what is favourited

src/app/chuck-norris-joke-generator/chuck-norris-joke-generator.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { ChuckNorrisJoke } from './chuck-norris-joke-generator.model';
+import { ChuckNorrisJoke, Joke } from './chuck-norris-joke-generator.model';
 import { Observable, map } from 'rxjs';
 import { chuckNorrisApi } from './chuck-norris-joke-generator.constant';
 
@@ -10,9 +10,9 @@ import { chuckNorrisApi } from './chuck-norris-joke-generator.constant';
 export class ChuckNorrisJokeGeneratorService {
   constructor(private httpClient: HttpClient) {}
 
-  public getJoke(): Observable<string> {
+  public getJoke(): Observable<Joke> {
     return this.httpClient
       .get<ChuckNorrisJoke>(chuckNorrisApi)
-      .pipe(map((joke) => joke.value));
+      .pipe(map((joke) => ({ value: joke.value, isFavourite: false })));
   }
 }

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

@@ -1,25 +1,32 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { LocalStorageService } from '../local-storage.service';
+import { Joke } from '../chuck-norris-joke-generator/chuck-norris-joke-generator.model';
 
 @Injectable({
   providedIn: 'root',
 })
 export class FavouritesStoreService {
-  private _favourites$ = new BehaviorSubject<string[]>([]);
+  // This should just be a filtered list on top of the joke store.
+  private _favourites$ = new BehaviorSubject<Joke[]>([]);
 
   public favourites$ = this._favourites$.asObservable();
 
   constructor(private localStorageService: LocalStorageService) {}
 
-  public addFavourite(joke: string): void {
+  public addFavourite(joke: Joke): void {
+    joke.isFavourite = true;
     this._favourites$.next([...this._favourites$.value, joke]);
     this.persistToLocalStorage();
   }
 
-  public removeFavourite(joke: string): void {
+  public removeFavourite(joke: Joke): void {
+    joke.isFavourite = false;
+
     this._favourites$.next(
-      this._favourites$.value.filter((favourite) => favourite !== joke)
+      this._favourites$.value.filter(
+        (favourite) => favourite.value !== joke.value
+      )
     );
     this.persistToLocalStorage();
   }
@@ -40,15 +47,15 @@ export class FavouritesStoreService {
     );
   }
 
-  public toggleFavourite(joke: string): void {
+  public toggleFavourite(joke: Joke): void {
     if (this.isFavourite(joke)) {
       this.removeFavourite(joke);
     } else {
       this.addFavourite(joke);
     }
   }
 
-  private isFavourite(joke: string): boolean {
+  private isFavourite(joke: Joke): boolean {
     return this._favourites$.value.includes(joke);
   }
 }

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

@@ -5,8 +5,10 @@
       title="Favourites"
       (click)="favouritesStoreService.toggleFavourite(joke)"
     >
-      <mat-icon>favorite</mat-icon>
+      <mat-icon>{{
+        joke.isFavourite ? "favorite" : "favorite_border"
+      }}</mat-icon>
     </button>
-    {{ joke }}
+    {{ joke.value }}
   </li>
 </ul>

src/app/joke-list/joke-list.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { FavouritesStoreService } from '../favourites-store/favourites-store.service';
+import { Joke } from '../chuck-norris-joke-generator/chuck-norris-joke-generator.model';
 
 @Component({
   selector: 'cnjg-joke-list',
@@ -13,7 +14,7 @@ import { FavouritesStoreService } from '../favourites-store/favourites-store.ser
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class JokeListComponent {
-  @Input() jokes: string[] = [];
+  @Input() jokes: Joke[] = [];
 
   constructor(public favouritesStoreService: FavouritesStoreService) {}
 }

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

@@ -2,12 +2,13 @@ import { Injectable } from '@angular/core';
 import { ChuckNorrisJokeGeneratorService } from '../chuck-norris-joke-generator/chuck-norris-joke-generator.service';
 import { BehaviorSubject, Observable, concat, tap } from 'rxjs';
 import { LocalStorageService } from '../local-storage.service';
+import { Joke } from '../chuck-norris-joke-generator/chuck-norris-joke-generator.model';
 
 @Injectable({
   providedIn: 'root',
 })
 export class JokeStoreService {
-  private _jokes$ = new BehaviorSubject<string[]>([]);
+  private _jokes$ = new BehaviorSubject<Joke[]>([]);
   public jokes$ = this._jokes$.asObservable();
 
   private newJokeIntervalId: number | undefined;
@@ -35,7 +36,7 @@ export class JokeStoreService {
   }
 
   public initStore(): void {
-    const jokeRequests: Observable<string>[] = Array(10).fill(
+    const jokeRequests: Observable<Joke>[] = Array(10).fill(
       this.chuckNorrisJokeGeneratorService.getJoke()
     );
 
@@ -61,10 +62,11 @@ export class JokeStoreService {
 
     // Every 5 seconds, add a new joke to the list of jokes:
     return window.setInterval(() => {
-      this.chuckNorrisJokeGeneratorService.getJoke().subscribe((joke) => {
-        console.log({ joke });
-        this._jokes$.next([joke, ...this._jokes$.value.splice(0, 9)]);
-      });
+      this.chuckNorrisJokeGeneratorService
+        .getJoke()
+        .subscribe((joke) =>
+          this._jokes$.next([joke, ...this._jokes$.value.splice(0, 9)])
+        );
     }, 5000);
   }