Refactoring to streams

MovieHunter/app/movies/movie-edit.component.html

@@ -1,68 +1,74 @@
+<style>
+    .ng-invalid {
+        color: red;
+        border: 2px dashed red;
+    }
+</style>
+
 <div class="panel panel-primary">
     <div class="panel-heading">
-        {{pageTitle}}
+        {{pageTitle$ | async}}
     </div>
 
-    <div class="panel-body" *ngIf="movie">
+    <div class="panel-body" *ngIf="movie$ | async">
         <form class="form-horizontal" [ngFormModel]="editForm" (ngSubmit)="saveMovie()">
             <fieldset>
-                <div class="form-group" [ngClass]="{'has-error': formError.title }">
+                <div class="form-group">
                     <label class="col-md-2 control-label" for="inputMovieTitle">Movie Title</label>
 
                     <div class="col-md-8">
-                        <input class="form-control" 
-                                id="inputMovieTitle" 
-                                type="text" 
-                                placeholder="Title (required)" 
-                                ngControl="title" />
-                        <span class="help-block" *ngIf="formError.title">
-                                {{formError.title}}
-                        </span>
+                        <input class="form-control"
+                               id="inputMovieTitle"
+                               type="text"
+                               placeholder="Title (required)"
+                               ngControl="title"
+                        />
+                        <help-block [message]="titleMessage$ | async"></help-block>
                     </div>
                 </div>
-
-                <div class="form-group" [ngClass]="{'has-error': formError.director }">
+
+
+                <div class="form-group">
                     <label class="col-md-2 control-label" for="inputDirector">Director</label>
 
                     <div class="col-md-8">
-                        <input class="form-control" 
-                                id="inputDirector" 
-                                type="text" 
-                                placeholder="Director (required)" 
-                                ngControl="director" />
-                        <span class="help-block" *ngIf="formError.director">
-                                {{formError.director}}
-                        </span>
+                        <input class="form-control"
+                               id="inputDirector"
+                               type="text"
+                               placeholder="Director (required)"
+                               ngControl="director"
+                        />
+                        <help-block [message]="directorMessage$ | async"></help-block>
+
                     </div>
                 </div>
-                
-                <div class="form-group" [ngClass]="{'has-error': formError.starRating}">
+
+                <div class="form-group">
                     <label class="col-md-2 control-label" for="inputStarRating">Star Rating (1-5)</label>
 
                     <div class="col-md-8">
-                        <input class="form-control" 
-                                id="inputStarRating" 
-                                type="text" 
-                                placeholder="Rating" 
-                                ngControl="starRating" />
-                        <span class="help-block" *ngIf="formError.starRating">
-                                {{formError.starRating}}
-                        </span>
+                        <input class="form-control"
+                               id="inputStarRating"
+                               type="text"
+                               placeholder="Rating"
+                               ngControl="starRating"
+                        />
+                        <help-block [message]="starRatingMessage$ | async"></help-block>
+
                     </div>
                 </div>
-                
-                <div class="form-group" [ngClass]="{'has-error': formError.description}">
+
+                <div class="form-group">
                     <label class="col-md-2 control-label" for="inputMovieDescription">Description</label>
 
                     <div class="col-md-8">
-                        <textarea class="form-control" 
-                                id="inputMovieDescription" 
-                                placeholder="Description"
-                                rows=3
-                                ngControl="description"></textarea>
-                        <span class="help-block" *ngIf="formError.description">
-                                {{ formError.description}}
-                        </span>
+                        <textarea class="form-control"
+                                  id="inputMovieDescription"
+                                  placeholder="Description"
+                                  rows=3
+                                  ngControl="description"
+                        ></textarea>
+                        <help-block [message]="descriptionMessage$ | async"></help-block>
                     </div>
                 </div>
 

MovieHunter/app/movies/movie-edit.component.ts

@@ -1,121 +1,130 @@
-import { Component } from '@angular/core';
-import { FormBuilder, ControlGroup, Control, Validators } from '@angular/common';
-import { ROUTER_DIRECTIVES, OnActivate, RouteSegment } from '@angular/router';
+import {Component, Input} from '@angular/core';
+import {FormBuilder, ControlGroup, Control, Validators, AbstractControl} from '@angular/common';
+import {ROUTER_DIRECTIVES, OnActivate, RouteSegment} from '@angular/router';
+import {IMovie} from './movie';
+import {MovieService} from './movie.service';
+import {RangeValidator} from '../shared/number.validator.directive';
+import {Observable} from 'rxjs/Rx';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/observable/from';
+import {NumberValidator} from '../shared/number.validator';
 
