From f4a6d2dfeb93560fc0fb13e281535400290a2fa7 Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Mon, 27 Feb 2023 15:01:42 +0100
Subject: [PATCH] Fin section 16 : RxJS

---
 .../detail-pokemon.component.html             |  4 +-
 .../list-pokemon/list-pokemon.component.html  |  1 +
 src/app/pokemon/loader/loader.component.html  | 13 ++++++
 src/app/pokemon/loader/loader.component.ts    |  8 ++++
 .../pokemon-form/pokemon-form.component.html  |  4 +-
 src/app/pokemon/pokemon.module.ts             |  4 ++
 src/app/pokemon/pokemon.service.ts            | 10 +++++
 .../search-pokemon.component.html             | 25 ++++++++++++
 .../search-pokemon.component.ts               | 40 +++++++++++++++++++
 9 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 src/app/pokemon/loader/loader.component.html
 create mode 100644 src/app/pokemon/loader/loader.component.ts
 create mode 100644 src/app/pokemon/search-pokemon/search-pokemon.component.html
 create mode 100644 src/app/pokemon/search-pokemon/search-pokemon.component.ts

diff --git a/src/app/pokemon/detail-pokemon/detail-pokemon.component.html b/src/app/pokemon/detail-pokemon/detail-pokemon.component.html
index fe42eb2..6bc2b92 100644
--- a/src/app/pokemon/detail-pokemon/detail-pokemon.component.html
+++ b/src/app/pokemon/detail-pokemon/detail-pokemon.component.html
@@ -55,4 +55,6 @@
     </div>
   </div>
 </div>
-<h4 *ngIf="!pokemon" class="center">Aucun pokémon à afficher !</h4>
+<h4 *ngIf="!pokemon" class="center">
+  <app-loader></app-loader>
+</h4>
diff --git a/src/app/pokemon/list-pokemon/list-pokemon.component.html b/src/app/pokemon/list-pokemon/list-pokemon.component.html
index 4ab7c02..3fddf85 100644
--- a/src/app/pokemon/list-pokemon/list-pokemon.component.html
+++ b/src/app/pokemon/list-pokemon/list-pokemon.component.html
@@ -1,5 +1,6 @@
 <div class="container">
   <div class="row">
+    <app-search-pokemon></app-search-pokemon>
     <div
       *ngFor="let pokemon of pokemonList"
       class="col m4 s6"
diff --git a/src/app/pokemon/loader/loader.component.html b/src/app/pokemon/loader/loader.component.html
new file mode 100644
index 0000000..dcf08fc
--- /dev/null
+++ b/src/app/pokemon/loader/loader.component.html
@@ -0,0 +1,13 @@
+<div class="preloader-wrapper big active">
+  <div class="spinner-layer spinner-blue">
+    <div class="circle-clipper left">
+      <div class="circle"></div>
+    </div>
+    <div class="gap-patch">
+      <div class="circle"></div>
+    </div>
+    <div class="circle-clipper right">
+      <div class="circle"></div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/pokemon/loader/loader.component.ts b/src/app/pokemon/loader/loader.component.ts
new file mode 100644
index 0000000..d39900d
--- /dev/null
+++ b/src/app/pokemon/loader/loader.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styles: [],
+})
+export class LoaderComponent {}
diff --git a/src/app/pokemon/pokemon-form/pokemon-form.component.html b/src/app/pokemon/pokemon-form/pokemon-form.component.html
index 412dae5..19d5cd8 100644
--- a/src/app/pokemon/pokemon-form/pokemon-form.component.html
+++ b/src/app/pokemon/pokemon-form/pokemon-form.component.html
@@ -125,4 +125,6 @@
     </div>
   </div>
 </form>
