Merge pull request #1 from pietro909/one-reducer

One reducer

Author: pietro909

.gitignore

@@ -4,3 +4,4 @@ app/**/*.js
 *.map
 *.log
 typings/
+.idea

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - "4.2"
+before_script:
+  - npm install
+script: npm run tsc

README.md

@@ -1,3 +1,4 @@
+[![Build Status](https://travis-ci.org/pietro909/one-source-of-truth-for-angular.svg?branch=youtube)](https://travis-ci.org/pietro909/one-source-of-truth-for-angular)
 # One Source of Truth for Angular 2
 
 Brief description of the article and what it covers.

app/app.component.ts

@@ -1,15 +1,45 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Store, provideStore} from "@ngrx/store";
+import {Observable} from "rxjs/Rx";
+import {CurrentSearch} from "./models/current-search.model";
+import {ProximitySelector} from "./components/proximity-selector.component";
+import {SearchBox} from "./components/search-box.component";
+import {SearchReducer} from "./reducers/search.reducer";
 
-@Component({
+const storeManager = provideStore({ currentSearch: SearchReducer });
 
+@Component({
     selector: 'my-app',
+    providers: [ storeManager ],
+    directives: [ SearchBox, ProximitySelector ],
+    template: `
+    <h1>{{title}}</h1>
+    <div class="row">
+        <search-box [store]="store"></search-box>
+        <proximity-selector [store]="store"></proximity-selector>
+    </div>
+    <p>{{ state | json }}</p>
+    `
+})
 
-    template: `<h1>{{title}}</h1>`,
+export class AppComponent implements OnInit {
 
-})
+    title = 'heroes and books'; //One Source of Truth for Angular 2';
+    
+    private state: CurrentSearch;
+
+    private currentSearch: Observable<CurrentSearch>;
 
-export class AppComponent {
+    constructor(
+        private store: Store<CurrentSearch>
+    ) {
+        this.currentSearch = this.store.select<CurrentSearch>('currentSearch');
+    }
 
-    title = 'One Source of Truth for Angular 2';
+    ngOnInit() {
+        this.currentSearch.subscribe((state: CurrentSearch) => {
+            this.state = state;
+        });
+    }
 
 }

app/components/proximity-selector.component.ts

@@ -0,0 +1,69 @@
+import {Component, Input} from "@angular/core";
+import {Store} from "@ngrx/store";
+import {CurrentSearch} from "../models/current-search.model";
+
+@Component({
+    selector: 'proximity-selector',
+    inputs: ['store'],
+    template: `
+    <div class="input-group">
+        <label for="useLocation">Use current location</label>
+        <input type="checkbox" 
+            [disabled]="disabled"
+            (change)="onLocation($event)">
+    </div>
+    <div class="input-group">
+        <label for="locationRadius">Radius</label>
+        <input type="range" min="1" max="100" value="50"
+            [disabled]="!active"
+            (change)="onRadius($event)">
+    </div>
+    `
+})
+
+export class ProximitySelector {
+
+    static StoreEvents = {
+        position: 'ProximitySelector:POSITION',
+        radius: 'ProximitySelector:RADIUS',
+        off: 'ProximitySelector:OFF'
+    };
+    
+    @Input()
+    store: Store<CurrentSearch>;
+
+    active = false;
+
+    onLocation($event: any) {
+        this.active = $event.target.checked;
+        if (this.active) {
+            navigator.geolocation.getCurrentPosition((position: any) => {
+                this.store.dispatch({
+                    type: ProximitySelector.StoreEvents.position,
+                    payload: {
+                        position: {
+                            latitude: position.coords.latitude,
+                            longitude: position.coords.longitude
+                        }
+                    }
+                });
+            });
+        } else {
+            this.store.dispatch({
+                type: ProximitySelector.StoreEvents.off,
+                payload: {}
+            });
+        }
+    }
+
+    onRadius($event: any) {
+        const radius = parseInt($event.target.value, 10);
+        this.store.dispatch({
+            type: ProximitySelector.StoreEvents.radius,
+            payload: {
+                radius: radius
+            }
+        });
+    }
+
+}

app/components/search-box.component.ts

@@ -0,0 +1,38 @@
+import {Observable} from "rxjs/Rx";
+import {ElementRef, OnInit, Component, Input} from "@angular/core";
+import {Store} from "@ngrx/store";
+
+@Component({
+    inputs: ['store'],
+    selector: 'search-box',
+    template: `
+    <input type="text" class="form-control" placeholder="Search" autofocus>
+    `
+})
+
+export class SearchBox implements OnInit {
+    
+    static StoreEvents = {
+        text: 'SearchBox:TEXT_CHANGED'
+    };
+
+    @Input()
+    store: Store<any>;
+
+    constructor(private el: ElementRef) {}
+
+    ngOnInit(): void {
+        Observable.fromEvent(this.el.nativeElement, 'keyup')
+            .map((e: any) => e.target.value)
+            .debounceTime(500)
+            .subscribe((text: string) =>
+                this.store.dispatch({
+                    type: SearchBox.StoreEvents.text,
+                    payload: {
+                        text: text
+                    }
+                })
+            );
+    }
+
+}

app/models/current-search.model.ts

@@ -0,0 +1,9 @@
+
+export interface CurrentSearch {
+    text: string,
+    position: {
+        latitude: number,
+        longitude: number
+    },
+    radius: number
+}

app/models/search-query.model.ts

@@ -0,0 +1,8 @@
+export interface SearchQuery {
+    name: string;
+    location?: {
+        latitude: number,
+        longitude: number,
+        radius: number
+    }
+}

app/models/search-result.model.ts

@@ -0,0 +1,5 @@
+export interface SearchResult {
+    id: string;
+    title: string;
+    thumbnailUrl: string;
+}

app/reducers/search.reducer.ts

@@ -0,0 +1,31 @@
+import { ActionReducer, Action } from '@ngrx/store';
+import {CurrentSearch} from "../models/current-search.model";
+import {SearchBox} from "../components/search-box.component";
+import {ProximitySelector} from "../components/proximity-selector.component";
+
+export const SearchReducer: ActionReducer<CurrentSearch> = (state: CurrentSearch, action: Action) => {
+    switch (action.type) {
+        case SearchBox.StoreEvents.text:
+            return Object.assign({}, state, {
+                text: action.payload.text
+            });
+        case ProximitySelector.StoreEvents.position:
+            return Object.assign({}, state, {
+                position: {
+                    latitude: action.payload.position.latitude,
+                    longitude: action.payload.position.longitude
+                }
+            });
+        case ProximitySelector.StoreEvents.radius:
+            return Object.assign({}, state, {
+                radius: action.payload.radius
+            });
+        case ProximitySelector.StoreEvents.off:
+            return Object.assign({}, state, {
+                position: null,
+                radius: null
+            });
+        default:
+            return state;
+    }
+};