refactoring

Author: Pietro Grandi

app/app.component.ts

@@ -1,11 +1,11 @@
 import {Component, OnInit} from '@angular/core';
-import {SearchBox} from "./components/search-box/search-box.component";
-import {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";
-import {CurrentSearch} from "./components/reducers/current-search.model";
+import {ProximitySelector} from "./components/proximity-selector.component";
+import {SearchBox} from "./components/search-box.component";
+import {searchReducer} from "./reducers/search.reducer";
+import {locationReducer} from "./reducers/location.reducer";
+import {CurrentSearch} from "./models/current-search.model";
 
 const mainReducer = combineReducers({
     searchByName: searchReducer,
@@ -28,7 +28,6 @@ const mainReducer = combineReducers({
         <courses-list [searchResults]="results"></courses-list>
     </div>
     `
-
 })
 
 export class AppComponent implements OnInit {
@@ -45,6 +44,7 @@ export class AppComponent implements OnInit {
 
     ngOnInit() {
         this.currentSearch.subscribe((state: CurrentSearch) => {
+            // the logic is here
             console.log(state);
         });
     }

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

@@ -1,6 +1,6 @@
 import {Component, Input} from "@angular/core";
 import {Store} from "@ngrx/store";
-import {CurrentSearch} from "../reducers/current-search.model";
+import {CurrentSearch} from "../models/current-search.model";
 
 @Component({
     selector: 'proximity-selector',
@@ -10,12 +10,13 @@ import {CurrentSearch} from "../reducers/current-search.model";
         <label for="useLocation">Use current location</label>
         <input type="checkbox" 
             [disabled]="disabled"
-            (change)="turnOnOffLocation($event)">
+            (change)="onLocation($event)">
     </div>
     <div class="input-group">
         <label for="locationRadius">Radius</label>
-        <input type="range" min="1" max="100" value="{{defaultRadius}}"
-            (change)="onRadius($event)"> 
+        <input type="range" min="1" max="100" value="50"
+            [disabled]="!active"
+            (change)="onRadius($event)">
     </div>
     `
 })
@@ -33,9 +34,7 @@ export class ProximitySelector {
 
     active = false;
 
-    defaultRadius = 50;
-
-    turnOnOffLocation($event: any) {
+    onLocation($event: any) {
         this.active = $event.target.checked;
         if (this.active) {
             navigator.geolocation.getCurrentPosition((position: any) => {

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

@@ -1,7 +1,6 @@
 import {Observable} from "rxjs/Rx";
 import {ElementRef, OnInit, Component, Input} from "@angular/core";
 import {Store} from "@ngrx/store";
-import {CurrentSearch} from "../reducers/current-search.model";
 
 @Component({
     inputs: ['store'],
@@ -18,15 +17,14 @@ export class SearchBox implements OnInit {
     };
 
     @Input()
-    store: Store<CurrentSearch>;
+    store: Store<any>;
 
     constructor(private el: ElementRef) {}
 
     ngOnInit(): void {
         Observable.fromEvent(this.el.nativeElement, 'keyup')
             .map((e: any) => e.target.value)
-            .filter((text: string) => text.length > 3 || text.length == 0)
-            .debounceTime(250)
+            .debounceTime(500)
             .subscribe((text: string) =>
                 this.store.dispatch({
                     type: SearchBox.StoreEvents.text,

app/components/reducers/current-search.model.ts renamed to app/models/current-search.model.ts

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

app/models/search-query.model.ts

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

app/models/search-result.model.ts

@@ -1,6 +1,6 @@
 import { ActionReducer, Action } from '@ngrx/store';
-import {CurrentSearch} from "./current-search.model";
-import {ProximitySelector} from "../location/proximity-selector.component";
+import {CurrentSearch} from "../models/current-search.model";
+import {ProximitySelector} from "../components/proximity-selector.component";
 
 export const locationReducer: ActionReducer<CurrentSearch> = (state: CurrentSearch, action: Action) => {
     switch (action.type) {

app/components/reducers/location.reducer.ts renamed to app/reducers/location.reducer.ts

@@ -1,7 +1,6 @@
 import { ActionReducer, Action } from '@ngrx/store';
-import {SearchBox} from "../search-box/search-box.component";
-import {CurrentSearch} from "./current-search.model";
-
+import {CurrentSearch} from "../models/current-search.model";
+import {SearchBox} from "../components/search-box.component";
 
 export const searchReducer: ActionReducer<CurrentSearch> = (state: CurrentSearch, action: Action) => {
     switch (action.type) {

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

@@ -0,0 +1,52 @@
+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 LOCATION_TEMPLATE = 'location={latitude},{longitude}&locationRadius={radius}km';
+
+
+@Injectable()
+export class YouTubeService {
+
+    searchResults: BehaviorSubject<SearchResult[]> = new BehaviorSubject<SearchResult[]>([]);
+
+    constructor( private http: Http ) {}
+    
+    search(query: SearchQuery): Observable<SearchResult[]>  {
+        let params = [
+            `q=${name}`,
+            `key=${YOUTUBE_API_KEY}`,
+            `part=snippet`,
+            `type=video`,
+            `maxResults=50`
+        ];
+        
+        if (query.location) {
+            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());
+            params.push(location);
+        }
+        
+        const queryUrl: string = `${YOUTUBE_API_URL}?${params.join('&')}`;
+        
+        return this.http.get(queryUrl)
+            .map((response: Response) => {
+                console.log(response);
+                return (<any>response.json()).items.map(item => {
+                    return {
+                        id: item.id.videoId,
+                        title: item.snippet.title,
+                        thumbnailUrl: item.snippet.thumbnails.high.url
+                    };
+                });
+            });
+    }
+
+}