composing reducers

Author: Pietro Grandi

app/app.component.ts

@@ -1,19 +1,27 @@
 import {Component, OnInit} from '@angular/core';
 import {SearchBox} from "./components/search-box/search-box.component";
-import {CurrentSearch, searchReducer} from "./components/youtube-search/search.reducer";
-import {Store, provideStore} from "@ngrx/store";
+import {CurrentSearch, searchReducer} from "./components/reducers/search.reducer";
+import {Store, provideStore, combineReducers} from "@ngrx/store";
 import {Observable} from "rxjs/Rx";
+import {locationReducer} from "./components/reducers/location.reducer";
+import {ProximitySelector} from "./components/location/proximity-selector.component";
+
+const mainReducer = combineReducers({
+    searchByName: searchReducer,
+    searchByLocation: locationReducer
+});
 
 @Component({
     selector: 'my-app',
     providers: [
-        provideStore({ currentSearch: searchReducer })
+        provideStore({ currentSearch: mainReducer })
     ],
-    directives: [ SearchBox ],
+    directives: [ SearchBox, ProximitySelector ],
     template: `
     <h1>{{title}}</h1>
     <div class="row">
         <search-box [store]="store"></search-box>
+        <proximity-selector [store]="store"></proximity-selector>
     </div>
     <div class="row">
         <courses-list [searchResults]="results"></courses-list>
@@ -27,13 +35,13 @@ export class AppComponent implements OnInit {
     title = 'One Source of Truth for Angular 2';
 
     private currentSearch: Observable<CurrentSearch>;
-    
+
     constructor(
         private store: Store<CurrentSearch>
     ) {
         this.currentSearch = this.store.select<CurrentSearch>('currentSearch');
     }
-    
+
     ngOnInit() {
         this.currentSearch.subscribe((state: CurrentSearch) => {
             console.log(state);

app/components/location/proximity-selector.component.ts

@@ -0,0 +1,69 @@
+import {Component, EventEmitter, Input} from "@angular/core";
+import {Store} from "@ngrx/store";
+
+@Component({
+    selector: 'proximity-selector',
+    inputs: ['store'],
+    template: `
+    <div class="input-group">
+        <label for="useLocation">Use current location</label>
+        <input type="checkbox" 
+            [disabled]="disabled"
+            (change)="turnOnOffLocation($event)">
+    </div>
+    <div class="input-group">
+        <label for="locationRadius">Radius</label>
+        <input type="range" min="1" max="100" value="{{defaultRadius}}"
+            (change)="onRadius($event)"> 
+    </div>
+    `
+})
+
+export class ProximitySelector {
+
+    static StoreEvents = {
+        position: 'ProximitySelector:POSITION',
+        radius: 'ProximitySelector:RADIUS',
+        off: 'ProximitySelector:OFF'
+    };
+    
+    @Input()
+    store: Store<any>;
+
+    active = false;
+
+    defaultRadius = 50;
+
+    turnOnOffLocation($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/reducers/current-search.model.ts

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

app/components/reducers/location.reducer.ts

@@ -0,0 +1,28 @@
+import { ActionReducer, Action } from '@ngrx/store';
+import {CurrentSearch} from "./current-search.model";
+import {ProximitySelector} from "../location/proximity-selector.component";
+
+export const locationReducer: ActionReducer<CurrentSearch> = (state: CurrentSearch, action: Action) => {
+    console.log(`reduce 2 -> ${action.type}`);
+    switch (action.type) {
+        case ProximitySelector.StoreEvents.position:
+            const update = {
+                position: {
+                    latitude: action.payload.position.latitude,
+                    longitude: action.payload.position.longitude
+                }
+            };
+            return Object.assign({}, state, update);
+        case ProximitySelector.StoreEvents.off:
+            const update = {
+                position: null,
+                radius: null
+            };
+            return Object.assign({}, state, update);
+        case ProximitySelector.StoreEvents.radius:
+            const update = { radius: action.payload.radius };
+            return Object.assign({}, state, update);
+         default:
+            return state;
+    }
+};

app/components/youtube-search/search.reducer.ts renamed to app/components/reducers/search.reducer.ts

@@ -1,12 +1,12 @@
 import { ActionReducer, Action } from '@ngrx/store';
+import {SearchBox} from "../search-box/search-box.component";
+import {CurrentSearch} from "./current-search.model";
 
-export interface CurrentSearch {
-    text: string
-}
 
 export const searchReducer: ActionReducer<CurrentSearch> = (state: CurrentSearch, action: Action) => {
+    console.log(`reduce 1 -> ${action.type}`);
     switch (action.type) {
-        case 'TEXT':
+        case SearchBox.StoreEvents.text:
             const update = { text: action.payload.text };
             return Object.assign({}, state, update);
         default:

app/components/search-box/search-box.component.ts

@@ -1,6 +1,6 @@
 import {Observable} from "rxjs/Rx";
 import {ElementRef, OnInit, Component, Input} from "@angular/core";
-import {CurrentSearch} from "../youtube-search/search.reducer";
+import {CurrentSearch} from "../reducers/search.reducer";
 import {Store} from "@ngrx/store";
 
 @Component({
@@ -12,6 +12,10 @@ import {Store} from "@ngrx/store";
 })
 
 export class SearchBox implements OnInit {
+    
+    static StoreEvents = {
+        text: 'SearchBox:TEXT_CHANGED'
+    };
 
     @Input()
     store: Store<any>;
@@ -25,7 +29,7 @@ export class SearchBox implements OnInit {
             .debounceTime(250)
             .subscribe((text: string) =>
                 this.store.dispatch({
-                    type: 'TEXT',
+                    type: SearchBox.StoreEvents.text,
                     payload: {
                         text: text
                     }