No commit message

src/app/app-routing.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { FilmDetailsComponent } from './components/film-details/film-details.component';
-import { HomeComponent } from './components/home/home.component';
-import { PeopleDetailsComponent } from './components/people-details/people-details.component';
-import { PeopleComponent } from './components/people/people.component';
+import { FilmDetailsComponent } from './pages/film-details/film-details.component';
+import { HomeComponent } from './pages/home/home.component';
+import { PeopleDetailsComponent } from './pages/people-details/people-details.component';
+import { PeopleComponent } from './pages/people/people.component';
 
 const routes: Routes = [
   {

src/app/app.module.ts

@@ -4,12 +4,12 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { HomeComponent } from './components/home/home.component';
-import { PeopleComponent } from './components/people/people.component';
+import { HomeComponent } from './pages/home/home.component';
+import { PeopleComponent } from './pages/people/people.component';
 import { MapToRouterLinkPipe } from './shared/pipes/mapToRouterLink/map-to-router-link.pipe';
-import { FilmDetailsComponent } from './components/film-details/film-details.component';
+import { FilmDetailsComponent } from './pages/film-details/film-details.component';
 import { MapToCharacterPipe } from './shared/pipes/mapToCharacter/map-to-character.pipe';
-import { PeopleDetailsComponent } from './components/people-details/people-details.component';
+import { PeopleDetailsComponent } from './pages/people-details/people-details.component';
 import { ToRouteUrlPipe } from './shared/pipes/toRouteUrl/to-route-url.pipe';
 import { HttpRequestInterceptor } from './shared/services/http-request-interceptor.service';
 

src/app/pages/film-details/film-details.component.html

@@ -0,0 +1,44 @@
+<img
+  src="assets/pato-duck.gif"
+  width="227"
+  height="276"
+  priority
+  *ngIf="isLoading$ | async"
+/>
+<span *ngIf="film$ | async as film">
+  <div [hidden]="isLoading$ | async">
+    <ul class="character-list">
+      <div>Characters:</div>
+      <span class="character-list-container"
+        ><li *ngFor="let character of film?.characters$ | async">
+          <a href="{{ character | toRouteUrl }}">{{ character.name }}</a>
+        </li></span
+      >
+    </ul>
+    <div>Created: {{ film?.created }}</div>
+    <div>Created: {{ film?.director }}</div>
+    <div>Created: {{ film?.edited }}</div>
+    <div>Created: {{ film?.episode_id }}</div>
+    <div>Created: {{ film?.opening_crawl }}</div>
+    <ul>
+      <span>Planets: </span>
+      <li *ngFor="let planet of film?.planets ?? []">{{ planet }}</li>
+    </ul>
+    <div>Producer: {{ film?.producer }}</div>
+    <div>Release date: {{ film?.release_date }}</div>
+    <ul>
+      <span>Planets: </span>
+      <li *ngFor="let species of film?.species ?? []">{{ species }}</li>
+    </ul>
+    <ul>
+      <span>Planets: </span>
+      <li *ngFor="let starship of film?.starships ?? []">{{ starship }}</li>
+    </ul>
+    <div>Title: {{ film?.title }}</div>
+    <div>URL: {{ film?.url }}</div>
+    <ul>
+      <span>Vehicles: </span>
+      <li *ngFor="let vehicle of film?.vehicles ?? []">{{ vehicle }}</li>
+    </ul>
+  </div></span
+>

src/app/components/film-details/film-details.component.ts → src/app/pages/film-details/film-details.component.ts

@@ -1,7 +1,17 @@
 import { Location } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { delay, filter, forkJoin, map, mergeMap, Observable, tap } from 'rxjs';
+import {
+  debounceTime,
+  delay,
+  filter,
+  forkJoin,
+  map,
+  mergeMap,
+  Observable,
+  takeLast,
+  tap,
+} from 'rxjs';
 import { MapToCharacterPipe } from 'src/app/shared/pipes/mapToCharacter/map-to-character.pipe';
 import { apiURL } from 'src/app/shared/services/api.config';
 import { ApiService } from 'src/app/shared/services/api.service';
@@ -18,7 +28,9 @@ import { HttpStatusService } from 'src/app/shared/services/http-status.service';
   providers: [MapToCharacterPipe],
 })
 export class FilmDetailsComponent implements OnInit {
-  isLoading$?: Observable<boolean>;
+  isLoading$: Observable<boolean> = this.httpStatusService.isLoading$.pipe(
+    delay(0)
+  );
   film$?: Observable<
     IFilmResponse & {
       characters$: Observable<IPeopleResponse[]>;
@@ -32,15 +44,7 @@ export class FilmDetailsComponent implements OnInit {
     private location: Location
   ) {}
 
-  listenToLoadingState(): void {
-    this.isLoading$ = this.httpStatusService.loadingSub.pipe(
-      delay(100),
-      filter(Boolean)
-    );
-  }
-
   ngOnInit(): void {
-    this.listenToLoadingState();
     this.film$ = this.route.paramMap.pipe(
       map((params) => params.get('id')),
       filter(Boolean),

src/app/pages/people-details/people-details.component.html

@@ -0,0 +1,67 @@
+<img
+  src="assets/pato-duck.gif"
+  width="227"
+  height="276"
+  priority
+  *ngIf="isLoading$ | async"
+/>
+<span [hidden]="isLoading$ | async">
+  <div *ngIf="details$ | async as details" class="flex-container">
+    <div class="row"><span class="title"> Name: </span> {{ details.name }}</div>
+    <div class="row">
+      <span class="title">Height: </span> {{ details.height }}
+    </div>
+    <div class="row"><span class="title">Mass: </span> {{ details.mass }}</div>
+    <div class="row">
+      <span class="title">Hair color: </span> {{ details.hair_color }}
+    </div>
+    <div class="row">
+      <span class="title">Skin color: </span> {{ details.skin_color }}
+    </div>
+    <div class="row">
+      <span class="title">Eye color: </span> {{ details.eye_color }}
+    </div>
+    <div class="row">
+      <span class="title">Birth year: </span> {{ details.birth_year }}
+    </div>
+    <div class="row">
+      <span class="title">Gender: </span> {{ details.gender }}
+    </div>
+    <div class="row">
+      <span class="title">Homeworld: </span> {{ details.homeworld }}
+    </div>
+    <div class="row">
+      <span class="title">Films: </span>
+      <ul>
+        <li *ngFor="let film of details.films | mapToRouterLink: 'films'">
+          <a class="link-button" href="{{ film.page }}">{{ film.label }}</a>
+        </li>
+      </ul>
+    </div>
+    <div class="row">
+      <span class="title">Species: </span>
+      <ul>
+        <li *ngFor="let species of details.species">{{ species }}</li>
+      </ul>
+    </div>
+    <div class="row">
+      <span class="title">Vehicles:</span>
+      <ul>
+        <li *ngFor="let vehicle of details.vehicles">{{ vehicle }}</li>
+      </ul>
+    </div>
+    <div class="row">
+      <span class="title">Starships: </span>
+      <ul>
+        <li *ngFor="let starship of details.starships">{{ starship }}</li>
+      </ul>
+    </div>
+    <div class="row">
+      <span class="title">Created: </span> {{ details.created }}
+    </div>
+    <div class="row">
+      <span class="title">Edited: </span> {{ details.edited }}
+    </div>
+    <div class="row"><span class="title">URL: </span> {{ details.url }}</div>
+  </div>
+</span>

src/app/components/people-details/people-details.component.ts → src/app/pages/people-details/people-details.component.ts

@@ -3,22 +3,28 @@ import { ActivatedRoute } from '@angular/router';
 import { ApiService } from 'src/app/shared/services/api.service';
 import { IPeopleResponse } from 'src/app/shared/services/api.types';
 import { Location } from '@angular/common';
-import { map, Observable, switchMap } from 'rxjs';
+import { debounceTime, delay, map, Observable, switchMap, tap } from 'rxjs';
+import { HttpStatusService } from 'src/app/shared/services/http-status.service';
 
 @Component({
   selector: 'app-people-details',
   templateUrl: './people-details.component.html',
   styleUrls: ['./people-details.component.scss'],
 })
 export class PeopleDetailsComponent implements OnInit {
+  details$?: Observable<IPeopleResponse>;
+  isLoading$: Observable<boolean> = this.httpStatusService.isLoading$.pipe(
+    debounceTime(2000),
+    delay(0)
+  );
+
   constructor(
     private api: ApiService,
     private route: ActivatedRoute,
+    private httpStatusService: HttpStatusService,
     private location: Location
   ) {}
 
-  details$?: Observable<IPeopleResponse>;
-
   ngOnInit(): void {
     this.details$ = this.route.params.pipe(
       map((param) => param['id']),

src/app/pages/people/people.component.html

@@ -0,0 +1,30 @@
+<div class="people-content">
+  <img
+    src="assets/pato-duck.gif"
+    width="227"
+    height="276"
+    priority
+    *ngIf="isLoading$ | async"
+  />
+  <span [hidden]="isLoading$ | async">
+    <span *ngIf="people$ | async as people">
+      <ul class="people-list">
+        <li *ngFor="let person of people.results ?? []">
+          <a href="{{ person | toRouteUrl }}" class="person-entry"
+            >Name: {{ person.name }}</a
+          >
+        </li>
+      </ul>
+      <nav *ngIf="!(isLoading$ | async)">
+        <span
+          ><a
+            [ngClass]="people.previous ? 'link-button' : 'link-button-disabled'"
+            href="{{ previousUrl }}"
+            >Previous</a
+          ></span
+        >
+        <a class="link-button" href="{{ nextUrl }}">Next</a>
+      </nav></span
+    ></span
+  >
+</div>