-<h3 *ngIf="!pokemon" class="center">Aucun pokémon à éditer...</h3>
+<h3 *ngIf="!pokemon" class="center">
+  <app-loader></app-loader>
+</h3>
diff --git a/src/app/pokemon/pokemon.module.ts b/src/app/pokemon/pokemon.module.ts
index 9a2d47d..240157d 100644
--- a/src/app/pokemon/pokemon.module.ts
+++ b/src/app/pokemon/pokemon.module.ts
@@ -11,6 +11,8 @@ import { FormsModule } from '@angular/forms';
 import { PokemonFormComponent } from './pokemon-form/pokemon-form.component';
 import { EditPokemonComponent } from './edit-pokemon/edit-pokemon.component';
 import { AddPokemonComponent } from './add-pokemon/add-pokemon.component';
+import { SearchPokemonComponent } from './search-pokemon/search-pokemon.component';
+import { LoaderComponent } from './loader/loader.component';
 
 const pokemonRoutes: Routes = [
   { path: 'edit/pokemon/:id', component: EditPokemonComponent },
@@ -28,6 +30,8 @@ const pokemonRoutes: Routes = [
     PokemonFormComponent,
     EditPokemonComponent,
     AddPokemonComponent,
+    SearchPokemonComponent,
+    LoaderComponent,
   ],
   imports: [CommonModule, FormsModule, RouterModule.forChild(pokemonRoutes)],
   providers: [PokemonService],
diff --git a/src/app/pokemon/pokemon.service.ts b/src/app/pokemon/pokemon.service.ts
index fc27bee..6ce3502 100644
--- a/src/app/pokemon/pokemon.service.ts
+++ b/src/app/pokemon/pokemon.service.ts
@@ -35,6 +35,16 @@ export class PokemonService {
     );
   }
 
+  searchPokemonList(term: string): Observable<Pokemon[]> {
+    if (term.length <= 1) {
+      return of([]);
+    }
+    return this.http.get<Pokemon[]>(`api/pokemons?name=${term}`).pipe(
+      tap((pokemon) => this.log(pokemon)),
+      catchError((error) => this.handleError(error, []))
+    );
+  }
+
   updatePokemon(pokemon: Pokemon): Observable<null> {
     const httpOptions = {
       headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
diff --git a/src/app/pokemon/search-pokemon/search-pokemon.component.html b/src/app/pokemon/search-pokemon/search-pokemon.component.html
new file mode 100644
index 0000000..027e67c
--- /dev/null
+++ b/src/app/pokemon/search-pokemon/search-pokemon.component.html
@@ -0,0 +1,25 @@
+<div class="row">
+  <div class="col s12 m6 offset-m3">
+    <div class="card">
+      <div class="card-content">
+        <div class="input-field">
+          <input
+            #searchBox
+            type="text"
+            (keyup)="search(searchBox.value)"
+            placeholder="Rechercher un Pokémon"
+          />
+          <div class="collection">
+            <a
+              *ngFor="let pokemon of pokemons$ | async"
+              (click)="goToDetail(pokemon)"
+              class="collection-item"
+            >
+              {{ pokemon.name }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/pokemon/search-pokemon/search-pokemon.component.ts b/src/app/pokemon/search-pokemon/search-pokemon.component.ts
new file mode 100644
index 0000000..9c44172
--- /dev/null
+++ b/src/app/pokemon/search-pokemon/search-pokemon.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  Observable,
+  Subject,
+  switchMap,
+} from 'rxjs';
+import { Pokemon } from '../pokemon';
+import { PokemonService } from '../pokemon.service';
+
+@Component({
+  selector: 'app-search-pokemon',
+  templateUrl: './search-pokemon.component.html',
+  styles: [],
+})
+export class SearchPokemonComponent implements OnInit {
+  searchTerms = new Subject<string>();
+  pokemons$: Observable<Pokemon[]>;
+
+  constructor(private router: Router, private pokemonService: PokemonService) {}
+
+  ngOnInit(): void {
+    this.pokemons$ = this.searchTerms.pipe(
+      debounceTime(300),
+      distinctUntilChanged(),
+      switchMap((term) => this.pokemonService.searchPokemonList(term))
+    );
+  }
+
+  search(term: string) {
+    this.searchTerms.next(term);
+  }
+
+  goToDetail(pokemon: Pokemon) {
+    const link = ['/pokemon', pokemon.id];
+    this.router.navigate(link);
+  }
+}