Show Component:

* fetch data in store
* use store in show component

Author: maxime-urbanski

src/app/components/common/table/table.component.ts

@@ -1,10 +1,7 @@
 import {Component, Input} from '@angular/core';
 import {NgForOf} from "@angular/common";
 import {RouterLink} from "@angular/router";
-import {Hero} from "../../../interface/hero.model";
-import {List} from "../../../interface/list";
-import {selectorHeroesLoading} from "../../../store/selector/hero.selectors";
-import {Store} from "@ngrx/store";
+import {List} from "../../../interface/list.model";
 
 @Component({
   selector: 'app-table',
@@ -17,9 +14,4 @@ import {Store} from "@ngrx/store";
 })
 export class TableComponent {
   @Input() items: List | undefined
-
-  isLoading = this.store.select(selectorHeroesLoading)
-
-  constructor(private store: Store<{ heroes: List }>) {
-  }
 }

src/app/components/foo/list/list.component.ts

@@ -2,12 +2,10 @@ import {Component, OnInit} from '@angular/core';
 import {RouterLink} from "@angular/router";
 import {AsyncPipe, NgFor, NgIf} from "@angular/common";
 import {TableComponent} from "../../common/table/table.component";
-import {Observable} from "rxjs";
-import {List} from "../../../interface/list";
-import {select, Store} from "@ngrx/store";
+import {List} from "../../../interface/list.model";
+import {Store} from "@ngrx/store";
 import {HeroesActions} from "../../../store/action/heroes.actions";
 import {HeroService} from "../../../service/hero.service";
-import {heroesReducer} from "../../../store/reducer/heroes.reducer";
 import {selectorHeroesLoading} from "../../../store/selector/hero.selectors";
 
 @Component({
@@ -25,16 +23,16 @@ import {selectorHeroesLoading} from "../../../store/selector/hero.selectors";
 export class ListComponent implements OnInit {
   heroes$ = this.store.select('heroes')
   isLoading = this.store.select(selectorHeroesLoading)
+
   constructor(private store: Store<{ heroes: List }>, private heroService: HeroService) {
-    this.heroes$ = store.select('heroes')
   }
 
   ngOnInit() {
     this.heroService
       .getHeroes()
       .subscribe(
         (items) =>
-          this.store.dispatch(HeroesActions.getHeroes({items, isLoading: false}))
+          this.store.dispatch(HeroesActions.getHeroes({items: items['hydra:member']}))
       )
   }
 }

src/app/components/foo/show/show.component.html

@@ -1,49 +1,51 @@
 <div class="container mx-auto px-4 max-w-2xl mt-4">
-  <!--<div class="flex items-center justify-between">
-    <a [routerLink]="['/heroes']"
-       class="text-blue-600 hover:text-blue-800">
-      Back to list
-    </a>
-    <div>
-      <a [routerLink]="['/heroes/edit', item?.id]"
-         class="px-6 py-2 mr-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700">
-        Edit
+  <p *ngIf="(isLoading | async) else elseData">Loading ... </p>
+  <ng-template #elseData>
+    <div class="flex items-center justify-between">
+      <a [routerLink]="['/heroes']"
+         class="text-blue-600 hover:text-blue-800">
+        Back to list
       </a>
-      <button
-        (click)="delete()"
-        class="px-6 py-2 bg-red-600 text-white text-xs rounded shadow-md hover:bg-red-700">
-        Delete
-      </button>
+      <div>
+        <a [routerLink]="['/heroes/edit', (item|async)?.id]"
+          class="px-6 py-2 mr-2 bg-green-600 text-white text-xs rounded shadow-md hover:bg-green-700">
+          Edit
+        </a>
+        <button
+          class="px-6 py-2 bg-red-600 text-white text-xs rounded shadow-md hover:bg-red-700">
+          Delete
+        </button>
+      </div>
     </div>
-  </div>
 
-  <h1 class="text-3xl my-4">Show  {{ item?.["@id"] }}</h1>
+    <h1 class="text-3xl my-4">Show {{ (item|async)?.["@id"] }}</h1>
 
-  <div *ngIf="item" class="overflow-x-auto">
-    <table class="min-w-full">
-      <thead class="border-b">
-      <tr>
-        <th scope="col" class="text-sm font-medium px-6 py-4 text-left">
-          Field
-        </th>
-        <th scope="col" class="text-sm font-medium px-6 py-4 text-left">
-          Value
-        </th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr class="border-b">
-        <th
-          class="text-sm font-medium px-6 py-4 text-left capitalize"
-          scope="row"
-        >
-          name
-        </th>
-        <td class="px-6 py-4 whitespace-nowrap text-sm">
-          {{item.name}}
-        </td>
-      </tbody>
-    </table>
-  </div>-->
-  coucou
+    <div class="overflow-x-auto">
+      <table class="min-w-full">
+        <thead class="border-b">
+        <tr>
+          <th scope="col" class="text-sm font-medium px-6 py-4 text-left">
+            Field
+          </th>
+          <th scope="col" class="text-sm font-medium px-6 py-4 text-left">
+            Value
+          </th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngIf="(item | async)"class="border-b">
+          <th
+            class="text-sm font-medium px-6 py-4 text-left capitalize"
+            scope="row"
+          >
+            name
+          </th>
+          <td class="px-6 py-4 whitespace-nowrap text-sm">
+            {{ (item|async)?.name }}
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </ng-template>
 </div>

src/app/components/foo/show/show.component.ts

@@ -1,8 +1,11 @@
-import {Component} from '@angular/core';
-import { RouterLink} from "@angular/router";
-import {CommonModule,  NgIf} from "@angular/common";
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, RouterLink} from "@angular/router";
+import {CommonModule, NgIf} from "@angular/common";
 import {Store} from "@ngrx/store";
 import {HeroService} from "../../../service/hero.service";
+import {Show} from "../../../interface/show.model";
+import {selectorShowItem, selectorShowLoading} from "../../../store/selector/show.selectors";
+import {HeroesActions} from "../../../store/action/heroes.actions";
 
 @Component({
   selector: 'app-show',
@@ -14,28 +17,22 @@ import {HeroService} from "../../../service/hero.service";
   ],
   templateUrl: './show.component.html',
 })
