-
Notifications
You must be signed in to change notification settings - Fork 918
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fd427a3
commit 7eb155d
Showing
21 changed files
with
335 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,61 @@ | ||
<p> | ||
stock-market works! | ||
</p> | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="col-md-12"> | ||
<h1 class="main-heading">Stock Market</h1> | ||
</div> | ||
</div> | ||
<div class="row"> | ||
<div class="col-md-6 col-lg-3"> | ||
<form autocomplete="false"> | ||
<md-input-container> | ||
<input mdInput placeholder="Stock symbol" | ||
[value]="stocks.symbol" | ||
(keyup)="onSymbolChange($event.target.value)"> | ||
</md-input-container> | ||
</form> | ||
<p> | ||
Please provide some valid stock market symbol like: GOOGL, FB, AAPL, NVDA, AMZN, TWTR, SNAP, TSLA... | ||
</p> | ||
<br> | ||
</div> | ||
<div class="col-md-6 col-lg-4 offset-lg-1"> | ||
<md-spinner *ngIf="stocks.loading"></md-spinner> | ||
<md-card *ngIf="stocks.stock"> | ||
<md-card-title>{{stocks.stock.symbol}} <span>{{stocks.stock.last}} {{stocks.stock.ccy}}</span></md-card-title> | ||
<md-card-subtitle> | ||
{{stocks.stock.exchange}} | ||
<span [ngClass]="{ negative: stocks.stock.changeNegative }"> | ||
<i class="fa fa-caret-up" *ngIf="stocks.stock.changePositive"></i> | ||
<i class="fa fa-caret-down" *ngIf="stocks.stock.changeNegative"></i> | ||
{{stocks.stock.change}} ({{stocks.stock.changePercent}}) | ||
</span> | ||
</md-card-subtitle> | ||
</md-card> | ||
<p *ngIf="stocks.error" class="error"> | ||
<i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i><br><br> | ||
<span>Stock <span class="symbol">{{stocks.symbol}}</span> not found</span> | ||
</p> | ||
<br> | ||
<br> | ||
</div> | ||
<div class="col-md-12 col-lg-4"> | ||
<p> | ||
Stock market example shows how to implement <code>HTTP</code> | ||
requests using <code>@ngrx/effects</code> module. | ||
</p> | ||
<p> | ||
Updating symbol query with different symbol will emit action | ||
which updates state with loading flag (reducer) and triggers effect for retrieving | ||
of selected stock. | ||
</p> | ||
<p> | ||
Actions are debounced and every subsequent request will | ||
cancel previous one using <code>.switchMap</code>. | ||
</p> | ||
<p> | ||
Success or error actions are emitted on request completion. | ||
Loading spinner is removed and stock info or error message is displayed. | ||
</p> | ||
</div> | ||
</div> | ||
</div> |
19 changes: 19 additions & 0 deletions
19
src/app/examples/stock-market/stock-market.component.sccs-theme.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
@import '~@angular/material/theming'; | ||
|
||
@mixin todos-component-theme($theme) { | ||
$warn: map-get($theme, warn); | ||
|
||
md-card { | ||
span { | ||
&.negative { | ||
color: mat-color($warn); | ||
} | ||
} | ||
} | ||
.error { | ||
i { | ||
color: mat-color($warn); | ||
} | ||
} | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
.main-heading { | ||
text-transform: uppercase; | ||
margin: 0 0 20px 0 | ||
} | ||
|
||
md-input-container { | ||
width: 100% | ||
} | ||
|
||
md-card { | ||
span { | ||
float: right; | ||
|
||
i { | ||
margin: 0 5px 0 0 | ||
} | ||
} | ||
} | ||
|
||
|
||
md-spinner { | ||
margin: auto; | ||
} | ||
|
||
.error { | ||
text-align: center; | ||
padding: 20px; | ||
|
||
>span { | ||
opacity: 0.4; | ||
} | ||
.symbol { | ||
font-weight: bold; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,49 @@ | ||
import { Component, OnInit } from '@angular/core'; | ||
import { Component, OnInit, OnDestroy } from '@angular/core'; | ||
import { Store } from '@ngrx/store'; | ||
import { Subject } from 'rxjs/Subject'; | ||
import 'rxjs/add/operator/takeUntil'; | ||
import 'rxjs/add/operator/map'; | ||
|
||
import { retrieveStock } from './stock-market.reducer'; | ||
|
||
@Component({ | ||
selector: 'anms-stock-market', | ||
templateUrl: './stock-market.component.html', | ||
styleUrls: ['./stock-market.component.scss'] | ||
}) | ||
export class StockMarketComponent implements OnInit { | ||
export class StockMarketComponent implements OnInit, OnDestroy { | ||
|
||
private unsubscribe$: Subject<void> = new Subject<void>(); | ||
|
||
constructor() { } | ||
initialized; | ||
stocks; | ||
|
||
constructor( | ||
public store: Store<any> | ||
) {} | ||
|
||
ngOnInit() { | ||
this.initialized = false; | ||
this.store | ||
.select('stocks') | ||
.takeUntil(this.unsubscribe$) | ||
.subscribe((stocks: any) => { | ||
this.stocks = stocks; | ||
|
||
if (!this.initialized) { | ||
this.initialized = true; | ||
this.store.dispatch(retrieveStock(stocks.symbol)); | ||
} | ||
}); | ||
} | ||
|
||
ngOnDestroy(): void { | ||
this.unsubscribe$.next(); | ||
this.unsubscribe$.complete(); | ||
} | ||
|
||
onSymbolChange(symbol: string) { | ||
this.store.dispatch(retrieveStock(symbol)); | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import { Injectable } from '@angular/core'; | ||
import { Actions, Effect } from '@ngrx/effects'; | ||
import { Action } from '@ngrx/store'; | ||
import { Observable } from 'rxjs/Observable'; | ||
import 'rxjs/add/operator/map'; | ||
import 'rxjs/add/operator/debounceTime'; | ||
import 'rxjs/add/operator/distinctUntilChanged'; | ||
import 'rxjs/add/observable/of'; | ||
|
||
import { LocalStorageService } from '../../core'; | ||
|
||
import { | ||
STOCK_MARKET_KEY, | ||
STOCK_MARKET_RETRIEVE, | ||
STOCK_MARKET_RETRIEVE_SUCCESS, | ||
STOCK_MARKET_RETRIEVE_ERROR | ||
} from './stock-market.reducer'; | ||
import { StockMarketService } from './stock-market.service'; | ||
|
||
@Injectable() | ||
export class StockMarketEffects { | ||
|
||
constructor( | ||
private actions$: Actions, | ||
private localStorageService: LocalStorageService, | ||
private service: StockMarketService | ||
) {} | ||
|
||
@Effect() retrieveStock(): Observable<Action> { | ||
return this.actions$ | ||
.ofType(STOCK_MARKET_RETRIEVE) | ||
.do(action => this.localStorageService | ||
.setItem(STOCK_MARKET_KEY, { symbol: action.payload })) | ||
.distinctUntilChanged() | ||
.debounceTime(500) | ||
.switchMap(action => | ||
this.service.retrieveStock(action.payload) | ||
.map(stock => | ||
({ type: STOCK_MARKET_RETRIEVE_SUCCESS, payload: stock })) | ||
.catch(err => | ||
Observable.of({ type: STOCK_MARKET_RETRIEVE_ERROR, payload: err })) | ||
); | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { Action } from '@ngrx/store'; | ||
|
||
export const initialState = { | ||
symbol: 'GOOGL' | ||
}; | ||
|
||
export const STOCK_MARKET_KEY = 'STOCKS'; | ||
export const STOCK_MARKET_RETRIEVE = 'STOCK_MARKET_RETRIEVE'; | ||
export const STOCK_MARKET_RETRIEVE_SUCCESS = 'STOCK_MARKET_RETRIEVE_SUCCESS'; | ||
export const STOCK_MARKET_RETRIEVE_ERROR = 'STOCK_MARKET_RETRIEVE_ERROR'; | ||
|
||
export const retrieveStock = (symbol: string) => | ||
({ type: STOCK_MARKET_RETRIEVE, payload: symbol }); | ||
|
||
export function stockMarketReducer(state = initialState, action: Action) { | ||
switch (action.type) { | ||
case STOCK_MARKET_RETRIEVE: | ||
return Object.assign({}, state, { | ||
loading: true, | ||
stock: null, | ||
error: null, | ||
symbol: action.payload, | ||
}); | ||
|
||
case STOCK_MARKET_RETRIEVE_SUCCESS: | ||
return Object.assign({}, state, { | ||
loading: false, | ||
stock: action.payload, | ||
error: null | ||
}); | ||
|
||
case STOCK_MARKET_RETRIEVE_ERROR: | ||
return Object.assign({}, state, { | ||
loading: false, | ||
stock: null, | ||
error: action.payload | ||
}); | ||
|
||
default: | ||
return state; | ||
} | ||
} | ||
|
||
export interface Stock { | ||
symbol: string; | ||
exchange: string; | ||
last: string; | ||
ccy: string; | ||
change: string; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.