From f8e6b5d1f74b86facb9357be6c4b76aa7da88363 Mon Sep 17 00:00:00 2001
From: Patrice Chalin <chalin@users.noreply.github.com>
Date: Tue, 28 Jun 2016 13:15:29 -0700
Subject: [PATCH] docs(toh-5/dart): make dashboard more robust (#1688)

Originally the dashboard TS expression ``heroes.slice(1, 5))` had been
written as:

> _heroService.getHeroes().getRange(1, 5)

which is brittle; it fails if there are not enough heroes. Slice
doesn't fail; an equivalent express
ion in Dart is

> _heroService.getHeroes().skip(1).take(4)

This is now used.

Other changes:
- Fix in css (missed TS-side update).
- Ran `dartfmt` on `heroes_component.dart`.
---
 .../toh-5/dart/lib/dashboard_component.dart     |  2 +-
 .../toh-5/dart/lib/dashboard_component_2.dart   |  2 +-
 public/docs/_examples/toh-5/dart/lib/hero.dart  |  2 +-
 .../toh-5/dart/lib/hero_detail_component.dart   |  3 +--
 .../toh-5/dart/lib/heroes_component.css         |  2 +-
 .../toh-5/dart/lib/heroes_component.dart        | 17 ++++++++++-------
 6 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
index 972497e065..ff0fb8c0d1 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
@@ -32,7 +32,7 @@ class DashboardComponent implements OnInit {
   // #enddocregion ctor
 
   Future<Null> ngOnInit() async {
-    heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+    heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
   // #docregion goto-detail
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
index 15d239ba1b..aa9afb38d7 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component_2.dart
@@ -19,7 +19,7 @@ class DashboardComponent implements OnInit {
   DashboardComponent(this._heroService);
 
   Future<Null> ngOnInit() async {
-    heroes = (await _heroService.getHeroes()).getRange(1, 5).toList();
+    heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
   gotoDetail() {/* not implemented yet */}
diff --git a/public/docs/_examples/toh-5/dart/lib/hero.dart b/public/docs/_examples/toh-5/dart/lib/hero.dart
index d62b733142..828f8cebab 100644
--- a/public/docs/_examples/toh-5/dart/lib/hero.dart
+++ b/public/docs/_examples/toh-5/dart/lib/hero.dart
@@ -3,4 +3,4 @@ class Hero {
   String name;
 
   Hero(this.id, this.name);
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
index ed648d626f..a6c506a231 100644
--- a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
@@ -1,6 +1,5 @@
 // #docplaster
-// #docregion
-// #docregion v2
+// #docregion , v2
 import 'dart:async';
 import 'dart:html';
 
diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.css b/public/docs/_examples/toh-5/dart/lib/heroes_component.css
index d939ab565d..35e45af98d 100644
--- a/public/docs/_examples/toh-5/dart/lib/heroes_component.css
+++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.css
@@ -6,7 +6,7 @@
   margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
-  width: 10em;
+  width: 15em;
 }
 .heroes li {
   cursor: pointer;
diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
index fda869c3aa..48e1a167bf 100644
--- a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
@@ -14,10 +14,9 @@ import 'hero_service.dart';
     selector: 'my-heroes',
     // #enddocregion heroes-component-renaming
     templateUrl: 'heroes_component.html',
-    styleUrls:  const ['heroes_component.css'],
-    directives: const [HeroDetailComponent]
-    // #docregion heroes-component-renaming
-)
+    styleUrls: const ['heroes_component.css'],
+    directives: const [HeroDetailComponent])
+// #docregion heroes-component-renaming
 // #enddocregion heroes-component-renaming, metadata
 // #docregion class, heroes-component-renaming
 class HeroesComponent implements OnInit {
@@ -37,9 +36,13 @@ class HeroesComponent implements OnInit {
     getHeroes();
   }
 
-  void onSelect(Hero hero) { selectedHero = hero; }
+  void onSelect(Hero hero) {
+    selectedHero = hero;
+  }
 
-  Future<Null> gotoDetail() =>
-      _router.navigate(['HeroDetail', {'id': selectedHero.id.toString()}]);
+  Future<Null> gotoDetail() => _router.navigate([
+        'HeroDetail',
+        {'id': selectedHero.id.toString()}
+      ]);
   // #docregion heroes-component-renaming
 }