Skip to content

Commit 5851c23

Browse files
author
pigr2
committed
it's compiling, it's bootstrapping, it's 5pm Friday and out there the sun is shining... see you tomorrow!
1 parent 525f922 commit 5851c23

34 files changed

+617
-321
lines changed

‎app/app.component.ts

Lines changed: 77 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,77 @@
1-
import {Component, OnInit} from '@angular/core';
2-
import {Store, provideStore} from '@ngrx/store';
3-
import {Observable} from 'rxjs/Rx';
4-
import {ProximitySelector} from './components/proximity-selector.component';
5-
import {SearchBox} from './components/search-box.component';
6-
import {SearchReducer} from './reducers/search.reducer';
7-
import {CurrentSearch} from "./models/current-search.model";
8-
import {YouTubeService} from "./services/youtube.service";
9-
import {SearchResult} from "./models/search-result.model";
10-
11-
const storeManager = provideStore({ currentSearch: SearchReducer });
12-
13-
@Component({
14-
selector: 'my-app',
15-
providers: [ storeManager ],
16-
directives: [ SearchBox, ProximitySelector ],
17-
template: `
18-
<section class="col-md-8">
19-
<h1>{{title}}</h1>
20-
<div class="row col-md-8">
21-
<search-box [store]="store"></search-box>
22-
<proximity-selector [store]="store" [disabled]="disableSearch"
23-
[ngClass]="{ disabled: disableSearch }"></proximity-selector>
24-
</div>
25-
<div class="row col-md-8 alert alert-danger" *ngIf="disableSearch">
26-
<p>Can't use geolocalization with an empty searchbox</p>
27-
</div>
28-
<div class="row col-md-8">
29-
<p>
30-
Try to type something in the searchbox, play with the location and with radius: the above state will
31-
always be consistent and up to date.
32-
</p>
33-
<p class="state">{{ state | json }}</p>
34-
<p class="state" *ngIf="disableSearch">{ }</p>
35-
</div>
36-
<h2 *ngIf="!disableSearch">Search results:</h2>
37-
<h2 *ngIf="disableSearch || searchResults.length == 0">No results</h2>
38-
<div class="row col-md-8">
39-
<div *ngFor="let result of searchResults" class="thumbnail col-sm-6 col-md-4">
40-
<div class="caption">
41-
<h3>{{ result.title }}</h3>
42-
</div>
43-
<!--<img src="{{ result.thumbnailUrl }}" />-->
44-
</div>
45-
</div>
46-
</section>
47-
`
48-
})
49-
50-
export class AppComponent implements OnInit {
51-
52-
title = 'One Source of Truth for Angular 2';
53-
54-
private state: CurrentSearch;
55-
private currentSearch: Observable<CurrentSearch>;
56-
private searchResults: SearchResult[] = [];
57-
private disableSearch = false;
58-
59-
constructor(
60-
private store: Store<CurrentSearch>,
61-
private youtube: YouTubeService
62-
) {
63-
this.currentSearch = this.store.select<CurrentSearch>('currentSearch');
64-
this.youtube.searchResults.subscribe((results: SearchResult[]) => this.searchResults = results);
65-
}
66-
67-
ngOnInit() {
68-
this.currentSearch.subscribe((state: CurrentSearch) => {
69-
this.state = state;
70-
if (state && state.name && state.name.length > 0) {
71-
this.disableSearch = false;
72-
this.youtube.search(state)
73-
} else {
74-
this.disableSearch = true;
75-
this.searchResults = [];
76-
}
77-
});
78-
}
79-
80-
}
1+
import {Component, OnInit} from '@angular/core';
2+
import {Observable} from "rxjs";
3+
import {Store} from "@ngrx/store";
4+
5+
import {CurrentSearch} from "./models/current-search.model";
6+
import {SearchResult} from "./models/search-result.model";
7+
8+
/*
9+
<div class="row col-md-8">
10+
<search-box [store]="store"></search-box>
11+
<proximity-selector [store]="store" [disabled]="disableSearch"
12+
[ngClass]="{ disabled: disableSearch }"></proximity-selector>
13+
</div>
14+
<div class="row col-md-8 alert alert-danger" *ngIf="disableSearch">
15+
<p>Can't use geolocalization with an empty searchbox</p>
16+
</div>
17+
<div class="row col-md-8">
18+
<p>
19+
Try to type something in the searchbox, play with the location and with radius: the above state will
20+
always be consistent and up to date.
21+
</p>
22+
<p class="state">{{ state | json }}</p>
23+
<p class="state" *ngIf="disableSearch">{ }</p>
24+
</div>
25+
<h2 *ngIf="!disableSearch">Search results:</h2>
26+
<h2 *ngIf="disableSearch || searchResults.length == 0">No results</h2>
27+
<div class="row col-md-8">
28+
<div *ngFor="let result of searchResults" class="thumbnail col-sm-6 col-md-4">
29+
<div class="caption">
30+
<h3>{{ result.title }}</h3>
31+
</div>
32+
<!--<img src="{{ result.thumbnailUrl }}" />-->
33+
</div>
34+
</div>
35+
*/
36+
37+
@Component({
38+
selector: 'my-app',
39+
template: `
40+
<section class="col-md-8">
41+
<h1>{{title}}</h1>
42+
43+
</section>
44+
`
45+
})
46+
export class AppComponent implements OnInit {
47+
48+
title = 'One Source of Truth for Angular 2';
49+
50+
private state: CurrentSearch;
51+
private currentSearch: Observable<CurrentSearch>;
52+
private searchResults: SearchResult[] = [];
53+
private disableSearch = false;
54+
55+
constructor(
56+
private store: Store<CurrentSearch>,
57+
// private youtube: YouTubeService
58+
) {
59+
this.currentSearch = this.store.select<CurrentSearch>('currentSearch');
60+
console.log(`component~!!!`);
61+
// this.youtube.searchResults.subscribe((results: SearchResult[]) => this.searchResults = results);
62+
}
63+
64+
ngOnInit() {
65+
this.currentSearch.subscribe((state: CurrentSearch) => {
66+
this.state = state;
67+
if (state && state.name && state.name.length > 0) {
68+
this.disableSearch = false;
69+
// this.youtube.search(state)
70+
} else {
71+
this.disableSearch = true;
72+
this.searchResults = [];
73+
}
74+
});
75+
}
76+
77+
}

