daniele-zurico

{
    "javascript.validate.enable": false,
    "flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow",
    "flow.stopFlowOnExit": true,
    "flow.enabled": true,
    "flow.useNPMPackagedFlow": false,
    "flow.showStatus":  true,
    "flow.showUncovered": false,
    "flow.runOnEdit": true,
    "flow.useLSP": false

daniele-zurico

[ignore]
.*/node_modules/fbjs/.*

[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable

[untyped]
.*/node_modules/.*

daniele-zurico

prev() {
 this.store.dispatch(new ChangePage(Pagination.PREV));
}

next() {
  this.store.dispatch(new ChangePage(Pagination.NEXT));
}

daniele-zurico

ngOnInit() {
    this.heroes$ = this.store.select(getHeroes);
    this.isFirst$ = this.store.select(getIsFirstPage);
    this.isLast$ = this.store.select(getIsLastPage);
    this.isLoading$ = this.store.select(getIsLoading);

    this.store.dispatch(new FetchHeroes());
  }

daniele-zurico

export const getHeroesState = createFeatureSelector<fromHeroes.State>('heroes');
export const getHeroes = createSelector(getHeroesState, state => state.data);
export const getIsLoading = createSelector(getHeroesState, state => state.isLoading);
export const getCurrentPage = createSelector(getHeroesState, state => state.page);
export const getIsFirstPage = createSelector(getHeroesState, state => !state.previous);
export const getIsLastPage = createSelector(getHeroesState, state => !state.next);

daniele-zurico

export class HeroesEffects {
  @Effect()
  fetch$: Observable<HeroesActions> = this.actions$
    .ofType(HeroesActionTypes.FetchHeroes)
    .pipe(
      withLatestFrom(this.store),
      switchMap(([action, state]) =>
        this.service.getHeroes(getCurrentPage(state)).pipe(
          map(data => new FetchHeroesSuccess(data)),
          catchError(err => of(new FetchHeroesError(err)))

daniele-zurico

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

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

daniele-zurico

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

daniele-zurico

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

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