diff --git a/src/app/components/resource-detail-card/resource-detail-card.component.html b/src/app/components/resource-detail-card/resource-detail-card.component.html index fc84fe1..63a7bf0 100644 --- a/src/app/components/resource-detail-card/resource-detail-card.component.html +++ b/src/app/components/resource-detail-card/resource-detail-card.component.html @@ -3,14 +3,12 @@
-
+
Resource image
-
-
-

{{resourceName }}

-

{{detail[0]}}: {{detail[1]}}

-
+
+

{{resourceName }}

+

{{detail[0]}}: {{detail[1]}}

diff --git a/src/app/components/resource-detail-card/resource-detail-card.component.ts b/src/app/components/resource-detail-card/resource-detail-card.component.ts index dc2cd9c..e10b9c7 100644 --- a/src/app/components/resource-detail-card/resource-detail-card.component.ts +++ b/src/app/components/resource-detail-card/resource-detail-card.component.ts @@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router'; import { SwapiService } from '../../core/http/swapi.service'; import Utils from '../../utils'; import { BasicResource } from '../../core/model/swapi/basic-resource'; +import { map } from 'rxjs/operators'; @Component({ selector: 'app-resource-detail-card', @@ -26,18 +27,20 @@ export class ResourceDetailCardComponent implements OnInit { const id = this.activatedRoute.snapshot.url[1].path; this.imageUrl = `assets/img/${resourceType}/${id}.jpg`; - this.swapiService.getResource(Utils.mapResourceType(resourceType), +id) - .subscribe((resource: BasicResource) => { - this.resourceName = resource.name; - this.resourceDetailsToShow = this.getResourceDetailsToShow(resource); - }); + this.swapiService.getResourcesByIds(Utils.mapResourceType(resourceType), +id) + .pipe( + map((results: BasicResource[]) => results[0]) + ).subscribe((result: BasicResource) => { + this.resourceName = result.name; + this.resourceDetailsToShow = this.getResourceDetailsToShow(result); + }); } private getResourceDetailsToShow(resourceDetails) { return Object.entries(resourceDetails) .filter(([_, value]) => !Array.isArray(value)) - .filter(([key, _]) => !['name', 'title', 'created', 'edited', 'url', 'homeworld'].includes(key)) - .map(entry => [Utils.replaceUnderscoresAndFirstLetterToUppercase(entry[0]), entry[1]]); + .filter(([key, _]) => !['id', 'name', 'created', 'edited'].includes(key)) + .map(entry => [Utils.camelCaseToSentenceCase(entry[0]), entry[1]]); } setDefaultPicture() { diff --git a/src/app/core/http/swapi.service.ts b/src/app/core/http/swapi.service.ts index 14124b4..17b0ecb 100644 --- a/src/app/core/http/swapi.service.ts +++ b/src/app/core/http/swapi.service.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { PageableResults } from '../model/pageable-results'; +import { BasicResource } from '../model/swapi/basic-resource'; @Injectable({ providedIn: 'root' @@ -10,14 +11,15 @@ export class SwapiService { private endpoint = 'api/swapi'; - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) { + } getResources(type: string, pageId): Observable { return this.http.get(`${this.endpoint}/${type}?page=${pageId}`); } - getResource(type: string, id: number): Observable { - return this.http.get(`${this.endpoint}/${type}/${id}`); + getResourcesByIds(type: string, ids: number): Observable { + return this.http.get(`${this.endpoint}/${type}/${ids}`); } } diff --git a/src/app/core/model/swapi/basic-resource.ts b/src/app/core/model/swapi/basic-resource.ts index 880130b..776f8c6 100644 --- a/src/app/core/model/swapi/basic-resource.ts +++ b/src/app/core/model/swapi/basic-resource.ts @@ -1,6 +1,12 @@ export interface BasicResource { id: number; - name: string; created: Date; edited: Date; + name: string; + films: number[]; + starships: number[]; + vehicles: number[]; + species: number[]; + characters: number[]; + planets: number[]; } diff --git a/src/app/core/model/swapi/character.ts b/src/app/core/model/swapi/character.ts index d651a6e..4e74cd8 100644 --- a/src/app/core/model/swapi/character.ts +++ b/src/app/core/model/swapi/character.ts @@ -9,9 +9,5 @@ export interface Character extends BasicResource { eyeColor: string; birthYear: string; gender: string; - homeWorld: string; - films: number[]; - species: number[]; - vehicles: number[]; - starships: number[]; + homeWorld: number; } diff --git a/src/app/core/model/swapi/film.ts b/src/app/core/model/swapi/film.ts index 3bd657e..5d94b06 100644 --- a/src/app/core/model/swapi/film.ts +++ b/src/app/core/model/swapi/film.ts @@ -1,16 +1,9 @@ import { BasicResource } from './basic-resource'; export interface Film extends BasicResource { - episodeId: number; openingCrawl: string; director: string; producer: string; releaseDate: string; - characters: number[]; - planets: number[]; - starships: number[]; - vehicles: number[]; - species: number[]; - } diff --git a/src/app/core/model/swapi/planet.ts b/src/app/core/model/swapi/planet.ts index 9ea2be1..d377529 100644 --- a/src/app/core/model/swapi/planet.ts +++ b/src/app/core/model/swapi/planet.ts @@ -9,6 +9,4 @@ export interface Planet extends BasicResource { terrain: string; surfaceWater: string; population: string; - residents: number[]; - films: number[]; } diff --git a/src/app/core/model/swapi/species.ts b/src/app/core/model/swapi/species.ts index abbdcf0..55da9c4 100644 --- a/src/app/core/model/swapi/species.ts +++ b/src/app/core/model/swapi/species.ts @@ -10,6 +10,4 @@ export interface Species extends BasicResource { averageLifespan: string; homeWorld: number; language: string; - people: number[]; - films: number[]; } diff --git a/src/app/core/model/swapi/starship.ts b/src/app/core/model/swapi/starship.ts index 79ec566..5afbafa 100644 --- a/src/app/core/model/swapi/starship.ts +++ b/src/app/core/model/swapi/starship.ts @@ -13,6 +13,4 @@ export interface Starship extends BasicResource { hyperdriveRating: string; MGLT: string; starshipClass: string; - pilots: number[]; - films: number[]; } diff --git a/src/app/core/model/swapi/swapi-resource.enum.ts b/src/app/core/model/swapi/swapi-resource.enum.ts deleted file mode 100644 index a26a217..0000000 --- a/src/app/core/model/swapi/swapi-resource.enum.ts +++ /dev/null @@ -1,9 +0,0 @@ -export enum SwapiResource { - - films, - people, - planets, - species, - starships, - vehicles -} diff --git a/src/app/core/model/swapi/vehicle.ts b/src/app/core/model/swapi/vehicle.ts index 34c7f0e..7cefd04 100644 --- a/src/app/core/model/swapi/vehicle.ts +++ b/src/app/core/model/swapi/vehicle.ts @@ -11,6 +11,4 @@ export interface Vehicle extends BasicResource { cargoCapacity: string; consumables: string; vehicleClass: string; - pilots: number[]; - films: number[]; } diff --git a/src/app/utils.ts b/src/app/utils.ts index 3611aa5..bb21b63 100644 --- a/src/app/utils.ts +++ b/src/app/utils.ts @@ -9,11 +9,6 @@ export default class Utils { return resourceType === 'characters' ? 'people' : resourceType; } - static replaceUnderscoresAndFirstLetterToUppercase(input: string): string { - return input.charAt(0).toUpperCase() + - input.substring(1).replace(/_/g, ' '); - } - static getDecodedJwtJson(token: string): JwtJson | null { try { return jwtDecode(token); @@ -22,4 +17,9 @@ export default class Utils { return null; } } + + static camelCaseToSentenceCase(str: string) { + const result = str.replace(/([A-Z])/g, (substring: string) => ` ${substring.toLowerCase()}`); + return result.charAt(0).toUpperCase() + result.slice(1); + } }