- Adjust to changes on backend:

* endpoint returning list of resources for query by ids
* object keys are camelCased

- Move lists of related resources to BasicResource model

Signed-off-by: damianw345 <damianw345@gmail.com>

src/app/components/resource-detail-card/resource-detail-card.component.html

@@ -3,14 +3,12 @@
   <div class="content">
     <div class="card mb-3">
       <div class="row no-gutters">
-        <div class="col-md-4">
+        <div class="col-md-5">
           <img (error)="setDefaultPicture()" [src]="imageUrl" alt="Resource image" class="card-img">
         </div>
-        <div class="col-md-8">
-          <div class="card-body">
-            <h3 class="card-title">{{resourceName }}</h3>
-            <p *ngFor="let detail of resourceDetailsToShow"><strong>{{detail[0]}}:</strong> {{detail[1]}}</p>
-          </div>
+        <div class="col-md-7 pl-1 pt-0 card-body">
+          <h3 class="card-title">{{resourceName }}</h3>
+          <p *ngFor="let detail of resourceDetailsToShow"><strong>{{detail[0]}}:</strong> {{detail[1]}}</p>
         </div>
       </div>
     </div>

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() {

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<PageableResults> {
     return this.http.get<PageableResults>(`${this.endpoint}/${type}?page=${pageId}`);
   }
 
-  getResource(type: string, id: number): Observable<any> {
-    return this.http.get<any>(`${this.endpoint}/${type}/${id}`);
+  getResourcesByIds(type: string, ids: number): Observable<BasicResource[]> {
+    return this.http.get<BasicResource[]>(`${this.endpoint}/${type}/${ids}`);
   }
 
 }

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[];
 }

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;
 }

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[];
-
 }

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[];
 }

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[];
 }

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[];
 }

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[];
 }

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);
+  }
 }