Covid-19 Tracker in Salesforce – Lightning Component

public class Covid19Controller {
@AuraEnabled
public static Covid19Parser getCovidData(){
string baseURL = 'https://api.covid19api.com/summary';
HTTPRequest request = new HTTPRequest();
request.setEndpoint(baseURL);
request.setMethod('GET');
request.setHeader('Accept', 'application/json');
HTTP H = new HTTP();
HttpResponse response = h.send(request);

Covid19Parser prsr = Covid19Parser.parse(response.getBody().replace('"Global":','"AllStats":'));
return prsr;
}

}

public class Covid19Parser {
@AuraEnabled
public AllStats allstats;

@AuraEnabled
public List<Countries> countries;

public class AllStats{

@AuraEnabled
public String NewConfirmed;
@AuraEnabled
public String TotalConfirmed;
@AuraEnabled
public String TotalDeaths;
@AuraEnabled
public String TotalRecovered;

}
public class Countries{
@AuraEnabled
public String Country;
@AuraEnabled
public String NewConfirmed;
@AuraEnabled
public String TotalConfirmed;
@AuraEnabled
public String NewDeaths;
@AuraEnabled
public String TotalDeaths;
@AuraEnabled
public String NewRecovered;
@AuraEnabled
public String TotalRecovered;
}
public static Covid19Parser parse(String json){
return(Covid19Parser) System.JSON.deserialize(json, Covid19Parser.class);

}

}

<!--
Date: 21/05/2020
Source: Shubham Bhardwaj
Project Name: COVID-19 World Tracker
-->

<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes"
access="global"
controller="Covid19Controller">

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>

<!-- Header Attributes -->
<aura:attribute name="confirmed" type="String"/>
<aura:attribute name="newConfirmed" type="String"/>
<aura:attribute name="recovered" type="String"/>
<aura:attribute name="deaths" type="String"/>

<aura:attribute name="spinner" type="boolean" default="FALSE"/>

<!-- Table Attributes -->

<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>

<!-- Pagination Attributes -->
<aura:attribute name="PaginationList" type="Object"/>
<aura:attribute name="startPage" type="Integer" />
<aura:attribute name="endPage" type="Integer"/>
<aura:attribute name="totalRecords" type="Integer"/>
<aura:attribute name="pageSize" type="Integer" default="10"/>

<div class="slds-page-header">
<div class="slds-grid">

<div class="slds-col slds-size_11-of-12">
<span style="font-size:24px;">COVID-19 World Tracker</span>
</div>
<div class="slds-col slds-size_1-of-12">

<lightning:buttonIcon iconName="utility:refresh" variant="brand" onclick="{!c.doInit}" alternativeText="Settings" title="Settings" />
</div>
</div>
</div>
<!--loading spinner start-->
<aura:if isTrue="{!v.spinner}">
<div aura:id="spinnerId" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">
<span class="slds-assistive-text">Loading...</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<!-- Loading spinner end-->
<lightning:card>
<lightning:tabset>
<lightning:tab label="Live Data">
<div class="slds-grid" >
<div class="slds-col slds-size_3-of-12" Style="background-color:Orange; padding:10px;">
<span style="color:white; font-size:18px;">TOTAL CONFIRMED: <b stye="font-size:17px;">{!v.confirmed}</b> </span>
</div>
<div class="slds-col slds-size_3-of-12 " Style="background-color:blue; padding:10px;">
<span style="color:white; font-size:18px;">NEW CONFIRMED: <b stye="font-size:17px;">{!v.newConfirmed}</b></span>
</div>
<div class="slds-col slds-size_3-of-12" Style="background-color:Green; padding:10px;">
<span style="color:white; font-size:18px;">TOTAL RECOVERED: <b stye="font-size:17px;">{!v.recovered}</b></span>
</div>
<div class="slds-col slds-size_3-of-12" Style="background-color:Gray; padding:10px;">
<span style="color:white; font-size:18px;">TOTAL DEATHS: <b stye="font-size:17px;">{!v.deaths}</b></span>
</div>
</div>
<!-- Data Table -->
<div style="height: 100%; font-size: 18px; padding: 1%;">
<lightning:datatable
keyField="id"
data="{! v.PaginationList }"
columns="{! v.columns }"
hideCheckboxColumn="true"/>
</div>
<div class="slds-align_absolute-center">
<lightning:buttonGroup>
<lightning:buttonIcon iconName="utility:back"
variant="brand"
disabled="{!v.startPage == 0}"
alternativeText="Back"
title="Back"
onclick="{!c.previous}"/>
&nbsp; &nbsp; &nbsp;
<lightning:buttonIcon iconName='utility:forward'
variant="brand"
disabled="{!v.endPage >= v.totalRecords}"
alternativeText="Forward"
title="Forward"
onclick="{!c.next}"/>
</lightning:buttonGroup>
</div>
</lightning:tab>
</lightning:tabset>
</lightning:card>
</aura:component>