-export class ShowComponent {
+export class ShowComponent implements OnInit {
+  isLoading = this.store.select(selectorShowLoading)
+  item = this.store.select(selectorShowItem)
 
-  constructor( private store: Store, private heroService: HeroService) {}
-  ngOnInit() {
-   /* this.heroService
-      .getHeroes()
-      .subscribe(
-        (heroes) => this.store.dispatch(HeroesActions.getHeroes({ heroes }))
-      )*/
+  constructor(
+    private store: Store<{ show: Show }>,
+    private heroService: HeroService,
+    private router: ActivatedRoute
+  ) {
   }
 
-  /*delete() {
-    if (window.confirm(`Are you sure you want to delete this ${this.item?.["@id"]}`)) {
-      this.deleteItemApi()
-        .then(() => this.location.back())
-    }
+  ngOnInit() {
+    const id = this.router.snapshot.paramMap.get('id')
+    this.heroService
+      .getHero(id)
+      .subscribe((item) =>
+        this.store.dispatch(HeroesActions.getHero({item})))
   }
-
-  async deleteItemApi() {
-    const idRoute = this.router.snapshot.paramMap.get('id')
-    await fetchApi(`/heroes/${idRoute}`, {
-      method: 'DELETE'
-    })
-  }*/
 }

src/app/interface/api.ts

@@ -4,6 +4,14 @@ export interface Api {
   "@context": String,
   "@id": String,
   "@type": String,
+}
+
+export interface ApiList extends Api {
   "hydra:totalItems": Number,
   "hydra:member": Hero[]
 }
+
+export interface ApiShow extends Api {
+  id: Number,
+  name: String
+}

src/app/interface/book.model.ts

@@ -1,7 +1,6 @@
-export interface Hero {
-  "@context": String,
-  "@id": String,
-  "@type": String,
+import {Api} from "./api";
+
+export interface Hero extends Api {
   id: Number,
   name: String
 }

src/app/interface/hero.model.ts

@@ -1,7 +1,7 @@
 import {Hero} from "./hero.model";
 
 export interface List {
-  isLoading?: Boolean,
+  isLoading: Boolean | undefined | null,
   items?: Hero[],
   error?: String,
 }

src/app/interface/list.ts renamed to src/app/interface/list.model.ts

@@ -0,0 +1,7 @@
+import {Hero} from "./hero.model";
+
+export interface Show {
+  isLoading?: Boolean,
+  item?: Hero,
+  error?: String,
+}

src/app/interface/show.model.ts

@@ -1,28 +1,34 @@
 import {HttpClient} from "@angular/common/http";
-import {map} from "rxjs/operators";
-import {Hero} from "../interface/hero.model";
 import {Observable} from "rxjs";
 import {Injectable} from "@angular/core";
-import {List} from "../interface/list";
-import {Api} from "../interface/api";
+import {List} from "../interface/list.model";
+import {ApiList, ApiShow} from "../interface/api";
 import {Store} from "@ngrx/store";
 import {HeroesActions} from "../store/action/heroes.actions";
+import {Show} from "../interface/show.model";
 
 @Injectable({providedIn: 'root'})
 export class HeroService {
-  heroes$ = this.store.select('heroes')
+  baseUrl: string = 'https://localhost'
 
   constructor(
     private http: HttpClient,
-    private store: Store<{ heroes: List }>
+    private store: Store<{
+      heroes: List,
+      show: Show
+    }>
   ) {
-    this.heroes$ = store.select('heroes')
   }
 
-  getHeroes(): Observable<Hero[]> {
+  getHeroes(): Observable<ApiList> {
     this.store.dispatch(HeroesActions.getHeroes({isLoading: true}))
     return this.http
-      .get<Api>('https://localhost/heroes')
-      .pipe(map(result => result['hydra:member']))
+      .get<ApiList>(this.baseUrl + '/heroes')
+  }
+
+  getHero(id: string | null) {
+    this.store.dispatch(HeroesActions.getHero({isLoading: true}))
+    return this.http
+      .get<ApiShow>(this.baseUrl + `/heroes/${id}`)
   }
 }

src/app/service/books.service.ts

@@ -1,11 +1,11 @@
-import {createActionGroup, emptyProps, props} from "@ngrx/store";
+import {createActionGroup, props} from "@ngrx/store";
 import {Hero} from "../../interface/hero.model";
 
 export const HeroesActions = createActionGroup({
   source: 'Heroes',
   events: {
-    'Get Heroes': props<{items?: Array<Hero>, isLoading?: Boolean}>(),
-    'Get Hero': props<{ hero: Hero }>(),
+    'Get Heroes': props<{ items?: Array<Hero>, isLoading?: Boolean, error?: String }>(),
+    'Get Hero': props<{ item?: Hero, isLoading?: Boolean, error?: String }>(),
     'Put Hero': props<{ hero: Hero }>(),
     'Delete Hero': props<{ id: Number }>(),
   }

src/app/service/hero.service.ts

@@ -1,19 +1,21 @@
 import {createReducer, on} from '@ngrx/store'
 import {HeroesActions} from "../action/heroes.actions";
-import fetchApi from '../../../utils/api'
-import {List} from "../../interface/list";
+import {List} from "../../interface/list.model";
+import {Show} from "../../interface/show.model";
 
-export const initialState: List = {
+export const initialStateList: List = {
   isLoading: false,
   items: [],
   error: '',
 }
+
 export const heroesReducer = createReducer(
-  initialState,
+  initialStateList,
   on(HeroesActions.getHeroes,
-    (_state, {items, isLoading}) => ({
+    (_state, {items, isLoading, error}) => ({
       ..._state,
       items,
-      isLoading
+      isLoading,
+      error
     }))
 )

src/app/store/action/heroes.actions.ts

@@ -1,5 +1,7 @@
 import {heroesReducer} from "./heroes.reducer";
+import {showReducer} from "./show.reducer";
 
 export default {
-  heroes: heroesReducer
+  heroes: heroesReducer,
+  show: showReducer
 }

src/app/store/reducer/heroes.reducer.ts

@@ -0,0 +1,21 @@
+import {Show} from "../../interface/show.model";
+import {createReducer, on} from "@ngrx/store";
+import {HeroesActions} from "../action/heroes.actions";
+
+export const initialStateShow: Show = {
+  isLoading: false,
+  item: undefined,
+  error: ''
+}
+
+export const showReducer = createReducer(
+  initialStateShow,
+  on(HeroesActions.getHero,
+    (_state, {item, isLoading = false, error = ''}) => ({
+      ..._state,
+      item,
+      isLoading,
+      error
+    })
+  )
+)