undergoing modifications....

Author: pigr2

app/app.component.ts

@@ -5,6 +5,8 @@ import {ProximitySelector} from './components/proximity-selector.component';
 import {SearchBox} from './components/search-box.component';
 import {SearchReducer} from './reducers/search.reducer';
 import {SearchQuery} from "./models/search-query.model";
+import {YouTubeService} from "./services/youtube.service";
+import {SearchResult} from "./models/search-result.model";
 
 const storeManager = provideStore({ currentSearch: SearchReducer });
 
@@ -26,27 +28,57 @@ const storeManager = provideStore({ currentSearch: SearchReducer });
             </p>
             <p>{{ state | json }}</p>
         </div>
+        <div class="row col-md-8">
+            <ul>
+                <li *ngFor="let result of searchResults">{{ result.title }}</li>
+            </ul>
+        </div>
     </section>
     `
 })
 
+//
+
 export class AppComponent implements OnInit {
 
-    title = 'One Source of Truth for Angular 2';
+    static StoreEvents = {
+        results: 'RESULTS'
+    };
+
+    title = ''; //'One Source of Truth for Angular 2';
 
     private state: SearchQuery;
 
     private currentSearch: Observable<SearchQuery>;
+    private searchResults: SearchResult[] = [];
 
     constructor(
-        private store: Store<SearchQuery>
+        private store: Store<SearchQuery>,
+        private youtube: YouTubeService
     ) {
         this.currentSearch = this.store.select<SearchQuery>('currentSearch');
     }
 
     ngOnInit() {
         this.currentSearch.subscribe((state: SearchQuery) => {
             this.state = state;
+            if (state && state.name) {
+                this.youtube.search(state).subscribe((results: SearchResult[]) =>
+                    this.store.dispatch({
+                        type: AppComponent.StoreEvents.results,
+                        payload: {
+                            results: results
+                        }
+                    })
+                )
+            } else {
+                this.store.dispatch({
+                    type: AppComponent.StoreEvents.results,
+                    payload: {
+                        results: []
+                    }
+                })
+            }
         });
     }
 

app/main.ts

@@ -2,7 +2,9 @@ import { bootstrap }    from '@angular/platform-browser-dynamic';
 import { HTTP_PROVIDERS } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import {YouTubeService} from "./services/youtube.service";
 
 bootstrap(AppComponent, [
-    HTTP_PROVIDERS
+    HTTP_PROVIDERS,
+    YouTubeService
 ]);

app/models/search-query.model.ts

@@ -1,8 +1,10 @@
+import {SearchResult} from "./search-result.model";
 export interface SearchQuery {
     name: string;
     location?: {
         latitude: number,
         longitude: number,
         radius: number
-    }
+    },
+    results: SearchResult[]
 }

app/reducers/search.reducer.ts

@@ -2,29 +2,35 @@ import { ActionReducer, Action } from '@ngrx/store';
 import {SearchBox} from '../components/search-box.component';
 import {ProximitySelector} from '../components/proximity-selector.component';
 import {SearchQuery} from "../models/search-query.model";
+import {AppComponent} from "../app.component";
 
 export const SearchReducer: ActionReducer<SearchQuery> = (state: SearchQuery, action: Action) => {
     switch (action.type) {
         case SearchBox.StoreEvents.text:
             return Object.assign({}, state, {
-                text: action.payload.text
+                name: action.payload.text
             });
         case ProximitySelector.StoreEvents.position:
             return Object.assign({}, state, {
-                position: {
+                location: {
                     latitude: action.payload.position.latitude,
                     longitude: action.payload.position.longitude
                 }
             });
         case ProximitySelector.StoreEvents.radius:
+            //const position = Object.assign(state.location)
             return Object.assign({}, state, {
-                position: {
+                location: {
                     radius: action.payload.radius
                 }
             });
         case ProximitySelector.StoreEvents.off:
             return Object.assign({}, state, {
-                position: null
+                location: null
+            });
+        case AppComponent.StoreEvents.results:
+            return Object.assign({}, state, {
+                results: action.payload.results
             });
         default:
             return state;

app/services/youtube.service.ts

@@ -1,4 +1,4 @@
-import {BehaviorSubject, Observable} from 'rxjs/Rx';
+import {Observable, BehaviorSubject} from 'rxjs/Rx';
 import {Injectable} from '@angular/core';
 import {Response, Http} from '@angular/http';
 import {SearchResult} from '../models/search-result.model';
@@ -18,35 +18,41 @@ export class YouTubeService {
 
     search(query: SearchQuery): Observable<SearchResult[]>  {
         let params = [
-            `q=${name}`,
+            `q=${query.name}`,
             `key=${YOUTUBE_API_KEY}`,
             `part=snippet`,
             `type=video`,
             `maxResults=50`
         ];
 
         if (query.location) {
+            const radius = query.location.radius ? query.location.radius : 50;
             const location =
                 LOCATION_TEMPLATE
                     .replace(/\{latitude\}/g, query.location.latitude.toString())
                     .replace(/\{longitude\}/g, query.location.longitude.toString())
-                    .replace(/\{radius\}/g, query.location.radius.toString());
+                    .replace(/\{radius\}/g, radius.toString());
             params.push(location);
         }
 
         const queryUrl: string = `${YOUTUBE_API_URL}?${params.join('&')}`;
+
+        console.log(queryUrl);
 
-        return this.http.get(queryUrl)
+        this.http.get(queryUrl)
             .map((response: Response) => {
                 console.log(response);
-                return (<any>response.json()).items.map(item => {
+                return <any>response.json().items.map(item => {
                     return {
                         id: item.id.videoId,
                         title: item.snippet.title,
                         thumbnailUrl: item.snippet.thumbnails.high.url
                     };
                 });
-            });
+            })
+            .subscribe((results: SearchResult[]) => this.searchResults.next(results));
+
+        return this.searchResults;
     }
 
 }

index.html

@@ -0,0 +1 @@
+npm run start

start.bat

@@ -1,7 +1,7 @@
 (function(global) {
     // map tells the System loader where to look for things
     var map = {
-        'app':                        'app',
+        'app':                        'dist',
         '@angular':                   'node_modules/@angular',
         'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
         'rxjs':                       'node_modules/rxjs',