Complete Tutorial - Using Covid-19 data to create a react application

today we're going to be building application using Co vid 19 data the data that we're going to be using will come from John Hopkins University the data can be found on the John Hopkins github page which I'll be linking below here's our application that we'll be building at the very top we're going to have the total number of confirmed cases of kovat 19 below we're going to have a table that represents all the countries and the total number of confirmed cases for each country in this table over here we'll be able to sort that information by clicking on the country or sort by total over here and see which countries have the most in addition to that we'll be able to click on a row of a country and have them appear in our list over here and then create a chart with that chart we'll be able to click on the countries add them to the chart and they get highlighted yellow below here and then up above we can see a pie chart representing the total number of confirmed cases against other countries so that we can do a comparison see how those countries stack up against each other over here kind of a cool feature as we go forward with this application of course you can always do improvements we could add a feature over here to unselect all the countries instead of need to manually go through and select them but you can always make improvements on applications so next we'll be diving into the code and how you can get that data we are going to be starting with a blank canvas so with your terminal open or your command prompt go ahead and type npx create react app and I'm going to be calling this application kovat 19 we'll go ahead and allow that to create our application all right now that we have our application created we can simply go ahead and switch into that directory and get our ode running or simply we can open up visual studio code if you want to you can type code and then the name of the directory that we'll be opening up and hit enter and that will open up your code editor which I have opened over here already a code editor that I have right here open it is visual studio code and what we'll be doing over here is just making sure their application is in a good state and working over here I'm just going to do NPM start your application running in this window over here just to make sure that we're in a good state and there we are we're running in a good state and the application is ready to go so to kick this application off we before we get into getting the data let's kind of just set up our default application with what we need for it so for this application we're going to be using bootstrap and Axios but I'll do over here in our terminal is I'm just going to go ahead and add bootstrap and add Axios which we'll be using later on let's do an NPM install so we can just do NPM I bootstrap and Axios that we want to install inside of our application then once we get those installed we can go over here and what we're going to do is find our apt ojs over here will delete everything well before we delete anything let's do this let's go to index J s let's go ahead and import bootstrap / distribution / CSS flash bootstrap min dot CSS once we have this imported and in the right directory will see that it refreshes over here and now it says SRC app in app dog s is all the sudden pink before that it was just white so we know that bootstrap is working at least that's how I know that bootstrap is working typically is that I see the styling change on this first page we're gonna just dive into our app J s for now and let's just go ahead and remove all that HTML that we have in the render method at the moment we'll get an error on the right-hand over here on our browser and what we're gonna go ahead and do is let's just go out a brand new folder and that brand new folder will be called components a little bit of a type over there components and inside of components let's go add a new file and let's go add a loading loading JSX but when our application starts out just like we have in this sample over here we'll get a loading spinner when the app starts I don't have that application running at the moment but to show you that let's do this over here we're going to add our default components actually let's go ahead and do that as an IMR like that and we'll do this as a stateless functional component no point making it a full-blown component and then what we're going to do over here is we'll just type with loading and then over here in order to get this to work we're going to get the bootstrap and we will go there to get bootstrap comm go to the documentation and then we can just find loading or spinners when we find that spinner over here we get some awesome HTML that's already been produced for us so we can take that HTML over here into the loading spinner paste that in and all we have to do is rename the classes over here so I highlighted class and then I hit control D or command D on a Mac and then write and I have two cursors on the screen so I can just type name and there we are or our application right now still won't be running because we haven't we left it in an error state but come back to the app over here and if we say loading loading like that I'm expecting my autocomplete to kick in but it's not so what we'll do is we'll add loading over here and then I'll just go ahead and import loading dot slash components slash loading and there we are we have a loader on our screen what we'd like to do is cut an application that will follow this structure based on the application that I showed you earlier we're gonna have an app and then we'll have a component called Co vid the component Ovid component will contain a loading spinner that will appear when the application first starts and then when we get data we're going to have a country table and we're going to have a chart that we can also display when you select certain countries once we get this working so over here what we'll do is we'll go ahead and create a new file will create a Co vid JSX page and this page will set up as a full-fledged component and what we'll do over here is we'll use CC Ovid there we are we got our Kovac component and then inside here we're going to put a div and then inside of here this time there we go we got our loading I mean back tour application looks no different than before because we actually have not loaded that component yet but you will see that it will look no different than it did because we're loading the same data just we have another layer of abstraction which is our Kovac component we dive into our Kovac component there we are we have loading from here we could simply just put a title that says Co vid and there you are we have a title and then some text that's just spinning a spinner on the screen over here but once we have this our next step is to go ahead and get the data as I mentioned earlier the Cova 19 data will be coming from the John Hopkins github page over here on the John Hopkins get a page which I'll be including below in the links they have actually several different branches they have the master branch over here which has quite a bit of data but is not updated as frequently the data that we're concerned with is the web data branch inside the web data branch there's a folder called data in that folder we have case country CSV so these are comma separated value lists now like connecting to an API we are going to go get that information and then we'll be parsing that information we won't be getting back JSON information we'll be getting back text that is in the format of a comma separated value list that comma-separated value list looks like this github does this awesome thing where they displayed in a table for you but this is in the real data that you actually get this is a representation of that data but by clicking on raw we get the actual data that you will be getting the first column is the header information and then each and every column below that represents a row of data as we can see there's each country is separated onto its own row then every single comma represents a new column of information that we have over here but we're concerned with the country name right over here and that's the first column and then one of the columns over here in the middle is confirmed and that comes right after the lat and long and we're concerned with that column and the numbers that are contained there retrieve that data over here we're going to jump into our Kovac component that we have open our Kovac component over here so let's go ahead and component did mount we're gonna go add that event right there and component did mount right over here let's go ahead and add a URL for application so URL is going to be equal to and the URL information that we're interested in for the kovat 19 data will come from over here we'll grab that URL which is basically this location inside of the repository we're gonna grab that information I'm over here and put down a URL but that's the URL that we'll be using to retrieve our Kovan data now remind you it's coming back in a CSV list so we need to do a little bit of parsing in order to get that to work let's go ahead and use Axios for our data connections here we will do Axios Axios right there and there we go we have our Axios object you could also use HTTP match javascript fetch and that I just prefer to use Axio so find it a little bit easier and this is going to be an async method that we're going to be using so I'm going to put a sink over here then we will go ahead and get that information from that URL so in order to get that information we're going to do a Const result or actually response is equal to a wait Axios Det giving it this URL get us that information so let's go over here and open up the console clear out the console and we'll do a consult log phonce make sure we're getting that information correctly so here we are we get our response object back and that response object has a data which is this string of text that we want a status code of 200 letting us know that everything's okay and good so using that we can go response data get that information and there we are we have all of that text information for us to consume step would be that we want to split to this data up into rows of data as I mentioned every single new line is a new row of data so in order to get that working properly over here what we'll do is we'll say Const rose equals response.data split and we will split on a new line Oh backslash n represents a new line of information and then we will say console.log turns out all the rows there we are we have an array with 187 items and each item is a string of text our next goal is to get that data into columns of information in order to do that what we will do over here is we could take this is a little test over here to make sure that we're doing it correctly what we'll do is we'll define actually we'll print out this Oh console loops I will get that right there we go also dot log and we say rose and we're just gonna get the first row over there of information go ahead and make that information let it on comma print that out over here and we see have fourteen columns of information so there's all our headers country reaching last updated long lat so that's all the header information if we move on to the next row of information we get Australia the last updated date the long the lat the number of confirmed cases six five four seven and all of that information is now easy for us to consume and even easy for us to read to consume this information what we'll do next is we'll provide a little for loop we're going to loop through that information through every single row of information and collect all the countries and also get a total for all countries so over here and create a for loop let's say let AI equal to and we're not going to say column or row 0 because that's the header information we're not be collecting that but we'll start at Row 1 and we'll say well I is less than length o is less than a 2 semicolon I is less than Rose the length plus plus or a little loop that we want to set up step one let's go do it we just did a second ago over and say Const the current Row is going to be equal to Rose that's the row that we're on row I then we'll do a split and you can split on comma this over here this solution is splitting on kama is great because it means that every row of information will be correct but we have one little caveat with this information is that within this data over here which this is doing it properly but if we look at the raw data and we find Korea Korea has a comma so Korea comma South over here and it's inside of quotes but what I simply did is I looked up a regular expression that would help me with comma separated values and ignoring any commas that appear inside of a quote which is a common thing to escape data so to escape that over here this is a Google search that I did and I will put that regular expression all you really need to know is that we are splitting on comma with the exception of one row of data that contains a quote so to do that we put this regular expression in and all we really need to know is we are splitting letting on comma or even just put a comma splitting on a comma that's what we're really doing over here the next thing we want to do is once we have a row it's really simple for us to collect the country name from the first index from zero inside of that list if you look over here country name is featured at position zero to get the confirmed we just go zero one two three and four so position four is our total number of cases so Const Odle equals row and then go to column four and that gets us our total go ahead here and simply just take our data as soon as I spelled a Carney console dot log and we print out all the country names what we'll notice is there's one extra line of information that contains an empty row of data it doesn't have a country name but when we're collecting this information over here what we're going to do is check if that country name is not equal to an empty string and if it's not equal to an empty string then what we can do is we can construct an array outside of our for loop where we will store all the countries that we collect over here we're gonna loops we will go Const country's is going to be equal to an empty array and then we'll also collect an all country total which will set to zero initially so we have an empty array of countries and a complete total of every single country and all the confirmed cases over here equal to zero inside our if statement over here what we'll do is say country's push and we will push a new country on here and we'll define an object that we're going to create we'll give it a country a name and that name will be equal to country name over here and then below the name let's also collect the total and the total will be equal to total there we are we've collected the name and the total and as we said we're also going to collect the total number of cases as one variable that we're going to store so inside of our if statement right over here we can say all country total plus equals a total that we just collected we're just going to continue to append the total that we collect from every row of data and add that and then from every row of data we're going to collect the country and push that into this array over here so this is the start of our application and start of the data that we've collected one cool thing that we can do to confirm that we have all the right data is we can use this console table which can take an array of objects that are and print them out in a nice little table inside of your console so check out this cool trick we will do country's print that out over here and check this out we have this developer functionality you could say in our developer console and we've printed out a list of tables over here which is pretty pretty neat so we have a name and a total oh and look we found a mistake over here our total actually comes in as a string but we need to take that string and make it into a number otherwise let's check this out if we take a look at our all country total right here on sole dot log and print out that total at the bottom of the screen look at that that is definitely not the total number that we're looking for we're looking for a number that's somewhere more decent hopefully never get to a number like this but whatever this number is it's a little absurd because all it's done is concatenate strings together instead of adding numbers together to fix that we just need to make sure that when we grab our value from the comma-separated bility value list that we convert it to a number just put number over here wrap that row for number or wrap that row for value in a number and then over here we get our correct value and we can also see from our table those numbers are no longer in quotes over here beside the country name our next step is to go ahead and now collect this information so that we can use it so we've collected this information we've shown that it works let's go ahead and add some state to our application we're going to be using this information to show it on the screen so over here we have our state inside of our state let's go ahead and add a country's list just like we collected below that country's list will make it equal to an empty array [Music] and let's also collect a total that we'll put over here so this is our all country's total we could make that more descriptive and actually all that all country total right here Oh countries all country total anybody who has never seen this application before and is reading the code for the first time this would be really clear to them instead of just having a variable called total so if we go scroll down over here once we've done our for loop all we need to do now is say this what making sure that we are in the correct place so that's our for loop yes so just directly outside our for loop this dot sets state and we're going to be setting our state list of countries and the all country total over here will be equal to our all country total so here's a cool little trick we have our values coming in we're setting the state we said this value is going to be equal to this value and this value is going to be equal to this value well what's really interesting is that the spelling is the same on the left hand on the left side and the right side a cool little trick to minimize this amount of code or what's on the screen here is we can create objects by just saying hey use this as the name and the value and it will do that over here so we have countries and an all country total opposed to having a left side and a right side if they're the same name you don't need you define both sides that you can just remove those like that we Sutter State over here let's go ahead and start using this information to build out our screen so first things first let's go ahead and add a title on the screen one thing we can do over here is we just hit on a however h1 I'm going to go ahead and style that h1 just using some inline styles to make sure that we align that so that is just a line Center on the screen and I like we had in our application over here oh here we are and as saying Cove it will say all entry Odle and the rial all country total and then beside all country total what we have over here is let's display from our state and over here in the render method what I'll do is I'll do a Const and we'll have all country total is going to be equal to this dot state but we're extracting or deconstructing the properties that we require from the state object to use over here we're going to grab the all country total put the all country total over here paste it in and there we are so that information loads in we still have our spinner showing but we're going to we're going to get to that as we start to display our table of information but we do have this label now at the top of the screen to display our total now that total could look so much better if it was formatted over here I'm going to be pasting in a little function called number with commas that uses the replace method with a regular expression that's defined over here and I'll be including this in the code that I upload and I'll also include this in the comments of the video so all this does is over here globally replace all the numbers and find the patterns that it requires in order to make our number look nice so numbers with commas once we collect that information over here what we can do is go down over here Oh number with oh sorry that we need to use this this number with commas that we are we get our intellisense and there you go all country total you have the country we have the nice little commas there so that we can easily read that number without having to count how many places or how many digits there are before figuring it out next we're gonna go ahead and make sure that spinner goes away as soon as we load data in order to do that we're gonna have to do a little if statement inside of our JSX right here inside the JSX we'll wrap that loading over there and then we will check right here the all country total if it's equal to zero so triple equals right there if it's equal to zero we will show the loading otherwise we will prefer at the moment but a Dave over here and that div will just simply say got data and got data right there will display and replace our spinner then the application for it's loads up we get that spinner the only negative right now is that information is super quick which is awesome if you're building an application right now that data is fast and loads very fast in your application however if we want to simulate this being a little bit slow so right before we call set state over here what I will do is I will await a new promise mccuddin you promised and this is kind of an interesting little technique here to do something that you would typically do in other languages such as a thread dot sleep and make the application wait for a little bit what I'm going to do over here is inside this promise we're gonna have a callback and that callback over here will call set time out and set time out after a period of we'll say one second will then load the page so we'll put X over here X will be the promise that we pass in and set time out after a period of one second will call X and X well then allow the promise to continue to the next line and if we spell promise correctly that will work but right over there load that page one second and then we got our data and it says got data on the screen you can also notice at the very top it says all country total is equal to zero so that's a cool little trick that you can use when you're in your development environment you simulate what in other languages they call a thread sleep or just waiting on this line for one second we could wait on this line for two seconds ten minutes whatever we want and then it would move on to the next line of code we wait one second before calling set set state so we've done so far is we're just playing got data what we'd like to do is display this information in tabular format a table that's table that we want to create over here in components we can go ahead and create a new component and we'll call this the ountry april JSX and we'll just create a component over here CC and then country able it escape to get rid of the double cursors and then if we wanted to what we can do is go back to Kovac JSX over here and I'm just going to but what we have right there for the moment then we'll just put country table right there auto import I was not watching country table there we are there we are so should have Auto imported for us when he hit tab and there it is it says country table or a country table we need to go inside there because now it doesn't exist I haven't even been hit save on this file yet right over here inside the return statement I'm going to paste the JavaScript that we had earlier and once again it says God data so this component country David Abel needs information to get that information there what we'll do is from our Kovac component and back in our diagram over here Ovid is holding all of the data so it will then pass data down into the country table component inside of the country can table component will then use its properties to get to that data so over here going back to kovat inside of our render method we have the all country total we also know that this object has a list of countries that list of countries will pass to the country table over here and which is college countries is equal to and there's the data that we're going to give it is equal to countries the country table is going to have a property so go back to the country table over here we do not need state for this object so inside the render method over here we're going to say Const countries is equal to this the props so now we're d structuring but instead of destructuring from the state object or destructuring from the props object to get that list of countries and then what we want to do is display all those countries on the screen so if we're just going to hit save over here confirm we're applications still working and it is going back over here let's go ahead and create a table but we are going to be using bootstrap table and we're going to use some properties to make it look nice so let me just show you real quick where you get that information from always always important to know how these things are getting coming from and where I'm getting the information and I'm just getting this from bootstrap on a bootstrap going to documentation get this little nice search bar not sure what you're looking for just type it in if not browse through the different menu items they have over here for any components or interested in but for me I'm interested in the table component oh let's go type table over here go to tables and you can see that we have different ways of formatting tables here what I am interested in is a striped table so something like this striped rows that's what I want alternating color for every single row of data that I have so let's go ahead over here and I am going to define a table and then inside of that table we'll put our Oh without those brackets that will not be working very well so these brackets the parentheses they allow you to go on multi lines without those parentheses your JSX ASX will not work when you go on multiple lines so when we go t head over here and then what I will try doing over here is some Zen coding TR th and then what I want to do over here is I'm you if I do that right and there we are I get two rows of data just a little shortcut for coding we have a TR and then a class of th what I meant to do was put an angle like this go back over here th times to hit comma and there we are now I have two th's inside of my row but we have two headers so I want to have a country over here named and then I also want to have a total for each country going back to our react application over here you can see I have my table information a country and a total or that table like I said we are going to be using a striped table so I'm gonna put a class name but some quotes and then if we go over here you can see it says table and table striped table table stripes go back to react and look at that our table looks nicer already I am going to go back first into my kovat application over here and for our promise that we added and our component did mount I'm just going to reduce that to 500 so half a second that's what five hundred milliseconds is right there just so it's a little bit quicker inside of her country table we have our tea head over here and now we need our tea body to build out the other part of our table and then this is where we're going to be mapping our rows of information but right here inside of our tea body now that we've collected our countries over here oh and I misspelled that so countries that otherwise that would not work so there we go we got our countries and then inside of here there you go countries we'll need to put curly braces inside those curly braces countries map and then inside of the map function we're going to be mapping each country so there's our country it's going to be equal to country inside of country over here what we're going to do is simply just return TR and then inside of that TR we're going to have a TD which is going to represent our country name so we want the country name and then I'm going to duplicate that line of data right there and rename what would have been quick for me to type it there we go total country total so now we have our country total in name but appears we've run into an error over here cannot read property map of undefined so somehow my countries list is undefined right over here so we're getting them from our properties getting our country's so going back to our kovat application over here checking where our countries come from so there's countries we pass it in over here oh and there's that same type old that I had earlier so it continues there we are now we have all our countries typo free there we are go back to our country table and now we have all of our information display ting displaying you'll notice that we also have this error over here that says each child in a list should have a unique e property so since all our countries are uniquely named I'm going to go ahead and create a key which is only used by react and over here I'm going to use the country name as a key and that will get rid of that red message let's also go clean up these unused variables that we have here so in app J s we are not using the logo and we're no longer using the loading there clean those up and then you can see that our application is a little bit cleaner now and we have all of our countries displaying and we have our total on the screen Cinelli that we're gonna implement is being able to sort on the total and being able to sort on the country the information that we get is already sorted by country name but once we sorted by total the country name won't be sorted anymore and we'll have to have the ability to sort it again so it to get started what we need to do is go back to our kova JSX over here then on our countries table component we're going to be adding an on Hort by total event and we're going to respond and listen to that with this got handle on fort i total and a handle on sort by total over here what we'll do is implement it just below our render method it can really go anywhere inside this class but we just put it there and we're gonna say that's equal to a function and that function since we're gonna be making these over here with an anchor tag which is a link normally we click on the link it navigates to another page we want to prevent that that event from happening i want to prevent the default behavior of a link when I say links you don't go anywhere so in order to do that we have to say event dot prevent default and that will prevent that default behavior of a link wanting to go to another place so once we have this implemented over here what we're going to do is we're going to make a copy of the country's array then we're going to sort to that information and after we sort that information we will then set the state let's go ahead and do that so what we're gonna do here is a Const country's is equal to and that new list of countries we're going to say copy all the countries that are in this state not countries and that's what this operator does here this is called the spread operator dot dot a spread offer essentially takes all the objects that are in the array and takes them out and then what we do is we put them inside of a new array that's why we put these brackets around it so essentially making a copy of that country's array then on countries we call a special method called sort this sort method as you can see over here takes in a function that function takes in two parameters two items that it's going to compare in our example in this it'll compare two numbers for a line item they'll compare this number and this number and say which is greater than the other and it'll go through every single list of two pairs and comparing and figuring out which order these items go in well let's go ahead and do that what I'm going to do here is I'm going to define a new function called sort by total the sort by total function will define just above our handle handle on sort by Endel on sort by total and over here let's go sort by total is going to equal to a function and that function over here as we talked about it's going to take in two parameters it's going in country a is that's we have in our array our array has a list of countries in country B then we'll say if country a dot total is less than country be total with this we want to return something information they want to turn is based on three things when you implement a sort comparison method you want to return three different outcomes one they're both equal so if both objects are equal we return zero that means both objects are equal to each other if one object is greater than another object then we return one is there greater otherwise we return a negative one saying it's less or over here I'm gonna say if I'm gonna do the opposite because I want country being is greater than country a total what we'll do is return one because I want this list to be D sending then we'll say else tree II total is less than ountry a total and return negative one oops spelled return over there or perhaps I didn't Oh where's the typo over here let's see Oh else if that is why the right over there forgot my elsif and then what we'll do over there is we're just going to assume that at this point if one's not greater than the other and one's not less than the other then therefore they are equal to each other okay so we've invented our sort by total over here the last thing that we need to do is say this dot set whoops this dot set state and then inside set state over here we're just gonna give it the list of countries and update the list of countries oh copy the list Hort the list and then set the state okay so in our country's table we've now specified that there's a non sort by total event that we can execute when we need to so now we're passing it as a property will go into our country table and in our country table when we extract our props over here we'll extract the on sort by total and then on the total over here as I said we're going to add an anchor tag and that anchor tag will just make equal to any location that we want that's a valid it doesn't matter because we're preventing the default behavior of our anchor tag we'll take our anchor tag over here and put that there and then we'll take our on sort two by total and we're going to listen to the lik event of that anchor tag and when that click event fires we will execute the on sort by total event over here the property that we get back so now you can see our total is an anchor tag and if I click on that anchor tag it sorts that information I'll refresh that page there so you can see it again like that button and we're sorting our info next we'll implement sorting by country so sorting by country name over here what we're going to do is pretty much copy the same functionality that we just had or the total so over here I'm going to add an anchor tag and then right after the country over here we'll go ahead and Lowe's an anchor tag instead of on sort by total will call this on sport I country name actually we'll just call it on sort by name no country name and then on sort by country name over here what we're going to do is say comma on sort by country name we'll take this property over here that we're passing in and we're going to go implement that on the country country table that we have right here grab the on sort by country name say this is equal to and then this odd handle on sort by and then we're going to say country Oh country name there we go and then the handle on sort by country name is not implemented right now so let's go up over here and implement that method and see already had the link over here so looking pretty good this will be pretty simple what I'm going to do is pretty much copy what we got over here for sorting by total the functionality is very similar kind of a bad practice though that there's so much similarity among these we can definitely refactor this for the purposes of this example though I will just kind of keep them like this but know that you can make this code better because the only real difference will be over here this sort by total we're gonna call this sort by country name and that's pretty much the only difference between these two methods is this one line over here and the sort function that we're going to be using a same thing that goes for this list over here I'm gonna say sort by total copy that we're kind of just grouping these two together right here and then instead of saying country total we're gonna do it by country name and I've tried this before so it's right over here I'm just gonna actually what I'm going to do is select total right there it's command D command D command E or control D control do you control D on Windows you can see I got four cursors those four cursors over there I'm using them to delete where it says total and then typing in name in addition to that the one that says be I want actually I'm gonna do this here I'm gonna do be over here is let me see we're going to see you just double-check this here yes okay it will say country a name name is greater than country be name right there returned one and then if country a is less than entry ename returned negative one right there and this function I haven't renamed it yet so I need to rename that to sort by oops accompany country and then sort by a country name and there you go so let's try sorting by total let's sort by country and we get this weird what happens is the reason that Korea goes up first is that it has a quote and quote will come before a name also this doesn't really look good or the data that we're displaying but what we can do is go make sure that we have the proper country name when we retrieve that information in the component did amount so inside of component did mount right over here component amount and we get those rows of information we can go ahead and look at the country name right here when we get that country name which is located at the first position of that row in the first column of information what we'll do over here is we're going to call a function called replace replace what you can do is it takes in two parameters the first parameter we're kind of going to use a regular expression because we want to use we want to replace both of these quotes by default if I were just to say quote both like that and then go ahead and put an empty string and say replace it it will actually only replace the first quote for Korea so if we go find Korea whoops go find Korea over here on this side in screen you'll see that we still have that last quote over there you can Ray to that last quote we need to actually put a /g gee won't work when we have it in this format over here to make this work I need to say hey find me every finding me on a regular expression here find me the quote and then globally replace every single instance of quote that you find if we come back over here find Korea now you can see that we're finding Korea the Korea name country name over here no longer contains a quote at the beginning and no longer a quote at the end so just a little thing we need to do to clean up the data so that when we implement our own sort and we sort by total and then sort by country name over here the country actually gets sorted properly have that sort functionality working let's go ahead and refactor that code but we know that the handle on sort by total and the handle on sort by country name have identical code bases over here the only difference is when we call countries sort we're either sorting by the country name or we're sorting by the country total so to fix this let's go ahead and add a method called handle on board by and handle on sword by over here what we can do is make that equal to a function so we'll just say equal to a function and then that function they're going to get equal to will take in some common information so one thing that we need to take in is an event both of those methods it can an event and since both of those methods take an event they also each the other difference between them is they need a sort by country name or a sort by total what is that I guess that's the sort out that or an operation but right there we've an event and a sort operation so let's copy this code over here a stud in we're using that event which is perfect this is still kind of grayed out because we're not using it sort operation will go over here and all I have to do is paste that in over there code is still compiling and we're good go down over here on our handle on sort by what we're going to do is we're going to use this method over here we'll go over here into this function here pass in the event and then pass in this thoughts sort by country name and then we can go ahead and delete that code and let's also put it this over there a little compilation err and there we are let's go check the country while country right there so it's sorts let me come back over here and we go there so over here let's go back to our and I'll answer by total and we'll do exactly the same thing so I'm gonna copy that this time I'm gonna come back over here I will paste that in and remember the only difference over here go sort by total and there you go perfect now I can sort by total and I can sort by country name and are coded a little bit cleaner by removing that duplication next we're going to implement selecting a country if you recall from the example I showed you earlier every time you click on a country it'll be selected and we're going to use a little styling to do that to make it yellow to make it visible that the country has been selected so let's go ahead and get that going over here in the render method we're going to go ahead and add on a on row selected and we'll say on row selected is equal to this a handle on row selected and then let's go implement that inside of her country table first so we'll copy on row selected go into our country table over here go ahead and grab the on row selected so every single time a row is clicked we want to fire that event go down over here on the tr4 every single country that gets clicked we're going to implement an on click so on click over here we're going to do on row selected row on row selected it will execute well we also need to do a little bit of styling over here so that we know the row has been selected so in order to do that we're going to go ahead and inside of our map function that we have over here we're going to add some styling so to expand on this map function right now it's just doing a return automatically right over here with those braces we're just going to put curly braces actually just around that part of the method right there oh just find that area align 33 right there and then what we have to do is because we're not returning anything we need to return this data here I'm going to cut it they return open close there you go get rid of that semicolon and there we are so I just wanted a little return method over there so everything is still working then I'm going to add a Const style is equal to and inside this style I'm just going to define a style that we can use if the item is selected so inside of style over here I'm going to put a background color and background color will be equal to I'll just keep it simple and say light yellow right there and then right over here inside of our TR what we're going to do Oh what we're going to do over here is add some styling over here inside of here and we'll do it I shall let's just do it right after the key right there put that on a new line for now pretty girl will format that as soon as I click Save and then what we'll do over here is if see or not see I mean country if our country and we're going to add a property to our country is called selected so if our approach if our country is selected what we're going to do is we're going to apply the style that we've created so that's the style that we created right above we've got our style here and we got our style above if not we won't apply any style do that to that object nothing will happen right now because we haven't added anything down over here for the on-click event another important aspect of the on row selected is we need to know which country which row of data was selected let's provide that information we're going to wrap that in a function because we're going to have to execute it over here we only want it to execute so this is going to set this function to on click so it's not executed this is going to be executed inside and inside here we're going to pass the country so there we are we have our style over here we only set the yellow style of the background color of the row if it's selected otherwise it doesn't as you can see our application is not applying any Styles right now and then an on click event is when it's executed it'll call on row selected with a country inside of it so next thing save there next we'll go back to our country listing or our kovat application our co-ed application has a method over here that we've created you can see it's highlighted blue because it's not implemented yet and I'll on row selected let's go implement that a handle on row selected over here so handle row selected we'll just put that right after the render method right over there we're going to put that equal to handle row selected is equal to that and remember that takes in a country we're going to grab a country over there now this method will be a little bit bigger than some of the other ones that we've done the reason for that is in react in react state is supposed to be immutable which means you can't modify the objects that are in the previous state we need to make new objects over here let's go ahead and say Const we're gonna make a copy of our array so countries just like we did before we're going to first make a copy of our array of countries that is the first thing we need to use we use a spread operator this dot state dot countries right there and then once we got our new list of countries that we're going to be using we have to find the object that we're updating well let's go find where that object is located inside of that array so inside the countries because these are all copies of objects that we have and we're not and not copies these aren't copies these are the actual objects used in the previous state we need to make a copy of it so first thing we need to do is find the index find where that object is located in order to do that we're just going to put C over here to represent country C dot name but it's going to look for that country by name because we know that's a unique value for every single one here and our country over here that we're going to find I'm going to rename this up here to country to update and then down over here country to update dot name so we're going to look for that country to update inside of the list find where it's located once we find where that object is located we're going to go ahead and create a new country so say Const country is equal to and then we're going to copy that information over we'll so we'll say named country you up a date dot name so I'll get the previous name of the country and then go ahead and also update the total Oh country to update total so we have the total over here the last thing we need to do is a new property that we talked about that we haven't really added but by default we'll be false so over here we're going to say the opposite of the value that it was before so the selected value will say country got elected and get the opposite value well we'll get the opposite value right here so that doesn't exist oh the opposite value of the country to update right there and get rid of that semicolon there we are country equals this new object as the same name has the same total the only difference is that we have to change the selected value over here then this new object that we create while we need to replace the object that's inside of the country's list go back over here we say countries we go and find that object so that will be the country over there say and that in the list go replace the object at this location with the new object that we created right there last thing we need to do is just go ahead and update that state so this starts at state and object makes in the countries and there we are now we have our list updated if we come back over here we can go ahead and start clicking on countries and it'll be selecting if you gotta click it again it unselect that country we've implemented the first step towards building our charts by selecting country using our selected country information we can now start to build the chart component so the chart component will be taking in a list of countries those countries that have been selected the first thing let's go update our state over here so that we have a property called selected countries and selected countries will be equal to an empty array that empty array when we select the rows over here the rows of information will want to update that information so what we're going to do over here is we will go ahead and very end over here when we update the state we're going to set these selected countries equal to the countries dot Oh select it if it were that simple we have to put a filter so put a filter and that filter over there will take in a parameter which is the country and then in that country we're going to check if the value is set to selected right there countries filter it down to only the ones that have been selected but using this information over here the selected charts right ear towards the bottom the page around the render method right above the country table we're going to put our chart component so let's go ahead and create that chart at chart JSX right there go ahead and import reactant component go ahead and create that chart and we'll remove the state since we're not using that over here we can display just a div that says chart for the time being and then back over here in our coded what we're going to do is we're going to wrap this and add a of here because we're going to be putting two elements here now and we have the country table and inside of that country table we're also or above that's country table we're gonna have a chart so the auto import didn't work there so I'm gonna have to go up to the top of the page over here so just like this one over here except it's going to be art there we are we have a chart component that we import and now it says chart above the page as I mentioned that the chart component over here is gonna have countries we don't have to call that selected countries all the chart knows is that it has countries a list of countries it doesn't care whether they're selected or not just knows that they're there but that information we're grabbing from our state over here so selected countries and then we'll pass selected countries into our chart over here inside of the chart we can confirm that information over here by doing a console dot log and since that's a property that we're getting let's go ahead and do a Const open those brackets but in the name of the variable that we're getting which is countries and we are getting that from this props which we're destructuring over here the countries and then let's just go ahead and say countries dot length like that it will just get the length of that variable we'll see it's zero so the reason you get these duplicate messages on the screen like this is because inside the index J s the react dot strictmode ends up repeating some of the console dot log statements for a render just a little caveat of that and that was something newly introduced about a month ago inside the default template when you use NP x create react app so going back to the chart dot JSX here we have our chart we have our countries it's showing 0 so whenever I click on a country you can see what's selected even better we can take this information and use console dot table and then also pass the countries object in there so right now there's no information so we're not seeing anything as soon as we click on one of these countries over here we get that table a member we get that duplicate info over there which is ok gives us better error messages using the using the strict mode and then we can see the information here what it looks like but we also see the information inside the table so we're getting exactly the right info we can scroll around click on different countries they will all get added to our list here as we scroll down and see that information so there's all the countries that I have selected go far alright cool so now that we got that working what we can do is get rid of our console dot log over here and we want to create some charts the chart that we're going to create is a pie chart and we're going to be using charts J s and we're going to be using the reactive version of that which has created taking the charts a s code and created components that we can consume in a react application so in order to do that we need to install two modules those two modules are NPM react the two modules that we need we need two charts j/s oops so let's go back over here alright I over here have my terminal running in one over here running my code I'm gonna pick Terminal two over here or if you don't have it running and click on the plus sign over there to add another terminal and what I'm going to do here is an NPM install so you can just put I I'm gonna installed chart a react chart js2 and then also install chart J S which is a dependency of react chart js2 once that's installed we'll be able to import a pie chart and then consume that pie chart to go ahead and display our information so let's go ahead over here and import I from react charts js2 there we are we've imported that and saved our application we refresh our application or no it's compiling still but once that finishes compiling we'll know if that was successful the so far we're successful we're able to import this without error array any errors over here inside of our render method we can go ahead and start to use this pie chart before we can use this pie chart though we need to get some information for it we want to show you here is how to use this component however there is more documentation on react chart js2 on their github page and there's even more information on just how to use chart j/s which is a pretty awesome library so over here we're going to create a Const object we're gonna create a data object and this data object will be used by our pie charts we know we're going to want to put that actually inside of our render method over here and we'll put that below our countries because that's the information that we're going to be using for our data so for this chart that we're going to be building we have labels those labels as you saw earlier are the information that you see at the top of the screen but we're going to take the countries that we have over here and those countries we're gonna map them to jess names remember our countries are objects that represent a total a selected value and a name but what we want to do is just take that name right there there we are and if you want to even name this better we can take these X's over here and call them country so it's a little bit more explicit as to what is its list of countries and we're modifying each country we get the name and put this into this labels value that you'll see used in a couple of minutes the datasets over here this is the actual data that we'll be using to build the pie chart so that it can compare two numbers and decide how big of that piece of pie chart each country will represent so data sets data sets is an array and that array over there takes in multiple data sets that you could have we only have one data set for this to keep things simpler and inside that data set you can have countries not map so this is going to be the numbers and then just as I did before we're gonna have ountry is equal to and we're gonna say country dot name right there I forgot the colon there that's a mistake there you go that we have countries map and we get the country who you do not want the name we want the total over there we have the country for the data and then include with that we need each one of these to look different so we kind of need a background color I don't have a list of I could give it a dynamic list of colors and just set those colors since I know there's quite a few countries and you could possibly select all of them what I've done is I just have a list of colors here that I actually kind of googled so let me just grab this list here it's a big array if you are interested in trying this code out I will be posting on github I'm not sure if I can post these colors in the comment as that's a lot of text but here's the list of colors that I'm using just a really really big array of colors that I got here so really really big list of colors probably more than the number of countries that I have and then what I'm going to do over here is I'm gonna give it the background colors array so I don't to put that array inside of an array but there you go so I got my colors object that I'm just consuming over here to get that list of colors so once we have that list of colors and we've created this data object we can now go ahead and actually create our pie chart and before we proceed further one thing I'm going to do is when this page first loads and while it's waiting to get that data what I'd like to do is kind of keep the page tiny for now and just have this area shrunk so while that's happening I'm just going to put an if over here that says if the countries countries dot length hundreds Outland oh I had that right country's at length is equal to zero then what I'm going to do is just return an empty div right there so just nothing displays on the screen well the spinner is going so we got rid of that text and now we're all good so over here inside the render method we can get rid of that text now we can create our PI component and that component so we created a data object for a purpose and that data object we're going to set over here we're also going to give our chart and width of 100 and we're gonna give it a height 200 options wise we want to maintain the aspect ratio we don't want to maintain aspect ratio we want to use our width and height there I'm gonna set maintain aspect ratio to pulse there we go and then if we select our countries here we are we can go ahead and select countries you can see these numbers like France a lot higher than Finland than that so you can see it's getting those little pieces as you built-in functionality here as you highlight over each one of these pieces it gives you more information that we're displaying you know which countries which you can also look at the labels up over here you can click on the labels to make them go away functionality here and then you can also unclick our items there and then put them back if you so like there you go we could sort we could add lots of countries build our table here we could change the width and height we could play around with maintain aspect ratio there's a lot of things you can do with this application we could clear the selection if we wanted to that would be easy code to add just add a button that sets the all the selected values for our countries to false and just a lot you can build upon this application and the data and all this data once again is coming from the John Hopkins github we're consuming the CSV file which is a comma separated value list and then taking that information and transforming it into something that we could build for our application you like my video please like subscribe and click that notification bell [Music]

Channel: Coding With Adam

Views: 1,516

Keywords: ReactJs, React, github, npm create-react-app, npm deploy, Tutorial, react tutorial, programming, coding, easy tutorial react, east react tutorial, coding with adam, CodingWithAdam, npx create-react-app, create-react-app, git, Covid-19, covid-19 react app, covid-19 react, boostrapjs, axios, react fetching data, console.table, charts, covid charts, chartjs, react chartjs, react-chartjs-2, Stateful components, Johns Hopkins, react csv, react parse CSV, comma separated values, reactjs csv

Id: t3RKOrNBWFM

Length: 77min 32sec (4652 seconds)

Published: Mon Apr 20 2020

Reddit Comments

[u/CodingWithAdam]

A complete tutorial using Covid-19 data to create a react application. For this application we retrieve data from the John Hopkins GitHub repository. The data is in a CSV(Comma separated value) format. The following node modules are used: bootstrap, react-chart-js2, chart.js and axios.

Let me know what you think?