text: (this["webpackJsonpcovid19-app"]=this["webpackJsonpcovid19-app"]||[]).push([[0],{180:function(e,t,a){e.exports=a(368)},185:function(e,t,a){},368:function(e,t,a){"use strict";a.r(t);var c=a(1),r=a.n(c),n=a(58),l=a.n(n),s=a(10),o=a(11),m=a(13),i=a(12),d=a(38),u=a(23),h=(a(185),function(e){Object(m.a)(a,e);var t=Object(i.a)(a);function a(){return Object(s.a)(this,a),t.apply(this,arguments)}return Object(o.a)(a,[{key:"render",value:function(){return r.a.createElement("header",{className:"bg-dark text-white"},r.a.createElement("div",{className:"container py-3"},r.a.createElement("div",{className:"row"},r.a.createElement("div",{className:"col-12 col-md-3 text-center text-md-left logo"},r.a.createElement("h2",{className:"mb-0"},"JM")),r.a.createElement("div",{className:"col-12 col-md-9 title text-center text-md-right"},r.a.createElement("h2",{className:"mb-0"},"COVID-19 Info: React Example Code")))))}}]),a}(r.a.Component)),E=a(15),v=function(e){Object(m.a)(a,e);var t=Object(i.a)(a);function a(){return Object(s.a)(this,a),t.apply(this,arguments)}return Object(o.a)(a,[{key:"getChart",value:function(e){return r.a.createElement(E.d,{width:600,height:550,data:this.props.data,margin:{top:0,right:40,bottom:0,left:40}},r.a.createElement(E.c,{type:"monotone",dataKey:"confirmed",stroke:"#252323",activeDot:{r:8},dot:!1,name:"Confirmed"}),r.a.createElement(E.c,{type:"monotone",dataKey:"recovered",stroke:"#28a745",activeDot:{r:8},dot:!1,name:"Recovered"}),r.a.createElement(E.c,{type:"monotone",dataKey:"deaths",stroke:"#dc3545",activeDot:{r:8},dot:!1,name:"Deaths"}),r.a.createElement(E.a,{stroke:"#ccc",axisLine:"false",strokeDasharray:"4 4"}),r.a.createElement(E.g,{dataKey:"date",tickMargin:10,height:40,interval:8,tickFormatter:function(e){return new Date(e).toLocaleString("en-US",{month:"2-digit",day:"2-digit"})}}),r.a.createElement(E.h,{minTickGap:20}),r.a.createElement(E.f,{content:r.a.createElement(e,null)}),r.a.createElement(E.b,{stroke:"#252323",iconType:"square"}))}},{key:"render",value:function(){return r.a.createElement("div",{className:"timeline-chart",style:{width:"100%",height:550}},r.a.createElement(E.e,null,this.getChart((function(e){var t=e.active,a=e.payload,c=e.label;if(t){var n={color:"".concat(a[0].stroke)},l={color:"".concat(a[1].stroke)},s={color:"".concat(a[2].stroke)};return r.a.createElement("div",{className:"card custom-tooltip p-0 shadow"},r.a.createElement("div",{className:"card-header text-right py-1"},"".concat(new Date(c).toLocaleString("en-US",{month:"2-digit",day:"2-digit",year:"numeric"}))),r.a.createElement("div",{className:"card-body"},r.a.createElement("p",{className:"card-text row-confirmed mb-0",style:n},"".concat(a[0].name," : ").concat(a[0].value.toLocaleString())),r.a.createElement("p",{className:"card-text row-recovered mb-0",style:l},"".concat(a[1].name," : ").concat(a[1].value.toLocaleString())),r.a.createElement("p",{className:"card-text row-deaths",style:s},"".concat(a[2].name," : ").concat(a[2].value.toLocaleString()))))}return null}))))}}]),a}(r.a.Component),N=function(e){Object(m.a)(a,e);var t=Object(i.a)(a);function a(){var e;return Object(s.a)(this,a),(e=t.call(this)).state={setCountries:[],timelineCountries:[],lastUpdate:"",totalConfirmed:0,totalActive:0,totalRecovered:0,totalCritical:0,totalDeaths:0},e}return Object(o.a)(a,[{key:"componentDidMount",value:function(){var e=this;fetch("https://corona-api.com/timeline").then((function(e){return e.json()})).then((function(t){e.setState({timelineCountries:t.data.reverse()})})),fetch("https://corona-api.com/countries").then((function(e){return e.json()})).then((function(t){e.setState({setCountries:t.data.sort((function(e,t){return t.latest_data.confirmed-e.latest_data.confirmed}))}),e.setState((function(){var t=e.state.setCountries.reduce((function(e,t){return e+t.latest_data.confirmed}),0),a=e.state.setCountries.reduce((function(e,t){return e+t.today.confirmed}),0),c=e.state.setCountries.reduce((function(e,t){return e+t.latest_data.recovered}),0),r=e.state.setCountries.reduce((function(e,t){return e+t.latest_data.critical}),0),n=e.state.setCountries.reduce((function(e,t){return e+t.today.deaths+t.latest_data.deaths}),0),l=new Date(e.state.setCountries[0].updated_at),s="".concat(l.toLocaleDateString()," - ").concat(l.toLocaleTimeString());return{totalConfirmed:t.toLocaleString(),totalActive:a.toLocaleString(),totalRecovered:c.toLocaleString(),totalCritical:r.toLocaleString(),totalDeaths:n.toLocaleString(),lastUpdate:s}}))}))}},{key:"render",value:function(){return r.a.createElement("div",{className:"container-fluid dashboard__page"},r.a.createElement("h1",{className:"mt-5 text-center"},"Dashboard"),r.a.createElement("p",{className:"text-center"},"Last Update: ",this.state.lastUpdate),r.a.createElement("div",{className:"container cases__block"},r.a.createElement("div",{className:"row mt-5 pb-3"},r.a.createElement("div",{className:"col"},r.a.createElement("div",{className:"cases__confirmed card bg-light text-center"},r.a.createElement("p",{className:"cases__title"},"Confirmed Cases"),r.a.createElement("h2",null,this.state.totalConfirmed)))),r.a.createElement("div",{className:"row mt-3"},r.a.createElement("div",{className:"col-12 col-md-6 col-lg-3 mb-4 mb-lg-0"},r.a.createElement("div",{className:"cases__active card text-center"},r.a.createElement("p",{className:"cases__title"},"New Cases"),r.a.createElement("h2",null,this.state.totalActive))),r.a.createElement("div",{className:"col-12 col-md-6 col-lg-3 mb-4 mb-lg-0"},r.a.createElement("div",{className:"cases__recovered card text-center"},r.a.createElement("p",{className:"cases__title"},"Recovered"),r.a.createElement("h2",null,this.state.totalRecovered))),r.a.createElement("div",{className:"col-12 col-md-6 col-lg-3 mb-4 mb-md-0"},r.a.createElement("div",{className:"cases__critical card text-center"},r.a.createElement("p",{className:"cases__title"},"Critical"),r.a.createElement("h2",null,this.state.totalCritical))),r.a.createElement("div",{className:"col-12 col-md-6 col-lg-3"},r.a.createElement("div",{className:"cases__deaths card text-center"},r.a.createElement("p",{className:"cases__title"},"Deaths"),r.a.createElement("h2",null,this.state.totalDeaths))))),r.a.createElement("h2",{className:"container mt-5"},"Timeline"),r.a.createElement("div",{className:"timeline-container container"},r.a.createElement(v,{data:this.state.timelineCountries})),r.a.createElement("h2",{className:"container mt-5"},"General Data Grid"),r.a.createElement("div",{className:"data-grid container"},r.a.createElement("div",{className:"table-responsive-sm"},r.a.createElement("table",{className:"table table-sm table-bordered table-striped bg-light"},r.a.createElement("caption",null,"List of countries with COVID-19 cases"),r.a.createElement("thead",null,r.a.createElement("tr",null,r.a.createElement("th",null,"Country"),r.a.createElement("th",null,"Total Cases"),r.a.createElement("th",null,"New Cases"),r.a.createElement("th",null,"Total Deaths"),r.a.createElement("th",null,"New Deaths"),r.a.createElement("th",null,"Total Recovery"))),r.a.createElement("tbody",null,this.state.setCountries.map((function(e){return r.a.createElement("tr",{key:e.code},r.a.createElement("td",{className:"data-grid--country"},r.a.createElement(d.b,{to:"/country/".concat(e.code)},e.name)),r.a.createElement("td",{className:"data-grid--total"},e.latest_data.confirmed.toLocaleString()),r.a.createElement("td",{className:"data-grid--new"},e.today.confirmed.toLocaleString()),r.a.createElement("td",{className:"data-grid--deaths"},e.latest_data.deaths.toLocaleString()),r.a.createElement("td",{className:"data-grid--new-deaths"},e.today.deaths.toLocaleString()),r.a.createElement("td",{className:"data-grid--recovery"},e.latest_data.recovered.toLocaleString()))})))))))}}]),a}(r.a.Component),p=function(e){Object(m.a)(a,e);var t=Object(i.a)(a);function a(e){var c;return Object(s.a)(this,a),(c=t.call(this,e)).state={countryId:e.match.params.id,country:[],timelineCountries:[],lastUpdate:[],totalConfirmed:0,totalActive:0,totalRecovered:0,totalCritical:0,totalDeaths:0},c}return Object(o.a)(a,[{key:"componentDidMount",value:function(){var e=this;fetch("https://corona-api.com/countries/".concat(this.state.countryId)).then((function(e){return e.json()})).then((function(t){e.setState({country:t.data});var a=e.state.country.timeline?e.state.country.timeline.reverse():{};e.setState((function(){var t=e.state.country.latest_data.confirmed,c=e.state.country.today.confirmed,r=e.state.country.latest_data.recovered,n=e.state.country.latest_data.critical,l=e.state.country.latest_data.deaths+e.state.country.today.deaths,s=new Date(e.state.country.updated_at),o="".concat(s.toLocaleDateString()," - ").concat(s.toLocaleTimeString());return{timelineCountries:a,totalConfirmed:t.toLocaleString(),totalActive:c.toLocaleString(),totalRecovered:r.toLocaleString(),totalCritical:n.toLocaleString(),totalDeaths:l.toLocaleString(),lastUpdate:o}}))}))}},{key:"render",value:function(){return r.a.createElement("div",{className:"container-fluid mb-5 country__detail"},r.a.createElement("h1",{className:"mt-5 text-center text-uppercase"},this.state.country.name),r.a.createElement("p",{className:"text-center"},"Last Update: ",this.state.lastUpdate),r.a.createElement("div",{className:"container my-4"},r.a.createElement("form",{action:""},r.a.createElement("div",{className:"row"},r.a.createElement("div",{className:"col-6"},r.a.createElement(d.b,{to:"/"},r.a.createElement("button",{className:"btn btn-outline-info"},"Back to Dashboard"))),r.a.createElement("div",{className:"col-6 text-right"},r.a.createElement("select",{name:"country",id:"country",className:"form-control d-none"},r.a.createElement("option",{value:"usa"},"USA"),r.a.createElement("option",{value:"other"},"Other")))))),r.a.createElement("div",{className:"container cases__block"},r.a.createElement("div",{className:"row mt-5 pb-3"},r.a.createElement("div",{className:"col"},r.a.createElement("div",{className:"cases__confirmed card bg-light text-center"},r.a.createElement("p",{className:"cases__title"},"Confirmed Cases"),r.a.createElement("h2",null,this.state.totalConfirmed)))),r.a.createElement("div",{className:"row mt-3"},r.a.createElement("div",{className:"col-12 col-md-6 col-lg-3 mb-4 mb-lg-0"},r.a.createElement("div",{className:"cases__active card text-center"},r.a.createElement("p",{className:"cases__title"},"New Cases"),r.a.createElement("h2",null,this.state.totalActive))),r.a.createElement("div",{className:"col-12 col-md-6 col-lg-3 mb-4 mb-lg-0"},r.a.createElement("div",{className:"cases__recovered card text-center"},r.a.createElement("p",{className:"cases__title"},"Recovered"),r.a.createElement("h2",null,this.state.totalRecovered))),r.a.createElement("div",{className:"col-12 col-md-6 col-lg-3 mb-4 mb-md-0"},r.a.createElement("div",{className:"cases__critical card text-center"},r.a.createElement("p",{className:"cases__title"},"Critical"),r.a.createElement("h2",null,this.state.totalCritical))),r.a.createElement("div",{className:"col-12 col-md-6 col-lg-3"},r.a.createElement("div",{className:"cases__deaths card text-center"},r.a.createElement("p",{className:"cases__title"},"Deaths"),r.a.createElement("h2",null,this.state.totalDeaths))))),r.a.createElement("h2",{className:"container mt-5"},"Timeline"),r.a.createElement("div",{className:"timeline-container container"},this.state.timelineCountries.length>0?r.a.createElement(v,{data:this.state.timelineCountries}):r.a.createElement("h3",{className:"nodata text-center"},"No data to display.")))}}]),a}(r.a.Component),f=function(e){Object(m.a)(a,e);var t=Object(i.a)(a);function a(){return Object(s.a)(this,a),t.apply(this,arguments)}return Object(o.a)(a,[{key:"render",value:function(){return r.a.createElement("footer",{className:"bg-dark text-white"},r.a.createElement("div",{className:"container-fluid py-2 px-5"},r.a.createElement("div",{className:"row"},r.a.createElement("div",{className:"col-12 text-center"},r.a.createElement("p",null,"Covid-19 API:"," ",r.a.createElement("a",{href:"https://about-corona.net/documentation",target:"_Blank",className:"text-white",rel:"noopener noreferrer"},"https://about-corona.net/documentation")),"Created using:"),r.a.createElement("div",{className:"col-12 col-md-9 mx-auto"},r.a.createElement("div",{className:"row row-cols-2 row-cols-lg-3"},r.a.createElement("div",{className:"col mb-4"},r.a.createElement("div",{className:"card h-100"},r.a.createElement("a",{href:"https://www.w3schools.com/html/html5_intro.asp",className:"text-white",target:"_Blank",rel:"noopener noreferrer"},r.a.createElement("div",{className:"card-body"},r.a.createElement("i",{className:"fab fa-html5 fa-2x","aria-hidden":"true"}),r.a.createElement("p",{className:"card-text"},"HTML5"))))),r.a.createElement("div",{className:"col mb-4"},r.a.createElement("div",{className:"card h-100"},r.a.createElement("a",{href:"https://www.w3schools.com/css/",className:"text-white",target:"_Blank",rel:"noopener noreferrer"},r.a.createElement("div",{className:"card-body"},r.a.createElement("i",{className:"fab fa-css3-alt fa-2x","aria-hidden":"true"}),r.a.createElement("p",{className:"card-text"},"CSS3"))))),r.a.createElement("div",{className:"col mb-4"},r.a.createElement("div",{className:"card h-100"},r.a.createElement("a",{href:"https://getbootstrap.com/docs/4.4/getting-started/introduction/",className:"text-white",target:"_Blank",rel:"noopener noreferrer"},r.a.createElement("div",{className:"card-body"},r.a.createElement("i",{className:"fab fa-bootstrap fa-2x","aria-hidden":"true"}),r.a.createElement("p",{className:"card-text"},"Bootstrap"))))),r.a.createElement("div",{className:"col mb-4"},r.a.createElement("div",{className:"card h-100"},r.a.createElement("a",{href:"https://sass-lang.com/documentation",className:"text-white",target:"_Blank",rel:"noopener noreferrer"},r.a.createElement("div",{className:"card-body"},r.a.createElement("i",{className:"fab fa-sass fa-2x","aria-hidden":"true"}),r.a.createElement("p",{className:"card-text"},"Sass"))))),r.a.createElement("div",{className:"col mb-4"},r.a.createElement("div",{className:"card h-100"},r.a.createElement("a",{href:"https://reactjs.org/docs/getting-started.html",className:"text-white",target:"_Blank",rel:"noopener noreferrer"},r.a.createElement("div",{className:"card-body"},r.a.createElement("i",{className:"fab fa-react fa-2x","aria-hidden":"true"}),r.a.createElement("p",{className:"card-text"},"React JS"))))),r.a.createElement("div",{className:"col mb-4"},r.a.createElement("div",{className:"card h-100"},r.a.createElement("a",{href:"https://recharts.org/en-US/api",className:"text-white",target:"_Blank",rel:"noopener noreferrer"},r.a.createElement("div",{className:"card-body"},r.a.createElement("i",{className:"fas fa-chart-line fa-2x","aria-hidden":"true"}),r.a.createElement("p",{className:"card-text"},"Recharts"))))))),r.a.createElement("div",{className:"col-12 text-center"},r.a.createElement("a",{href:"https://github.com/jimolina/covid19-react-app",className:"text-white",target:"_Blank",rel:"noopener noreferrer"},r.a.createElement("i",{className:"fab fa-github fa-2x","aria-hidden":"true"})),r.a.createElement("p",{className:"card-text"},"Get the code in"," ",r.a.createElement("a",{href:"https://github.com/jimolina/covid19-react-app",className:"text-white",target:"_Blank",rel:"noopener noreferrer"},"GitHub")))),r.a.createElement("hr",null),r.a.createElement("div",{className:"row"},r.a.createElement("div",{className:"col-12 col-md-3 text-center text-md-left logo"},"JM"),r.a.createElement("div",{className:"col-12 col-md-9 title text-center text-md-right"},"COVID-19 Info: React Example Code |"," ",r.a.createElement("a",{href:"http://josemolinaresume.com",target:"_Blank",className:"text-white",rel:"noopener noreferrer"},r.a.createElement("u",null,"josemolinaresume.com"))))))}}]),a}(r.a.Component),b=function(e){Object(m.a)(a,e);var t=Object(i.a)(a);function a(){return Object(s.a)(this,a),t.apply(this,arguments)}return Object(o.a)(a,[{key:"render",value:function(){return r.a.createElement(d.a,null,r.a.createElement("div",{className:"container-fluid p-0"},r.a.createElement(h,null),r.a.createElement(u.c,null,r.a.createElement(u.a,{path:"/",exact:!0,component:N}),r.a.createElement(u.a,{path:"/country",exact:!0,component:p}),r.a.createElement(u.a,{path:"/country/:id",component:p})),r.a.createElement(f,null)))}}]),a}(r.a.Component);l.a.render(r.a.createElement(r.a.StrictMode,null,r.a.createElement(b,null)),document.getElementById("root"))}},[[180,1,2]]]);
  //# sourceMappingURL=main.28641614.chunk.js.map