import React , { Component } from 'react' ; import authService from './api-authorization/AuthorizeService' ; interface IProps { } interface IState { forecasts : Array < IForecast > ; loading : boolean ; } interface IForecast { date : any ; temperatureC : any ; temperatureF : any ; summary : any ; } export class FetchData extends Component < IProps , IState > { static displayName = FetchData . name ; constructor ( props ) { super ( props ) ; this . state = { forecasts : [ ] , loading : true } ; } componentDidMount ( ) { this . populateWeatherData ( ) ; } static renderForecastsTable ( forecasts ) { return ( < table className = 'table table-striped' aria - labelledby = "tabelLabel" > < thead > < tr > < th > Date < /th> < th > Temp . ( C ) < /th> < th > Temp . ( F ) < /th> < th > Summary < /th> < /tr> < /thead> < tbody > { forecasts . map ( forecast => < tr key = { forecast . date } > < td > { forecast . date } < /td> < td > { forecast . temperatureC } < /td> < td > { forecast . temperatureF } < /td> < td > { forecast . summary } < /td> < /tr>)} < /tbody> < /table>); } render ( ) { let contents = this . state . loading ? < p > < em > Loading ... < /em></p > : FetchData . renderForecastsTable ( this . state . forecasts ) ; return ( < div > < h1 id = "tabelLabel" > Weather forecast < /h1> < p > This component demonstrates fetching data from the server . < /p> { contents } < /div>); } async populateWeatherData ( ) { const token = await authService . getAccessToken ( ) ; const response = await fetch ( 'weatherforecast' , { headers : ! token ? { } : { 'Authorization' : `Bearer ${ token }` } } ) ; const data = await response . json ( ) ; this . setState ( { forecasts : data , loading : false } ) ; } }