new starting point, with Angular 2

Author: pietro909

app/app.component.ts

@@ -2,72 +2,32 @@ import {Component, OnInit} from '@angular/core';
 import {Observable} from "rxjs";
 import {Store} from "@ngrx/store";
 
-import {CurrentSearch} from "./models/current-search.model";
-import {SearchResult} from "./models/search-result.model";
-import {YouTubeService} from "./services/youtube.service";
-
 @Component({
     selector: 'my-app',
     template: `
     <section class="col-md-8">
         <h1>{{title}}</h1>
         <div class="row col-md-8">
-            <search-box [store]="store"></search-box>
-            <proximity-selector [store]="store" [disabled]="disableSearch"
-            [ngClass]="{ disabled: disableSearch }"></proximity-selector>
-        </div>
-        <div class="row col-md-8 alert alert-danger" *ngIf="disableSearch">
-            <p>Can't use geolocalization with an empty searchbox</p>
+            <!-- put searchbox and proximity selector here -->
         </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 class="state">{{ state | json }}</p>
-            <p class="state" *ngIf="disableSearch">state is empty</p>
-            <h2 *ngIf="!disableSearch">Search results:</h2>
+            <!-- put the state here -->
         </div>
-        <h2 *ngIf="disableSearch || searchResults.length == 0">No results</h2>
-        <div class="row col-md-8">
-            <div *ngFor="let result of searchResults" class="thumbnail col-sm-6 col-md-4">
-                <div class="caption">
-                <h3>{{ result.title }}</h3>
-                </div>
-                <img src="{{ result.thumbnailUrl }}" />
-            </div>
-        </div>
-        </section>
+    </section>
     `
 })
 export class AppComponent implements OnInit {
 
     title = 'One Source of Truth for Angular 2';
 
-    private state: CurrentSearch;
-    private currentSearch: Observable<CurrentSearch>;
-    private searchResults: SearchResult[] = [];
-    private disableSearch = false;
-
     constructor(
-        private store: Store<CurrentSearch>,
-        private youtube: YouTubeService
+        // inject store and youtube service
     ) {
-        this.currentSearch = this.store.select<CurrentSearch>('currentSearch');
-        this.youtube.searchResults.subscribe((results: SearchResult[]) => this.searchResults = results);
+        // select the state here
     }
 
     ngOnInit() {
-        this.currentSearch.subscribe((state: CurrentSearch) => {
-            this.state = state;
-            if (state && state.name && state.name.length > 0) {
-                this.disableSearch = false;
-                this.youtube.search(state)
-            } else {
-                this.disableSearch = true;
-                this.searchResults = [];
-            }
-        });
+        // handle here the state's update
     }
 
 }

app/app.module.ts

@@ -1,19 +1,13 @@
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import {AppComponent} from "./app.component";
-import {Store, StoreModule} from "@ngrx/store";
-import {SearchReducer} from "./reducers/search.reducer";
-import {YouTubeService} from "./services/youtube.service";
+import {NgModule}      from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
 import {HttpModule} from "@angular/http";
-import {SearchBox} from "./components/search-box.component";
-import {ProximitySelector} from "./components/proximity-selector.component";
+import {Store, StoreModule} from "@ngrx/store";
 
-const storeManager = StoreModule.provideStore ({ currentSearch: SearchReducer });
+import {AppComponent} from "./app.component";
 
 @NgModule({
-    imports:      [ BrowserModule, StoreModule, storeManager, HttpModule ],
-    declarations: [ AppComponent, SearchBox, ProximitySelector ],
-    bootstrap:    [ AppComponent ],
-    providers:    [ YouTubeService ]
+    imports:      [ BrowserModule, HttpModule ],
+    declarations: [ AppComponent, ],
+    bootstrap:    [ AppComponent ]
 })
 export class AppModule { }