daniele-zurico

@Component({
  selector: 'swkb-hero-list',
  templateUrl: './hero-list.component.html',
  styleUrls: ['./hero-list.component.scss']
})
export class HeroListComponent implements OnInit {
  heroes$: Observable<Hero[]>;
  isFirst$: Observable<boolean>;
  isLast$: Observable<boolean>;
  isLoading$: Observable<boolean>;

daniele-zurico

<swkb-hero *ngFor="let hero of heroes$ | async; trackBy: trackByUrl"
           [hero]="hero"></swkb-hero>

<div class="loader__bg" *ngIf="isLoading$ | async">
  <mat-spinner
    class="loader"
    color="accent"
    mode="indeterminate"
    [diameter]="40"
    [value]="25"></mat-spinner>

daniele-zurico

export class SwapiService {
  private readonly baseUrl = 'https://swapi.co/api/';

  constructor(private http: HttpClient) {}

  getHeroes(page?: number): Observable<HeroesResponse> {
    const options = {
      params: {},
    };
    const link = `${this.baseUrl}people/`;

daniele-zurico

<mat-toolbar color='primary'>
  <span>Star Wars Knowledge Base</span>
</mat-toolbar>
<swkb-hero-list></swkb-hero-list>

daniele-zurico

<swkb-hero *ngFor="let hero of heroes$ | async; trackBy: trackByUrl"
           [hero]="hero"></swkb-hero>

<div class="loader__bg" *ngIf="isLoading$ | async">
  <mat-spinner
    class="loader"
    color="accent"
    mode="indeterminate"
    [diameter]="40"
    [value]="25"></mat-spinner>

daniele-zurico

StoreModule.forRoot(reducers, { metaReducers }),
!environment.production ? StoreDevtoolsModule.instrument() : []

daniele-zurico

export enum HeroesActionTypes {
  FetchHeroes = '[Heroes] Fetch Heroes',
  FetchHeroesSuccess = '[Heroes] Load Heroes Success',
  FetchHeroesError = '[Heroes] Load Heroes Error',
  ChangePage = '[Heroes] Change page'
}

export enum Pagination {
  NEXT,
  PREV

daniele-zurico

export interface State {
  isLoading: boolean;
  error: HttpErrorResponse | null;
  data: Hero[] | null;
  next: string | null;
  previous: string | null;
  page: number;
}

daniele-zurico

export const initialState: State = {
  isLoading: false,
  error: null,
  data: [],
  next: null,
  previous: null,
  page: 1
};

daniele-zurico

export function reducer(state = initialState, action: HeroesActions): State {
  switch (action.type) {

    case HeroesActionTypes.FetchHeroes:
      return {
        ...state,
        isLoading: true,
        error: null
      };