({
doInit : function(component, event, helper) {
component.set('v.columns', [
{label: 'Country', fieldName: 'Country', type: 'text'},
{label: 'New Confirmed', fieldName: 'NewConfirmed', type: 'text'},
{label: 'Total Confirmed', fieldName: 'TotalConfirmed', type: 'text'},
{label: 'New Recovered', fieldName: 'NewRecovered', type: 'text'},
{label: 'Total Recovered', fieldName: 'TotalRecovered', type: 'text'},
{label: 'New Deaths', fieldName: 'NewDeaths', type: 'text'},
{label: 'Total Deaths', fieldName: 'TotalDeaths', type: 'text'},
]);
helper.getApiData(component);

},
// function automatic called by aura:waiting event
showSpinner: function(component, event, helper) {
// make Spinner attribute true for displaying loading spinner
component.set("v.spinner", true);
},

// function automatic called by aura:doneWaiting event
hideSpinner : function(component,event,helper){
// make Spinner attribute to false for hiding loading spinner
component.set("v.spinner", false);
},
next: function (component, event, helper) {
helper.next(component);
},
previous: function (component, event, helper) {
helper.previous(component);
},
})

({
getApiData : function(component) {
var action = component.get('c.getCovidData');

action.setCallback(this,function(response){
var state = response.getState();

if(state === 'SUCCESS' || state === 'DRAFT'){
// alert('SUCCESS');
var result = response.getReturnValue();
var resList = response.getReturnValue().countries;
console.log(JSON.stringify(result));

component.set('v.newConfirmed',result.allstats.NewConfirmed);
component.set('v.confirmed',result.allstats.TotalConfirmed);
component.set('v.recovered',result.allstats.TotalRecovered);
component.set('v.deaths',result.allstats.TotalDeaths);

//List of Data

component.set('v.data',resList);
component.set("v.totalRecords", resList.length);

//setting start/end page value
var pageSize = component.get('v.pageSize');
component.set('v.startPage',0);
component.set('v.endPage',pageSize-1);

var PaginationList = [];
for(var i=0; i< pageSize; i++){
if(component.get("v.data").length> i)
PaginationList.push(resList[i]);
}
component.set('v.PaginationList', PaginationList);

}else if(state === 'ERROR'){
alert('ERROR');
}else if(state === 'INCOMPLETE'){
alert('INCOMPLETE');
}
},'ALL');

$A.enqueueAction(action);

},next : function(component, event){
var resCountries = component.get("v.data");
var end = component.get("v.endPage");
var start = component.get("v.startPage");
var pageSize = component.get("v.pageSize");
var Paginationlist = [];
var counter = 0;
for(var i=end+1; i<end+pageSize+1; i++){
if(resCountries.length > i){
Paginationlist.push(resCountries[i]);
}
counter ++ ;
}
start = start + counter;
end = end + counter;
component.set("v.startPage",start);
component.set("v.endPage",end);
component.set('v.PaginationList', Paginationlist);
},
previous : function(component, event){
var resCountries = component.get("v.data");
var end = component.get("v.endPage");
var start = component.get("v.startPage");
var pageSize = component.get("v.pageSize");
var Paginationlist = [];
var counter = 0;
for(var i= start-pageSize; i < start ; i++){
if(i > -1){
Paginationlist.push(resCountries[i]);
counter ++;
}else{
start++;
}
}
start = start - counter;
end = end - counter;
component.set("v.startPage",start);
component.set("v.endPage",end);
component.set('v.PaginationList', Paginationlist);
},

})

.THIS lightning-primitive-header-actions {
display: none;
}