-import { IMovie } from './movie';
-import { MovieService } from './movie.service';
-import { NumberValidator } from '../shared/number.validator';
+@Component({
+    selector: 'help-block',
+    template: `<span class="help-block">
+            {{message}}
+        </span>`
+})
+export class HelpBlock {
+    @Input() message:string;
+}
 
 @Component({
     templateUrl: 'app/movies/movie-edit.component.html',
-    directives: [ROUTER_DIRECTIVES]
+    directives: [ROUTER_DIRECTIVES, RangeValidator, HelpBlock]
 })
 export class MovieEditComponent implements OnActivate {
-    pageTitle: string = 'Edit Movie';
-    editForm: ControlGroup;
-    titleControl: Control;
-    formError: { [id: string]: string };
-    private _validationMessages: { [id: string]: { [id: string]: string } };
-    movie: IMovie;
-    errorMessage: string;
-
-    constructor(private _fb: FormBuilder,
-        private _movieService: MovieService) {
-
-        // Initialization of strings
-        this.formError = {
-            'title': '',
-            'director': '',
-            'starRating': '',
-            'description': ''
-        };
-
-        this._validationMessages = {
-            'title': {
-                'required': 'Movie title is required',
-                'minlength': 'Movie title must be at least three characters.',
-                'maxlength': 'Movie title cannot exceed 50 characters.'
-            },
-            'director': {
-                'required': 'Director is required',
-                'minlength': 'Director must be at least 5 characters.',
-                'maxlength': 'Director cannot exceed 50 characters.'
-            },
-            'starRating': {
-                'range': 'Rate the movie between 1 (lowest) and 5 (highest).'
-            }
-        };
+    editForm:ControlGroup;
+    movie$:Observable<IMovie>;
+    pageTitle$:Observable<string>;
+
+    titleMessage$:Observable<string>;
+    directorMessage$:Observable<string>;
+    starRatingMessage$:Observable<string>;
+    descriptionMessage$:Observable<string>;
+
+    constructor(private _fb:FormBuilder,
+                private _movieService:MovieService) {
     }
 
-    routerOnActivate(curr: RouteSegment): void {
+    routerOnActivate(curr:RouteSegment):void {
         let id = +curr.getParam('id');
         this.getMovie(id);
     }
 
-    getMovie(id: number) {
-        this._movieService.getMovie(id)
+    getMovie(id:number) {
+        this.movie$ = this._movieService.getMovie(id);
+
+        this.pageTitle$ = this.movie$
+            .map(({movieId, title}) => movieId
+                ? `Edit Movie ${title}`
+                : `Add Movie`
+            );
+
+        this.movie$
             .subscribe(
-            movie => this.onMovieRetrieved(movie),
-            error => this.errorMessage = <any>error);
+                movie => this.createForm(movie),
+                console.log.bind(console));
     }
 
-    onMovieRetrieved(movie: IMovie) {
-        this.movie = movie;
+    // if 'INVALID', lookup and push out the validation message
+    // otherwise, push out an empty string
+    createMessageStream = (control:AbstractControl, messages:any)=>
+        control
+            .statusChanges
+            .switchMap((status:string) =>
+                status === 'INVALID'
+                    ? Observable.from(
+                        Object.keys(control.errors)
+                            .map(key => messages[key])
+                        )
+                    : Observable.of('')
+            );
 
-        if (this.movie.movieId === 0) {
-            this.pageTitle = 'Add Movie';
-        } else {
-            this.pageTitle = `Edit Movie: ${this.movie.title}`;
-        }
+    createForm(movie:IMovie) {
+        const {title, director, starRating, description} = movie;
 
-        this.titleControl = new Control(this.movie.title, Validators.compose([Validators.required,
-                                                                Validators.minLength(3),
-                                                                Validators.maxLength(50)]));
-        this.editForm = this._fb.group({
-            'title': this.titleControl,
-            'director': [this.movie.director,
-                Validators.compose([Validators.required,
-                    Validators.minLength(5),
-                    Validators.maxLength(50)])],
-            'starRating': [this.movie.starRating,
-                NumberValidator.range(1, 5)],
-            'description': [this.movie.description]
+        const titleControl = new Control(title, Validators.compose([
+            Validators.required,
+            Validators.minLength(3),
+            Validators.maxLength(50)
+        ]));
+        this.titleMessage$ = this.createMessageStream(titleControl, {
+            'required': 'Movie title is required',
+            'minlength': 'Movie title must be at least three characters.',
+            'maxlength': 'Movie title cannot exceed 50 characters.'
         });
 
-        this.editForm.valueChanges
-            .map(value => {
-                // Causes infinite loop
-                // this.titleControl.updateValue(value.title.toUpperCase());
-                value.title = value.title.toUpperCase();
-                return value;
-            })
-            .subscribe(data => this.onValueChanged(data));
-        // this.editForm.valueChanges
-        //         .debounceTime(500)
-        //         .subscribe(data => this.onValueChanged(data));
-    }
+        const directorControl = new Control(director, Validators.compose([
+            Validators.required,
+            Validators.minLength(3),
+            Validators.maxLength(50)
+        ]));
+        this.directorMessage$ = this.createMessageStream(directorControl, {
+            'required': 'Director is required',
+            'minlength': 'Director must be at least 5 characters.',
+            'maxlength': 'Director cannot exceed 50 characters.'
+        });
 
-    onValueChanged(data: any) {
-        for (let field in this.formError) {
-            if (this.formError.hasOwnProperty(field)) {
-                let hasError = this.editForm.controls[field].dirty &&
-                    !this.editForm.controls[field].valid;
-                this.formError[field] = '';
-                if (hasError) {
-                    for (let key in this.editForm.controls[field].errors) {
-                        if (this.editForm.controls[field].errors.hasOwnProperty(key)) {
-                            this.formError[field] += this._validationMessages[field][key] + ' ';
-                        }
-                    }
-                }
-            }
-        }
+        const descriptionControl = new Control(description, Validators.compose([
+            Validators.required,
+            Validators.minLength(3)
+        ]));
+        this.descriptionMessage$ = this.createMessageStream(descriptionControl, {
+            'required': 'Description is required',
+            'minlength': 'Description must be at least 5 characters.'
+        });
+
+        const starRatingControl = new Control(starRating, Validators.compose([
+            NumberValidator.range(1, 5),
+        ]));
+        this.starRatingMessage$ = this.createMessageStream(starRatingControl, {
+            'min': 'Requires a rating greater than 0',
+            'max': 'Requires a rating less than 5',
+            'NaN': 'Requires a number',
+        });
+
+        this.editForm = this._fb.group({
+            'title': titleControl,
+            'director': directorControl,
+            'starRating': starRatingControl,
+            'description': descriptionControl
+        });
     }
 
     saveMovie() {
         if (this.editForm.dirty && this.editForm.valid) {
-            this.movie = this.editForm.value;
-            alert(`Movie: ${JSON.stringify(this.movie)}`);
+            alert(`Movie: ${JSON.stringify(this.editForm.value)}`);
         }
     }
 }

MovieHunter/app/movies/movie.service.ts

@@ -21,7 +21,8 @@ export class MovieService {
         return this._http.get(this._moviesUrl)
             .map(res => this.handleMap(res, id))
             .do(data => console.log('Data: ' + JSON.stringify(data)))
-            .catch(this.handleError);
+            .catch(this.handleError)
+            .share();
     }
 
     private handleError(error: Response) {

MovieHunter/app/shared/number.validator.directive.ts

@@ -0,0 +1,26 @@
+import {Directive, provide, Attribute, forwardRef} from '@angular/core';
+import {NG_VALIDATORS, Validator, AbstractControl} from '@angular/common';
+import {NumberValidator} from './number.validator';
+
+export const RANGE_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => RangeValidator),
+    multi: true
+};
+
+@Directive({
+    selector: '[range][ngControl]',
+    providers: [RANGE_VALIDATOR]
+})
+export class RangeValidator implements Validator {
+    private _validator:(c:AbstractControl)=> any;
+
+    constructor(@Attribute('range') range:string) {
+        const [min, max] = range.split(',').map(v => parseInt(v));
+        this._validator = NumberValidator.range(min, max);
+    }
+
+    validate(c:AbstractControl):{} {
+        return this._validator(c)
+    }
+}