‎app/app.module.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import {AppComponent} from "./app.component";
4+
import {Store, StoreModule} from "@ngrx/store";
5+
import {SearchReducer} from "./reducers/search.reducer";
6+
7+
const storeManager = StoreModule.provideStore ({ currentSearch: SearchReducer });
8+
9+
@NgModule({
10+
imports: [ BrowserModule, StoreModule, storeManager ],
11+
declarations: [ AppComponent ],
12+
bootstrap: [ AppComponent ],
13+
// providers: [ storeManager ]
14+
})
15+
export class AppModule { }

‎app/main.ts

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
import { bootstrap } from '@angular/platform-browser-dynamic';
2-
import { HTTP_PROVIDERS } from '@angular/http';
3-
4-
import { AppComponent } from './app.component';
5-
import {YouTubeService} from "./services/youtube.service";
6-
7-
bootstrap(AppComponent, [
8-
HTTP_PROVIDERS,
9-
YouTubeService
10-
]);
1+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2+
import { AppModule } from './app.module';
3+
4+
const platform = platformBrowserDynamic();
5+
6+
platform.bootstrapModule(AppModule);

‎app/reducers/search.reducer.ts

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
import { ActionReducer, Action } from '@ngrx/store';
2-
import {SearchBox} from '../components/search-box.component';
3-
import {ProximitySelector} from '../components/proximity-selector.component';
2+
// import {SearchBox} from '../components/search-box.component';
3+
// import {ProximitySelector} from '../components/proximity-selector.component';
44
import {CurrentSearch} from "../models/current-search.model";
55

