From fd0882dd8f127f0233624d8aac77f868aa0cf2f4 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Mon, 1 Aug 2016 11:22:23 -0700 Subject: [PATCH] docs(toh-6): search query fixes Changes: - Drop `asObservable()` since it is deprecated in RxJS 5 (see the [migration guide](https://github.com/ReactiveX/RxJS/blob/master/MIGRATION.md#operat ors-renamed-or-removed)). - Drop `+` from hero search query URL: `app/heroes/?name=${term}+`. At best it is interpreted as a regex op that serves no purpose, at worst, it gets interpreted as a space (cf. [HTML 4.01 section 17.13.4](https://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4) ). - Replace the generic term "term" by "pattern" since the serach string is actually a search pattern (regex). - Rename `searchSubject` to `searchPatterns` (or maybe it should be `searchPattern$`) since subjects are just observables that can have data injected into them. - Other minor tweak to prose. This work is in preparation for #1924. Note: toh-6 tests pass. --- .../toh-6/ts/app/dashboard.component.html | 3 --- .../toh-6/ts/app/hero-search.component.ts | 18 ++++++++---------- .../toh-6/ts/app/hero-search.service.ts | 4 +--- public/docs/ts/latest/tutorial/toh-pt6.jade | 14 ++++++-------- 4 files changed, 15 insertions(+), 24 deletions(-) diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.html b/public/docs/_examples/toh-6/ts/app/dashboard.component.html index e22a2a5ebb..fe1ee585f6 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.html +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.html @@ -1,13 +1,10 @@

Top Heroes

-
-

{{hero.name}}

- diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts index 9ef06ca47c..81bb8eb773 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-search.component.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-search.component.ts @@ -17,23 +17,22 @@ export class HeroSearchComponent implements OnInit { // #docregion search heroes: Observable; // #enddocregion search - // #docregion searchSubject - searchSubject = new Subject(); - // #enddocregion searchSubject + // #docregion searchTerms + searchTerms = new Subject(); + // #enddocregion searchTerms constructor( private heroSearchService: HeroSearchService, private router: Router) {} - // #docregion searchSubject + // #docregion searchTerms // Push a search term into the observable stream. - search(term: string) { this.searchSubject.next(term); } - // #enddocregion searchSubject + search(term: string) { this.searchTerms.next(term); } + // #enddocregion searchTerms // #docregion search ngOnInit() { - this.heroes = this.searchSubject - .asObservable() // cast as Observable + this.heroes = this.searchTerms .debounceTime(300) // wait for 300ms pause in events .distinctUntilChanged() // ignore if next search term is same as previous .switchMap(term => term // switch to new observable each time @@ -41,9 +40,8 @@ export class HeroSearchComponent implements OnInit { ? this.heroSearchService.search(term) // or the observable of empty heroes if no search term : Observable.of([])) - .catch(error => { - // Todo: real error handling + // TODO: real error handling console.log(error); return Observable.of([]); }); diff --git a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts index 42018e3526..95a31707eb 100644 --- a/public/docs/_examples/toh-6/ts/app/hero-search.service.ts +++ b/public/docs/_examples/toh-6/ts/app/hero-search.service.ts @@ -9,11 +9,9 @@ export class HeroSearchService { constructor(private http: Http) {} - // #docregion observable-search search(term: string) { return this.http - .get(`app/heroes/?name=${term}+`) + .get(`app/heroes/?name=${term}`) .map((r: Response) => r.json().data as Hero[]); } - // #enddocregion observable-search } diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade index 104c8575fe..c7edf449fc 100644 --- a/public/docs/ts/latest/tutorial/toh-pt6.jade +++ b/public/docs/ts/latest/tutorial/toh-pt6.jade @@ -419,11 +419,11 @@ block observables-section Time to create the `HeroSearchComponent` class and metadata. +makeExample('toh-6/ts/app/hero-search.component.ts', null,'hero-search.component.ts') :marked - Focus on the `searchSubject`. - +makeExample('toh-6/ts/app/hero-search.component.ts', 'searchSubject')(format=".") + Focus on the `searchTerms`. + +makeExample('toh-6/ts/app/hero-search.component.ts', 'searchTerms')(format=".") :marked A `Subject` is a producer of an _observable_ event stream. - This `searchSubject` produces an `Observable` of strings, the filter criteria for the name search. + This `searchTerms` produces an `Observable` of strings, the filter criteria for the name search. Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`. @@ -439,8 +439,6 @@ block observables-section Fortunately we can chain `Observable` operators to the string `Observable` that reduce the request flow. We'll make fewer calls to the `HeroSearchService` and still get timely results. Here's how: - * The `asObservable` operator casts the `Subject` as an `Observable` of filter strings. - * `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds before passing along the latest string. We'll never make requests more frequently than 300ms. @@ -495,11 +493,11 @@ block observables-section +makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app.component.ts')(format=".") :marked - ### Adding the search component to the dashboard + ### Add the search component to the dashboard - We add the `HeroSearchComponent` to the bottom of the `DashboardComponent` template. + We add the hero search HTML element to the bottom of the `DashboardComponent` template. - +makeExample('toh-6/ts/app/dashboard.component.html', null, 'dashboard.component.html') + +makeExample('app/dashboard.component.html') :marked And finally, we import the `HeroSearchComponent` and add it to the `directives` array.