nerdic-coder

delete(hero: Hero): void {
  this.heroes = this.heroes.filter(h => h !== hero);
  this.heroService.deleteHero(hero).subscribe();
}

nerdic-coder

<div>
  {this.hero}
</div>

nerdic-coder

<style>
/* Application-wide Styles */
h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;

nerdic-coder

/** DELETE: delete the hero from the server */
deleteHero (hero: Hero | number): Observable<Hero> {
  return Observable.create((observer) => {
    const id = typeof hero === 'number' ? hero : hero.id;
    const xhr = new XMLHttpRequest();
    xhr.open('DELETE', CONFIG.SERVER_URL + `heroes/${id}`, true);
    xhr.onload = () => {
      if (xhr.status === 200) {
        this.messageService.add(`HeroService: deleted hero with id:${id}`);
        observer.next(JSON.parse(xhr.responseText));

nerdic-coder

<div>
  <label>Hero name:
    <input type="text" value={this.hero.name} onInput={(event) => this.handleChangeName(event)} placeholder="name" />
  </label>
  <button onClick={() => this.add()}>
    add
  </button>
</div>

nerdic-coder

handleChangeName(event) {
    this.hero = {
      id: this.hero.id,
      name: event.target.value
    };
  }

  add(): void {
    this.hero.name = this.hero.name.trim();
    if (!this.hero.name) { return; }

nerdic-coder

  /** POST: add a new hero to the server */
  addHero (hero: Hero): Observable<Hero> {
    return Observable.create((observer) => {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', CONFIG.SERVER_URL + `heroes`, true);
      xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
      xhr.onload = () => {
        if (xhr.status === 201) {
          this.messageService.add(`HeroService: added new hero`);
          observer.next(JSON.parse(xhr.responseText));

nerdic-coder

  save(): void {
    this.heroService.updateHero(this.hero)
      .subscribe(() => this.goBack());
  }

nerdic-coder

  /** PUT: update the hero on the server */
  updateHero(hero: Hero): Observable<any> {
    return Observable.create((observer) => {
      const xhr = new XMLHttpRequest();
      xhr.open('PUT', CONFIG.SERVER_URL + `heroes/${hero.id}`, true);
      xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
      xhr.onload = () => {
        if (xhr.status === 200) {
          this.messageService.add(`HeroService: updated hero with id:${hero.id}`);
          observer.next(JSON.parse(xhr.responseText));

nerdic-coder

getHero(id: number): Observable<Hero> {
    return Observable.create((observer) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', CONFIG.SERVER_URL + `heroes/${id}`);
      xhr.onload = () => {
        if (xhr.status === 200) {
          this.messageService.add(`HeroService: fetched hero with id:${id}`);
          observer.next(JSON.parse(xhr.responseText));
        }
        else {