66
export const SearchReducer: ActionReducer<CurrentSearch> = (state: CurrentSearch, action: Action) => {
77
switch (action.type) {
8-
case SearchBox.StoreEvents.text:
9-
return Object.assign({}, state, {
10-
name: action.payload.text
11-
});
12-
case ProximitySelector.StoreEvents.position:
13-
return Object.assign({}, state, {
14-
location: {
15-
latitude: action.payload.position.latitude,
16-
longitude: action.payload.position.longitude
17-
}
18-
});
19-
case ProximitySelector.StoreEvents.radius:
20-
return Object.assign({}, state, {
21-
radius: action.payload.radius
22-
});
23-
case ProximitySelector.StoreEvents.off:
24-
return Object.assign({}, state, {
25-
location: null
26-
});
8+
// case SearchBox.StoreEvents.text:
9+
// return Object.assign({}, state, {
10+
// name: action.payload.text
11+
// });
12+
// case ProximitySelector.StoreEvents.position:
13+
// return Object.assign({}, state, {
14+
// location: {
15+
// latitude: action.payload.position.latitude,
16+
// longitude: action.payload.position.longitude
17+
// }
18+
// });
19+
// case ProximitySelector.StoreEvents.radius:
20+
// return Object.assign({}, state, {
21+
// radius: action.payload.radius
22+
// });
23+
// case ProximitySelector.StoreEvents.off:
24+
// return Object.assign({}, state, {
25+
// location: null
26+
// });
2727
default:
2828
return state;
2929
}

‎app/styles.css

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
section {
2-
margin-left: 2rem;
3-
margin-right: 2rem;
1+
/* Master Styles */
2+
h1 {
3+
color: #369;
4+
font-family: Arial, Helvetica, sans-serif;
5+
font-size: 250%;
46
}
5-
proximity-selector, search-box {
6-
display: flex;
7-
flex-direction: column;
8-
padding-bottom: 1.2rem;
7+
h2, h3 {
8+
color: #444;
9+
font-family: Arial, Helvetica, sans-serif;
10+
font-weight: lighter;
911
}
10-
proximity-selector.disabled {
11-
color: #b9b9b9;
12+
body {
13+
margin: 2em;
1214
}
13-
div.row {
14-
margin-top: 1.6rem;
15-
}
16-
.state {
17-
font-family: monospace;
18-
font-size: smaller;
19-
color: darkorange;
20-
}

‎old/app.component.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use strict";
2+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6+
return c > 3 && r && Object.defineProperty(target, key, r), r;
7+
};
8+
var core_1 = require('@angular/core');
9+
var store_1 = require('@ngrx/store');
10+
var proximity_selector_component_1 = require('./components/proximity-selector.component');
11+
var search_box_component_1 = require('./components/search-box.component');
12+
var search_reducer_1 = require('./reducers/search.reducer');
13+
var storeManager = store_1.provideStore({ currentSearch: search_reducer_1.SearchReducer });
14+
var AppComponent = (function () {
15+
function AppComponent(store, youtube) {
16+
var _this = this;
17+
this.store = store;
18+
this.youtube = youtube;
19+
this.title = 'One Source of Truth for Angular 2';
20+
this.searchResults = [];
21+
this.disableSearch = false;
22+
this.currentSearch = this.store.select('currentSearch');
23+
this.youtube.searchResults.subscribe(function (results) { return _this.searchResults = results; });
24+
}
25+
AppComponent.prototype.ngOnInit = function () {
26+
var _this = this;
27+
this.currentSearch.subscribe(function (state) {
28+
_this.state = state;
29+
if (state && state.name && state.name.length > 0) {
30+
_this.disableSearch = false;
31+
_this.youtube.search(state);
32+
}
33+
else {
34+
_this.disableSearch = true;
35+
_this.searchResults = [];
36+
}
37+
});
38+
};
39+
AppComponent = __decorate([
40+
core_1.Component({
41+
selector: 'my-app',
42+
providers: [storeManager],
43+
directives: [search_box_component_1.SearchBox, proximity_selector_component_1.ProximitySelector],
44+
template: "\n <section class=\"col-md-8\">\n <h1>{{title}}</h1>\n <div class=\"row col-md-8\">\n <search-box [store]=\"store\"></search-box>\n <proximity-selector [store]=\"store\" [disabled]=\"disableSearch\"\n [ngClass]=\"{ disabled: disableSearch }\"></proximity-selector>\n </div>\n <div class=\"row col-md-8 alert alert-danger\" *ngIf=\"disableSearch\">\n <p>Can't use geolocalization with an empty searchbox</p>\n </div>\n <div class=\"row col-md-8\">\n <p>\n Try to type something in the searchbox, play with the location and with radius: the above state will\n always be consistent and up to date.\n </p>\n <p class=\"state\">{{ state | json }}</p>\n <p class=\"state\" *ngIf=\"disableSearch\">{ }</p>\n </div>\n <h2 *ngIf=\"!disableSearch\">Search results:</h2>\n <h2 *ngIf=\"disableSearch || searchResults.length == 0\">No results</h2>\n <div class=\"row col-md-8\">\n <div *ngFor=\"let result of searchResults\" class=\"thumbnail col-sm-6 col-md-4\">\n <div class=\"caption\">\n <h3>{{ result.title }}</h3>\n </div>\n <!--<img src=\"{{ result.thumbnailUrl }}\" />-->\n </div>\n </div>\n </section>\n "
45+
})
46+
], AppComponent);
47+
return AppComponent;
48+
}());
49+
exports.AppComponent = AppComponent;

0 commit comments

Comments
 (0)