daniele-zurico

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

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

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

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

<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

@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

<mat-card>
  <mat-card-header>
      <mat-card-title><strong>{{ hero.name }}</strong></mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <p>
      Birth Date: <strong>{{ hero.birth_year }}</strong>
    </p>
    <p>
      Eyes:  <mat-icon [ngClass]="hero.eye_color">remove_red_eye</mat-icon>

daniele-zurico

export interface Hero {
  url: string;
  name: string;
  birth_year: string;
  eye_color: string;
  gender: string;
  homeworld: string;
  hair_color: string;
  height: number;
  films: string[];

daniele-zurico

imports: [
    ...
    MatCardModule,
    MatButtonModule,
    MatIconModule,
    MatProgressSpinnerModule,
  ],
  ...
  providers: [SwapiService],
  exports: [HeroListComponent],

daniele-zurico

import { postController } from "../controllers/controllers";

const postResolver = {
  Query: {
    posts(root: any, args: any, context: any) {
      return postController.posts();
    }
  },
  Mutation: {
    addPost(root: any, args: any, context: any) {