diff --git a/src/app/pokemon/detail-pokemon/detail-pokemon.component.ts b/src/app/pokemon/detail-pokemon/detail-pokemon.component.ts index a93c221..a88c2ee 100644 --- a/src/app/pokemon/detail-pokemon/detail-pokemon.component.ts +++ b/src/app/pokemon/detail-pokemon/detail-pokemon.component.ts @@ -1,24 +1,25 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { POKEMONS } from '../mock-pokemon-list'; import { Pokemon } from '../pokemon'; +import { PokemonService } from '../pokemon.service'; @Component({ selector: 'app-detail-pokemon', templateUrl: './detail-pokemon.component.html', }) export class DetailPokemonComponent implements OnInit { - constructor(private route: ActivatedRoute, private router: Router) {} + constructor( + private route: ActivatedRoute, + private router: Router, + private pokemonService: PokemonService + ) {} pokemonList: Pokemon[]; pokemon: Pokemon | undefined; ngOnInit(): void { - this.pokemonList = POKEMONS; const pokemonId: string | null = this.route.snapshot.paramMap.get('id'); if (pokemonId) { - this.pokemon = this.pokemonList.find( - (pokemon) => pokemon.id === +pokemonId - ); + this.pokemon = this.pokemonService.getPokemonById(+pokemonId); } } diff --git a/src/app/pokemon/list-pokemon/list-pokemon.component.ts b/src/app/pokemon/list-pokemon/list-pokemon.component.ts index e8c7d33..2b9485d 100644 --- a/src/app/pokemon/list-pokemon/list-pokemon.component.ts +++ b/src/app/pokemon/list-pokemon/list-pokemon.component.ts @@ -1,16 +1,20 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; -import { POKEMONS } from '../mock-pokemon-list'; import { Pokemon } from '../pokemon'; +import { PokemonService } from '../pokemon.service'; @Component({ selector: 'app-list-pokemon', templateUrl: './list-pokemon.component.html', }) -export class ListPokemonComponent { - pokemonList: Pokemon[] = POKEMONS; +export class ListPokemonComponent implements OnInit { + pokemonList: Pokemon[]; - constructor(private router: Router) {} + constructor(private router: Router, private pokemonService: PokemonService) {} + + ngOnInit() { + this.pokemonList = this.pokemonService.getPokemonList(); + } goToPokemon(pokemon: Pokemon) { this.router.navigate(['/pokemon', pokemon.id]); diff --git a/src/app/pokemon/pokemon.module.ts b/src/app/pokemon/pokemon.module.ts index f28ee8c..6edbc48 100644 --- a/src/app/pokemon/pokemon.module.ts +++ b/src/app/pokemon/pokemon.module.ts @@ -6,6 +6,7 @@ import { PokemonTypeColorPipe } from './pokemon-type-color.pipe'; import { ListPokemonComponent } from './list-pokemon/list-pokemon.component'; import { DetailPokemonComponent } from './detail-pokemon/detail-pokemon.component'; import { RouterModule, Routes } from '@angular/router'; +import { PokemonService } from './pokemon.service'; const pokemonRoutes: Routes = [ { path: 'pokemons', component: ListPokemonComponent }, @@ -20,5 +21,6 @@ const pokemonRoutes: Routes = [ DetailPokemonComponent, ], imports: [CommonModule, RouterModule.forChild(pokemonRoutes)], + providers: [PokemonService], }) export class PokemonModule {} diff --git a/src/app/pokemon/pokemon.service.ts b/src/app/pokemon/pokemon.service.ts new file mode 100644 index 0000000..01bbb2f --- /dev/null +++ b/src/app/pokemon/pokemon.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from '@angular/core'; +import { POKEMONS } from './mock-pokemon-list'; +import { Pokemon } from './pokemon'; + +@Injectable() +export class PokemonService { + getPokemonList(): Pokemon[] { + return POKEMONS; + } + + getPokemonById(pokemonId: number): Pokemon | undefined { + return POKEMONS.find((pokemon) => pokemon.id === pokemonId); + } + + getPokemonTypeList(): string[] { + const types: Set = new Set(); + POKEMONS.forEach((pokemon) => { + pokemon.types.forEach((type) => types.add(type)); + }); + return Array.from(types.values()); + } +}