finished... with youtube thingy

Author: pigr2

app/app.component.ts

@@ -30,7 +30,10 @@ const storeManager = provideStore({ currentSearch: SearchReducer });
         </div>
         <div class="row col-md-8">
             <ul>
-                <li *ngFor="let result of searchResults">{{ result.title }}</li>
+                <li *ngFor="let result of searchResults">
+                    <h3>{{ result.title }}</h3>
+                    <img src="{{ result.thumbnailUrl }}" />
+                </li>
             </ul>
         </div>
     </section>
@@ -41,10 +44,6 @@ const storeManager = provideStore({ currentSearch: SearchReducer });
 
 export class AppComponent implements OnInit {
 
-    static StoreEvents = {
-        results: 'RESULTS'
-    };
-
     title = ''; //'One Source of Truth for Angular 2';
 
     private state: SearchQuery;
@@ -57,27 +56,16 @@ export class AppComponent implements OnInit {
         private youtube: YouTubeService
     ) {
         this.currentSearch = this.store.select<SearchQuery>('currentSearch');
+        this.youtube.searchResults.subscribe((results: SearchResult[]) => this.searchResults = results);
     }
 
     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
-                        }
-                    })
-                )
+            if (state && state.name && state.name.length > 0) {
+                this.youtube.search(state)
             } else {
-                this.store.dispatch({
-                    type: AppComponent.StoreEvents.results,
-                    payload: {
-                        results: []
-                    }
-                })
+                this.searchResults = [];
             }
         });
     }

app/models/search-query.model.ts

@@ -1,10 +1,8 @@
-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,7 +2,6 @@ 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) {
@@ -28,10 +27,6 @@ export const SearchReducer: ActionReducer<SearchQuery> = (state: SearchQuery, ac
             return Object.assign({}, state, {
                 location: null
             });
-        case AppComponent.StoreEvents.results:
-            return Object.assign({}, state, {
-                results: action.payload.results
-            });
         default:
             return state;
     }