Building Covid-19 Tracker using React …
Hi Guys , in this article we are going build Covid 19 Tracker using React. We are going to use diseases.sh as the backend or api end -point , We will be fetching data from diseases.sh and rendering it in our application.
In our application , there will be few thing to display, Total number of cases, recoveries and deaths for each country in world , We will also be having the count for current cases, recoveries and deaths for every country in world.There will be a dropdown from where we can select the country name. We will be having a map showing the data of cases,recoveries and deaths with proper geographical location of each country.We will be having a tabular and graphical representation of data for each country. So let’s see the folder structure first….
So this is the folder structure of our application, it’s the boilerplate of create-react-app it gets created when we run npx create-react-app <Project Name>. We have added few Files like InfoBox.js :used to number of cases , map.js :it’s the map component of our application, Table.js :it shows the table component of our application ,LineGraph.js :it’s the graph component and Util.js: contains few util functions .We have also added the respective css file for styling the components.So let’s start with App.js:
One thing to say before starting, we are using Material Ui , to install material Ui , we can run the following command in terminal:
npm i @material-ui/core
So App.js is our base component it will render our application, it will be containing all our component .Here we are importing React, UseState and UseEffect from react, MenuItem, FormControl,Select,Card and CardContent from @material-ui/core, imported App.css for styling,And imported all our components like Map, InfoBox ,Table and LineGraph. In util.js we have two function , about which we will be discussing later. We are using leaflet to implement the map implementation in our application, to install leaflet we have to run the following command in our terminal:
npm install react-leaflet
Then we are declaring a state countries , which will be array of object having country name and country code for all the countries. Actually this variable we will be using for creating the dropdown options for selecting the country name. country is the state which will contain the selected country name. countryInfo will be object which will store the country case details, fetched from api, tabledata will contain the sorted data of total Covid cases for each country which will be getting rendered on table. mapCenter will be the object having latitude and longitude value of selected country. mapZoom is used to Zoom in and Zoom out the map,mapCountries is an array having the list of countries will be present in our map. casesType will be used for styling our component based on case Types : ‘cases’, ‘ recovered’ and ‘deaths’. Now we are using UseEffect , means whenever the page loads it will trigger a fetch function on the api: https://disease.sh/v3/covid-19/all then once we get the data we are converting it on json format, so that we can use that in our code to render, then we are setting that countryInfo with the json response, means we will get the data of Worldwide corona report in first render.Then we are triggering another UseEffect where we are fetching data for all countries separately.Once we get that we are converting it in json and creating a countries variable which will be storing the country name and country value ,Now we are passing our values to the our sortData util function to sort data in descending order ,by this we are actually preparing data for our table, so after that we are setting that sorted Data to TableData and countries variable . The response which we are getting are passed to MapCountries variable which will be used in our Map.Now let’s see the render section part we are separating our dom structure into 2 half, app_left and app_right .app_left will be having header , select dropdown , Info display of cases , recovery and deaths and map .app_right will be having Table and LineGraph. So in app_left we have created heading , for creating the selection dropdown we are using FormControl,Select and MenuItem from @material-ui/core. So to create the MenuItem first we are creating the Worldwide option because it’s not coming from the https://disease.sh/v3/covid-19/countries api , and iterating through our countries variable to get the country.name as the options of our dropdown. Now on clicking the options we are calling onCountryChange function , this function is actually setting the value to country and triggering the api call with the selected country name.We are getting the countryCode from event.target.value, first we are setting the value of country with countryCode , then we are checking if countryCode === ‘worldwide’, then we are triggering the all api fetch (‘https://disease.sh/v3/covid-19/all’) else we are triggering https://disease.sh/v3/covid-19/countries/${countryCode} fetch operation country wise, by sending the countryCode from event.target.value.Once we get the response we are converting it with json and setting the CountryInfo with the response json and we are setting MapCenter to an array having the longitude and latitude of the selected country , we are setting the MapZoom value to 4 so that the map gets magnified once we select the countryname. Now we have all the data available , now we just have to pass data to it’s child component. Inside app_stats div we have 3 InfoBox Component those contain the actual count of covid cases , recovery and death respectively. We are passing some props to the InfoBox component , isRed determines whether the top border of the component will be red or not , for cases and death InfoBox ‘s it will be red . So for 1st InfoBox we are sending isRed =true . Now we have to add that top border once user clicks on the InfoBox , so in Onclick we are setting the value to CasesType to the respective record type of the InfoBox , For example the 1st InfoBox is for cases when we click on it the casesType becomes ‘cases’ , now the active props check whether the casesType=== ‘cases’ means when the user click on the InfoBox component the active becomes true thus the style will get applied accordingly . We are also sending title,total and cases props to our InfoBox component. prettyPrintStat is an util function to view the count value in a proper format.We will explore those util functions later. Now let’s pass value to our Map component.In Map component we are passing props like casesType for styling according to the casesType , countries to get the list of countries to be displayed in map , zoom and center .Now in app_right div there are heading for table , table component, heading for GraphLine and GraphLine component. We have wrapped the left section with CardContent to get a card shaped container , now let’s pass data ,in Table component we are passing the countries props having all the sorted table data .In the heading of the GraphLine we are passing the text dynamically means the Heading will change according to the casesType state .Lastly the In our LineGraph component we are passing classname for styling and casesType as props.Now let see the style of our App.js:
It’s self explanatory once we see the final Ui of our Application we can co-related those things more properly.Now let’s see the utils file:
In util.js , we are importing Circle,Popup from react-leaflet, React from react, numeral from numeral. To install numeral , we are run following the command in our terminal :
npm i numeral
Now first we are creating a constant file which is having particular hex and multiplier value for Map component according to the casesType, we will be using it later. sortData is used to sort the data response passed to the function .So we are returning 1 and -1 by comparing the case value to the data. ShowDataOnMap is a function is called on Map function , it’s having two parameters , data and casesType . When we click on the particular country in map we got a Popup having country flag , country name and total count of cases, recoveries and deaths. We are highlighting the country with circle for that we are sending the selected country latitude and longitude value , fillOpacity to 0.4, color according to the hex color of casesType and radius as per the value the casesType and country.Lastly we have another util function prettyPrintStat which checks if there is any value to show in InfoBox it will show in prettier format else it will show ‘+0'.Now let’s see the InfoBox component:
In InfoBox , we have a card having props title, cases,total, isRed,active , on Clicking we are triggering the onClick function defined in App.js, we are setting the value of cases .There will be 3 cards for three cases, So when we click on the particular InfoBox the cases got set accordingly.Our style of the InfoBox dependents on the value of active and isRed .Other than that Header cases text color will also get applied according to value of isRed .Now let’s see the Css file.
We want our InfoBox to have a top border color of red for the cases and deaths category, for recovery we want it to be green color. So here we are checking whether the InfoBox is clicked or not by the value of active , so when active is true , infoBox- selected will get applied to the div, where we are setting the border-top value but it’s having the green color border , so to get red color border for cases and deaths card we are adding another class infoBox-red in it, so infoBox-red will make the border class red. Since this isRed value will be true for deaths and cases , the border color will automatically come red.Similar thing we are doing for cases text , it’s styles are getting appended according to the value of isRed. Now let’s see the Map component:
So about Map we have already discussed in Util function.So here we are importing LeafletMap , TileLayer from ‘react-leaflet’ and showDataOnMap function from utils.Now in LeafletMap we are sending two parameters center and zoom, center is having the latitude , longitude value and zoom is having the zoom value, We have added the TileLayer , it’s for copy right issue. And lastly calling our util function showDataOnMap to render the details in our Map in a tooltips with styles .Now let’s see the css file:
The styles part is self explanatory, we can play with it by doing some changes in the styles to get better understanding on css part.Now let’s see the Table component:
So in Table component we are mapping through all the countries and rendering the country name and total covid cases count. let’s see the css file:
So now we are left with one component that is LineGraph:
In LineGraph we are using react-chartjs-2 to create the Graph. We need to pass some value in Line which is imported from ‘react-chartjs-2', to import react-chartjs-2 we have to run this following command in terminal:
npm i react-chartjs-2 chart.js
So we are defining options , it actually define the details which are needed to create the line graph , like showing tooltips , scales details for x and y axis etc.So in option we are setting the display option , tooltips data,scale data. X axis will have Date information and Y axis will have the cases number ticks .In BuildChartData function we are sending datas to the x and y axis , BuildChartData is having two parameters data and casesType. So we are creating the chart data for LineGraph, So what we are doing we are iterating through the data.cases , we are creating an array of object having the axis name and data. So we creating a object newDataPoint sending the date in x , we are subtracting the previous date data with the current date data and sending it to y axis ,so that our y axis can reflect the difference between the total cases date by date Then we are pushing our newDataPoint object to the empty array chartData, we setting the data point as lastDataPoint for the next iteration. Finally we are return that chartData. In LineGraph we want our graph data to change whenever the caseType changes, for that we are using UseEffect hooks , inside that we are fetching data from the disease.sh api to get the data for last 120 days , when we get the data we are converting it to json and passing it to our BuildChartData function, so that we get a proper format of data that can be used for creating the Graphical representation.Now let’s see the render section , there we are checking if data.length >0 , means we have data to represent in Graph , we are rendering the Line component. We are passing few parameters in Line like data, data is an object having two parameter dataset and options. In dataset we are sending an array having a object with backgroundColor, borderColor and data which we prepared in the BuildChartData function. In options we are passing the options variable which we defined at the top.So now our application is ready let see how it’s looking:
So we can see how easily we can create our own Covid-19 Tracker using React. I want you to play with it explore new thing and add new functionality. I am attaching my github link as the reference of this article :
HAPPY CODING….:)
