formatted

Author: Pietro Grandi

app/app.component.ts

@@ -1,10 +1,10 @@
 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";
+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';
 
 const storeManager = provideStore({ currentSearch: SearchReducer });
 
@@ -13,18 +13,26 @@ const storeManager = provideStore({ currentSearch: SearchReducer });
     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>
+    <section class="col-md-8">
+        <h1>{{title}}</h1>
+        <div class="row col-md-8">
+            <search-box [store]="store"></search-box>
+            <proximity-selector [store]="store"></proximity-selector>
+        </div>
+        <div class="row col-md-8">
+            <p>
+                Try to type something in the searchbox, play with the location and with radius: the above state will
+                always be consistent and up to date.
+            </p>
+            <p>{{ state | json }}</p>
+        </div>
+    </section>
     `
 })
 
 export class AppComponent implements OnInit {
 
-    title = 'heroes and books'; //One Source of Truth for Angular 2';
+    title = 'One Source of Truth for Angular 2';
 
     private state: CurrentSearch;
 

app/components/proximity-selector.component.ts

@@ -1,6 +1,6 @@
-import {Component, Input} from "@angular/core";
-import {Store} from "@ngrx/store";
-import {CurrentSearch} from "../models/current-search.model";
+import {Component, Input} from '@angular/core';
+import {Store} from '@ngrx/store';
+import {CurrentSearch} from '../models/current-search.model';
 
 @Component({
     selector: 'proximity-selector',

app/components/search-box.component.ts

@@ -1,6 +1,6 @@
-import {Observable} from "rxjs/Rx";
-import {ElementRef, OnInit, Component, Input} from "@angular/core";
-import {Store} from "@ngrx/store";
+import {Observable} from 'rxjs/Rx';
+import {ElementRef, OnInit, Component, Input} from '@angular/core';
+import {Store} from '@ngrx/store';
 
 @Component({
     inputs: ['store'],

app/main.ts

@@ -1,4 +1,3 @@
-import { provide } from '@angular/core';
 import { bootstrap }    from '@angular/platform-browser-dynamic';
 import { HTTP_PROVIDERS } from '@angular/http';
 

app/reducers/search.reducer.ts

@@ -1,7 +1,7 @@
 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";
+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) {

app/services/youtube.service.ts

@@ -1,11 +1,11 @@
-import {BehaviorSubject, Observable} from "rxjs/Rx";
-import {Injectable} from "@angular/core";
-import {Response, Http} from "@angular/http";
-import {SearchResult} from "../models/search-result.model";
-import {SearchQuery} from "../models/search-query.model";
+import {BehaviorSubject, Observable} from 'rxjs/Rx';
+import {Injectable} from '@angular/core';
+import {Response, Http} from '@angular/http';
+import {SearchResult} from '../models/search-result.model';
+import {SearchQuery} from '../models/search-query.model';
 
-const YOUTUBE_API_KEY = "AIzaSyDOfT_BO81aEZScosfTYMruJobmpjqNeEk";
-const YOUTUBE_API_URL = "https://www.googleapis.com/youtube/v3/search";
+const YOUTUBE_API_KEY = 'AIzaSyDOfT_BO81aEZScosfTYMruJobmpjqNeEk';
+const YOUTUBE_API_URL = 'https://www.googleapis.com/youtube/v3/search';
 const LOCATION_TEMPLATE = 'location={latitude},{longitude}&locationRadius={radius}km';