client

VirtualMind.Application/Queries/GetCurrencyExchangeQuery.cs

@@ -1,17 +1,16 @@
-using MediatR;
-using System.Collections.Generic;
-using System.Threading;
+using System.Threading;
 using System.Threading.Tasks;
 using VirtualMind.Application.DTOs;
+using MediatR;
 
 namespace VirtualMind.Application.Queries
 {
-    public class GetCurrencyExchangeQuery : IRequest<List<ExchangeRateDTO>>
+    public class GetCurrencyExchangeQuery : IRequest<ExchangeRateDTO>
     {        
         public string CurrencyType { get; set; }        
     }    
 
-    public class GetCurrencyExchangeHandler : IRequestHandler<GetCurrencyExchangeQuery, List<ExchangeRateDTO>>
+    public class GetCurrencyExchangeHandler : IRequestHandler<GetCurrencyExchangeQuery, ExchangeRateDTO>
     {
         private readonly ICurrencyExchangeFactory CurrencyExchangeFactory;
 
@@ -20,19 +19,16 @@ public GetCurrencyExchangeHandler(ICurrencyExchangeFactory currencyExchangeFacto
             CurrencyExchangeFactory = currencyExchangeFactory;
         }
 
-        public async Task<List<ExchangeRateDTO>> Handle(GetCurrencyExchangeQuery request, CancellationToken cancellationToken)
+        public async Task<ExchangeRateDTO> Handle(GetCurrencyExchangeQuery request, CancellationToken cancellationToken)
         {
             var result = await CurrencyExchangeFactory.GetExchangeRate(request.CurrencyType);
 
-            var exchangeList = new List<ExchangeRateDTO>
+            var exchangeList = new ExchangeRateDTO
             {
-                new ExchangeRateDTO
-                {
-                    Purchase = result[0],
-                    Sale = result[1],
-                    LastUpdate = result[2]
-                }
-            };            
+                Purchase = result[0],
+                Sale = result[1],
+                LastUpdate = result[2]
+            };
 
             return exchangeList;
         }

VirtualMind.WebApp/ClientApp/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "8.2.12",
     "@angular/platform-server": "8.2.12",
     "@angular/router": "8.2.12",
+    "@ngrx/store": "^10.1.2",
     "@nguniversal/module-map-ngfactory-loader": "8.1.1",
     "aspnet-prerendering": "^3.0.1",
     "bootstrap": "^4.3.1",

VirtualMind.WebApp/ClientApp/src/app/app.module.ts

@@ -6,27 +6,28 @@ import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './nav-menu/nav-menu.component';
-import { HomeComponent } from './home/home.component';
-import { CounterComponent } from './counter/counter.component';
 import { FetchDataComponent } from './fetch-data/fetch-data.component';
 
+import { StoreModule } from '@ngrx/store';
+import { QuoteReducer } from './store/quote/quoteReducer';
+
 @NgModule({
   declarations: [
     AppComponent,
-    NavMenuComponent,
-    HomeComponent,
-    CounterComponent,
+    NavMenuComponent,    
     FetchDataComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     HttpClientModule,
     FormsModule,
     RouterModule.forRoot([
-      { path: '', component: HomeComponent, pathMatch: 'full' },
-      { path: 'counter', component: CounterComponent },
-      { path: 'fetch-data', component: FetchDataComponent },
-    ])
+      { path: '', component: FetchDataComponent },      
+      { path: 'quote', component: FetchDataComponent },      
+    ]),
+    StoreModule.forRoot({
+      quotes: QuoteReducer
+    })
   ],
   providers: [],
   bootstrap: [AppComponent]

VirtualMind.WebApp/ClientApp/src/app/fetch-data/fetch-data.component.html

@@ -1,24 +1,29 @@
-<h1 id="tableLabel">Weather forecast</h1>
+<h1 id="tableLabel">Quotes</h1>
 
-<p>This component demonstrates fetching data from the server.</p>
+<p> Look the quotation of the day</p>
 
-<p *ngIf="!forecasts"><em>Loading...</em></p>
+<div *ngIf="dolar">
+    <h4>DOLAR (USD)</h4>
+    <div>
+        <ul>
+            <li>Purchase Value: {{ dolar.purchase }}</li>
+            <li>Sale Value: {{ dolar.sale }}</li>
+            <li>Last Update: {{ dolar.lastUpdate }}</li>
+        </ul>      
+    </div>
+</div>
+
+
+<div *ngIf="real">
+    <h4>REAL (BRL)</h4>
+    <div>
+        <ul>
+            <li>Purchase Value: {{ real.purchase }}</li>
+            <li>Sale Value: {{ real.sale }}</li>
+            <li>Last Update: {{ real.lastUpdate }}</li>
+        </ul>     
+    </div>
+</div>
+
+<button (click)="getAllQuote()">Update Quotation</button>
 
-<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="forecasts">
-  <thead>
-    <tr>
-      <th>Date</th>
-      <th>Temp. (C)</th>
-      <th>Temp. (F)</th>
-      <th>Summary</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let forecast of forecasts">
-      <td>{{ forecast.date }}</td>
-      <td>{{ forecast.temperatureC }}</td>
-      <td>{{ forecast.temperatureF }}</td>
-      <td>{{ forecast.summary }}</td>
-    </tr>
-  </tbody>
-</table>

VirtualMind.WebApp/ClientApp/src/app/fetch-data/fetch-data.component.ts

@@ -1,23 +1,54 @@
 import { Component, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Store, select } from '@ngrx/store';
+import { quote } from '../models/quote.model';
+import QuoteState from '../store/quote/quoteState';
+import { getDolar, getReal } from '../store/quote/quoteAction';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-fetch-data',
   templateUrl: './fetch-data.component.html'
 })
 export class FetchDataComponent {
-  public forecasts: WeatherForecast[];
 
-  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
-    http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {
-      this.forecasts = result;
+  quote$: Observable<QuoteState>;
+  dolar: quote;
+  real: quote;
+
+  constructor(private http: HttpClient,
+    @Inject('BASE_URL') private baseUrl: string,
+    private store: Store<{ quotes: QuoteState }>) {
+    this.quote$ = this.store.pipe(select((state: any) => state.quotes));    
+    this.getAllQuote();
+  }
+
+  ngOnInit() {
+    this.quote$.pipe(
+      map(x => {
+        this.dolar = x.dolar;
+        this.real = x.real;
+      })
+    )
+      .subscribe();
+  }
+
+  getAllQuote() {
+    console.log('fetching cote');
+    this.getDollarQuote();
+    this.getRealQuote();
+  }
+
+  getDollarQuote() {
+    this.http.get<quote>(this.baseUrl + 'exchange?currencyType=USD').subscribe(result => {      
+      this.store.dispatch(getDolar({payload: result}));
     }, error => console.error(error));
   }
-}
 
-interface WeatherForecast {
-  date: string;
-  temperatureC: number;
-  temperatureF: number;
-  summary: string;
+  getRealQuote() {
+    this.http.get<quote>(this.baseUrl + 'exchange?currencyType=BRL').subscribe(result => {
+      this.store.dispatch(getReal({payload: result}));
+    }, error => console.error(error));
+  }
 }

VirtualMind.WebApp/ClientApp/src/app/models/quote.model.ts

@@ -0,0 +1,5 @@
+export interface quote {
+    purchase: string;
+    sale: string;
+    lastUpdate: string;
+}

VirtualMind.WebApp/ClientApp/src/app/nav-menu/nav-menu.component.html

@@ -26,17 +26,7 @@
             [routerLinkActiveOptions]="{ exact: true }"
           >
             <a class="nav-link text-dark" [routerLink]="['/']">Home</a>
-          </li>
-          <li class="nav-item" [routerLinkActive]="['link-active']">
-            <a class="nav-link text-dark" [routerLink]="['/counter']"
-              >Counter</a
-            >
-          </li>
-          <li class="nav-item" [routerLinkActive]="['link-active']">
-            <a class="nav-link text-dark" [routerLink]="['/fetch-data']"
-              >Fetch data</a
-            >
-          </li>
+          </li>         
         </ul>
       </div>
     </div>

VirtualMind.WebApp/ClientApp/src/app/store/quote/quoteAction.ts

@@ -0,0 +1,17 @@
+import { Action, createAction, props, createReducer, on } from '@ngrx/store';  
+import { quote } from '../../models/quote.model';
+
+enum ActionTypes {
+  GetDolar = 'GetDolar',
+  GetReal = 'GetReal'
+}
+
+export const getDolar = createAction(
+  ActionTypes.GetDolar,
+  props<{payload: quote}>()
+)
+
+export const getReal = createAction(
+  ActionTypes.GetReal,
+  props<{payload: quote}>()
+)

VirtualMind.WebApp/ClientApp/src/app/store/quote/quoteReducer.ts

@@ -0,0 +1,22 @@
+import { Action, createReducer, on } from '@ngrx/store';
+import * as QuoteActions from './quoteAction';
+import { quote } from '../../models/quote.model';
+import QuoteState, { initializeState } from './quoteState';
+
+export const intialState = initializeState();
+
+export const reducer = createReducer(
+    intialState,
+    on(QuoteActions.getDolar, (state, action) => ({
+        ...state,
+        dolar: action.payload
+    })),
+    on(QuoteActions.getReal, (state, action) => ({
+        ...state,
+        real: action.payload
+    }))
+)
+
+export function QuoteReducer(state: QuoteState, action: Action) {
+    return reducer(state, action);
+}