Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js)

[Music] hi and welcome to another JavaScript mastery video the current situation in the world is not great but what can we as developers do to make it better well one thing that we can do is we can take an API which just has a lot of data and then we can visualize it to help spreading the awareness this is just my take of taking one API and then visualizing the data we're going to explore the data of the API in just a minute in here you can see that we have the number of infected people number of recovered people and as well as the number of deaths this chart contains a lot of data but if we didn't create a chart if you just had the raw data that would be an array of let's say some objects with the numbers that would be unreadable to any human being but taking the data and making sense of it it's the best thing that we can do in this scenario so you can see we can visualize the number of infected people we can see the exponential growth and then we can take action the second thing that this coffee'd 19 tracker or statistics app have is the choosing of the countries so we can choose a specific country and get the data for it let's see let's try word for example Australia for specific countries the API unfortunately doesn't provide the historic daily data the only thing that we get is the current final stats so as you can see them right here and then we can make that into a nice bar chart to visualize it let's see for a few more countries let's see Bangladesh ok a great number of recovered people in Bangladesh let's take a few more at random and I would like to show you China China is the country with the highest number of recovered people and that's good we can see that things are slowly getting better ok let's go back to the global chart one more time to see it and in case you missed it you can see that we have a slight animation on the counting numbers right here so that's also a grating that you're going to implement this is the finished product if you stay watching this video until the end you're going to learn how to create this completely by yourself how to do this counting numbers how to do this cards how to do this country picker and how to do the charts as well and of course this is all responsive so if we open the console and open the mobile device you can see it's fully responsive both for mobile devices and for tablets so that's good without further ado let's dive right in as always we are starting with the empty Visual Studio code window the first thing that you can do is create an empty folder you can call it a corona app core on a tracker something like that and you can just drag and drop it into this window secondly we are going to go right there into view and then we are going to open a terminal you can click it right there and it should open after that is ready we can run MPX create react app and then just type dot slash this is going to initialize an empty react application in the folder that we were currently in and then you can just press enter the API is going to be down in the description so while this is installing you can open it and in the browser you can take a look at what is it offering let's take a look together and this is it if you just follow and click the URL in the description then you should be greeted with these values possibly it's going to look like this for you which isn't going to be meaningful but if that's the case then you can install a simple Chrome extension called JSON format there and that simply parses the data for you so you can see it anymore let's say you valuable format now that you have that installed let's see what data do we have so we have the number of confirmed cases right here confirmed and then a value the same things goes for the recovered and the deaths and this is a global data of course then we have the daily summary so we get all the daily data and then we also have daily time series which is just going to be data for specific day taken in two different chunks but we are not going to need that for our API then we get the image which is going to be already generated image of the currents time which is really cool but we're going to build this chart ourselves so we're not going to need that picture okay so let's collapse this one more time and see what else do we have we have the source we need to link it of course to credit the order of this awesome API below we have the details for all countries this API gives you just the data for all different countries so you can make a list and then you can make the user select from a selector and then below we have the specific country for example we have the USA and then we get the current data for that country as well as the time of the last update this API has everything that we're going to need and of course as always in Java semester II we are going to code this in the most efficient way possible in react we are going to have just one single class-based component all other components are going to be functional components with hooks we are also going to have a specific folder structure for all the components and the API fetching itself everything is going to be nicely styled up-to-date and using the best practices now that this is installed what I like to usually do is I like to delete this SRC folder and created from scratch because we don't need a lot of the things that create react apps gives us so in there we of course need the index that is as well as the app that Jas these are the main files inside of the index yes of course we need import react from react and only in the index.js file we need import react Dom from react - Dom inside of here we can also import app from that slash app and now we can call that react Dom that render method on it and the first parameter that it accepts is the app component and the second parameter is the element we want to render it on so that's going to be document that get element by ID and then the root for the beginners watching why are we getting this and how are we getting it you can go inside of the public and inside of here you have the basic index.html file nothing special in it and you can see that the only thing that we have inside the body is just a basic empty div with an ID of route okay now that that is done we can go into the app j/s and create a basic class-based component so imports react from react and in here we can say class app extends react that component of course in there we have the render and we also have the return which for now can only say let's say div and then we can give it an h1 and inside of there we can say app just like that and then we need to export it so export default app before we finally start our react application let's install all the necessary dependencies so that we don't have to later you can do npm install - there save and then let's list all of them so first one is going to be the Axios with the help of Axios we'll make a get request to the API the second one is react - chart Jas - - this is one of the better libraries for making charts then we have react - count up this is going to help us make that animation while counting numbers and let's see whether we need something else that should be it if I miss something we are going to install it later when you run that you can just wait a bit and it is going to install all the necessary dependencies and now we should be good to go you can go ahead and run NPM start and that should start your react application on port localhost 3000 and as we expected we get an H 1 that says app now let's implement some more JSX we're going to first do the project structure so we are going to create a components folder components and then inside of there we are going to create all the folders that we are going to need and all the components so that we can just put them here inside of the app and then later it's going to make things much so we can just focus on creating special components we are going to stick to a really good project structure so you can go ahead into the components and create a new folder that new folder is going to be called cards with a capital C cards then you can also create a new one called chart and finally you can create a folder called Country picker great with this project structure each folder is going to have its own styles and its own component so inside of the cards we can go ahead and create a cards that JSX file as well as the cards that module that CSS it's really important to use modules in react if we don't use CSS modules then all the styles from here will be applied over all components and that can lead to interference and unpredictable code we don't want that so we want this file the CSS file to belong only to the cards that JSX and we can do that with using modules okay now we're going to create the same thing for each one of these so we're going to say chart that JSX as well as the chart that module that CSS and final one is going to be the country picker country picker that JSX as well as the country picker that module that CSS okay great now inside of the cards let's create a basic functional component so import react from react and we can also do const cards which is going to be a functional component and inside of there for now we are just going to return an h1 that says cards just like that and of course export default cards just to save some time i'm going to copy this and paste it across all of these different components so charts but the only thing that i'm going to change is going to be the thing right there so instead of cards I'm going to say chart and finally the same thing here but instead of cars is going to be country picker great and now we can close all of these files and let's input them inside of the app so we can see them nicely we would need to do something like this import cards from and then dot slash components slash cards and then slash cards and we need to do this for each component so cards this is going to be chart and finally we need to have a country picker right now I'm going to show you a neat little trick we don't need to have imports like this as you can see there's a lot of repetitive code we are many times specifying where do we want to import from what do we want to import and then imagine if you had six nine twelve different components it would just clutter up your fjs right so what we can do is we can have just one import file like this import and then in here has named imports or named exports we can put cards chart and the country picker from that slash components that would be great wouldn't it and now we can just keep on adding different components but right now this wouldn't work so what do we need to do to make it work well we need to go inside of the components and just create one index a J's file index dot JSP Lizz going to take all the components cards charts count your picker and so on and it's going to export it from the components folder so what do we need to say in there bear with me the syntax is a bit weird but mostly I just copy and paste this so export default as and then we have cards so default as cards the name of the component from that slash cards slash cards okay and we copy this and do it the same thing for two other components so chart and then finally country picker okay with this in place if we now go back in the app in here we have no error and these components are indeed imported like this so we just have the name of the components and they're coming from the components folder because indeed in there we have the index which is expert in them and this makes our code much more readable now let's use these components so inside of here we are going to say cards then we are going to have chart and finally we are going to have country picker all rather country picker is going to be above the chart okay great what else do we need we can also apply some styles to the app J yes so I'm going to go ahead and say import styles from that slash app that module that CSS this file doesn't exist yet but let's create it so right there in the SRC I'm going to create a new file called pap that module that CSS and inside of there we can just apply some container styles and stuff like that right now I just gave it a background color so to the whole app let's just give it a slight background color which is going to be RGB and then 250 250 250 so it's almost white but it's barely visible is grayish then we can specify a container and it's going to be just a simple Flex container which is going to have a line items of center and of course the justify content of center like this that's all that we need for now so if we go back into the app j/s and now the body is being applied immediately but inside of here we can say class name and if you never worked with this modules it's a great practice you really should enforce that but if you never work with that you usually did something like container and that would immediately be applied in this way you just have to put this as I Namek and then say styles that container and this makes sure that you don't have any interference with any other CSS file across your whole file system great so now that we save that we can go and take a look how the app looks right now nothing special right but it's great that we already have our components in there now we can actually focus on implementing the logic rather than always worrying about the project structure I usually prefer working with functional components with hooks but whenever a component gets too complicated I just switch back to the class there's so many benefits to functional components and hooks and we should all use them but whenever we are dealing with some asynchronous data and stuff like that with multiple use effects that we would have using the hooks it's just a bit easier to bring it back to the class-based component so all the other components are going to be functional with hooks but just the app is going to be class-based just because it's easier right now we can focus on the biggest part which is creating the API calls so inside of the SRC we're going to create a new folder called API and then inside of there we are just going to have one indexed at JS file index is great and now inside of here we can make functions that are going to fetch some data that we need so of course we need to first import Axios from Axios Axios is used to make API requests and then we need the URL of the API it's going to be like this I'm going to paste it into the description so you can as well copy it if you want to play with it yourself so the first thing that we're going to have in here is going to be a function called fetch data so fetch data and it's going to be an error function just like this inside of here we are going to have an asynchronous function and we are going to use the most modern way to deal with asynchronous data and that is async await it deals with promises in the same way that that then and that catch does but it's much easier to both read and write so inside of here we are going to have a try and catch block try is going to be executed if the fetch is successful and otherwise we are going you get to the catch block so inside of here we can get the data so let's first get the response from the await and then Axios that get and then we just get the URL and we can just do console dot log response to see what do we get back and what data can we play with of course we need to call this function currently we are not using it as you can see right there so we can export it so export counts fetch data and with that out of the way rather than cons log in the response we can return it so let's return response and now we can call this function inside of the API yes so we have the fetch data function which is an asynchronous function returning a response from the API to call the function we first need to import it so that's going to be import and then curly braces because it's a named import fetch data from that slash and that's going to be API and that's it whenever you have index files you don't need to specify index it's it's just like that so you can just say the folder name it immediately goes to search for index file okay great and now what is the best place to fetch the data inside of the class-based component let's say well in the component did mount so in here we can say component did mount and inside of there we can make the request to the fetch data so let's say Const data is equal to a weight of course we need to wait because we are dealing with asynchronous functions and we are going to await the data that that is going to be returned from our function but for this to work the await needs to be wrapped in a function that is asynchronous so how do we make a component that mount asynchronous usually you put just the async keyword in front of the function but with the component did mount it's special you just put it in front of it so it's built in asynchronous component at mount and finally in here we can do console dot log and see what data is now if we go back into a and if we didn't mess up anything you can go into the inspect and then the console and we should be able to see our data and we do I'm going to make it a bit larger for you so that's the object that we get back we get the data we get the status we get the status text headers config but we are not worried about any of these we just need raw data so in here that's inside of the data object confirmed recovered that's daily summary daily time series we have everything in there so one thing that I would like to do right now is just take the things that we need we are not going to need all of this we are not going to need daily time series I noticed there's a lot of empty ones so it is zeros they don't have a lot of data so we can just focus on main ones confirmed recovered that's daily summary or something like that so we can go back inside of the API and configure this response however you want so the first thing that we can do is we can just get the data so that would be something like response that data there is an easier way to do this and that's with the structuring so we can the structure the data from the response we get it like that and now we don't want to return the response we just want to return let's let's call it modify the data Const modified data and that's going to be an object and in here we're going to take only the parts of data that we need and in some different API calls which we are going to create just below we are going to fetch some other data but for here we're just going to need confirm and then recovered that's and the last update so how do we populate this well we just put the data and then data that confirmed that should be it and then we can do data that recovered data that Betts and then we finally have data that last update of course with commas afterwards and then finally we can return just the modified data there's an even easier way to do this as with the structured data we can destructured all of these properties from the data we just do that by putting another column and then another square brackets inside of there we can say what do we want to do structure well confirmed recovered debts and then the last update so we structured everything in here let me make it a bit bigger for you to see right there ok and now we don't have to specify and repeat ourselves and save data every time we can just have it like this but this is not all the JavaScript objects working away if the value and the key have the same name if you omit the latter so if you omit the value it's immediately taken as you can see right now it is being used since this is yellow if you remove this or put it like this let's see confirmed yeah you can see now it is not highlighted so a confirmed is declared but the value is never red so if you bring it back to confirmed you can see it's used again but if we just remove everything you can see it's also used you can have it like this it's a syntax that's a lot easier to read and write and since this is an easy object right now we can just have it in one line also we just created here and immediately use it down there so we can just take the value and immediately return it without having to store it in another object that's it now if we go back into the app that yes we are getting the data and cons of logging the data again let's see what do we get back as you can see now we get the object with only the data that we need reconfirmed recovered debts and last update that's great so now what do we want to do with this data we are not going to display it in the app that yes because in here we have special components for all that we are going to want to display it in the cards so how can we bring the data from this little scope of the component that mount how can we bring it to the cards what do you think what we can do is can set it the state so we can say state and in last video many people asked why didn't I declare a constructor it's it's completely okay to declare a constructor but reacting decided that is a lot of unnecessary code and if you just write it like this the constructor is going to be immediately constructor in the backend although we cannot see it but you can just declare the state like this it's a bit easier to again read and write so if we have it like this what are we going to have in this state well we can create an object called data and at the beginning that data is going to be just an empty object until it is populated we can populate that data in here this that set state of course and then inside of there we set data to be equal to data of course we can remove the latter one but what I prefer is actually having them both because what sets States is just easier to see what we set so we can call this fetched data makes a bit more sense and then put it right there great now that we have the data we can pass it as props to our card component so we can save data is equal to and then we can either say this that state that data but the better way is to destructured at the top so in here we can say Const and then take the data outside of this that state and then we can just say data now we can go into our cards component and in there we can see what data do we get in here through props so inside of here let's just console OGG the data so we can see what are we getting you can see we are getting two different data objects first one is going to be empty because data is not fetched already the cards are going to be three little containers or cards that show the number of infected people the number of recovered people and the number of deaths you can see them right there so how do we do that in this project I use material UI it's going to help us with more responsiveness and it's going to help us with not having to do so much CSS ourselves we're just going to use material UI components so I completely forgot you can go ahead and open the view and then determine it one more time so we can install the material UI again with the ctrl C you can stop the current application from running and then you can run NPM install - they're safe and that's going to be at material - UI and then forward slash core you can install that and you will be you will see we'll be able to use a lot of different components from that if you never use material UI you can see right there react components for faster and easier web development build your own design system or start with material design it's like bootstrap but it's more sophisticated and it's better suited towards react in here we'll get a lot of different components so we can for example go right there components and the one component that we're going to use for cards is going to be this card little thing right there as you can see we would have to worry about a lot of code of creating this card with CSS and HTML or JSX rather but with the material UI we can easily get this card out of the box we just have to use the card component so if you take a look right there we need to import the card and then this is what we will be using okay but now we're going to implement that from scratch using material UI now that this is installed we can again run the NPM start and close the terminal it's going to be left running and now we can implement our cards we're going to first import something from material UI and that something is going to be card card content typography and finally in grid so these are the things that we'll be using from material UI for creating these cards so we import that from and then we say add material UI for a slash core great so the first thing that we can do is we can wrap this into a container so we're going to have a div which is going to have a class that's going to be equal to container class name is equal to styles that container and we forgot to import the styles so in here I'm going to say import styles from that slash and then remember what we have cards that module that CSS of course we need to create the styles for container it doesn't exist yet but let's first create basic JSX structure inside of there we are going to have a grid that's going to be a type of container so we need to have one grid that wraps all the other cards right this grid is going to have a property off container and then also a spacing equal to three it's just going to space out cards and we can give it a property called justify off center which is going to just justify the content Center for all the items inside of it then we can have one specific grid item so grid with the type of item and then inside of there the component for that item is going to be card so card component is going to be our grid so we can style them nicely and is going to get that card paper like look it like it's hovering over the browser great then we can apply some styles but we can leave that for later inside of the card we are going to have card content and inside of there we are going to have typography typography material UI is used for texts so it can it can be a paragraph it can be having it's just more styled than the basic heading or paragraph that you can have so we're going to say color is going to be equal to text secondary and then we are going to have gutter bottom which is just going to provide a nice padding on the bottom and our typography is going to say infected so the first card is going to be four infected people then we're going to have yet another typography below this typography is going to have a variant of h5 so it's going to represent an h5 and inside of here we are going to have the data so I'm going to say real data of course we are going to have to fetch this from API but we already have it in the props which is going to wait a bit and do the structure and then implement the real data below that we are going to have another typography and this one is as well going to have a color of text secondary and it's simply going to say the date so how are we going to get the date of course we are going to fetch that from the API so real date we are going to leave that for later and then we're going to have just one more typography in here bear with me this typography is going to have a variant of body 2 that's that's the material UI variant and then it's going to say anything that we wanted to but it can say number of active cases of covet and then 19 that's it this represents our one card and let's save it and see whether we have any issues and we indeed do get our real card in here it has real data real day but it doesn't look so nice just next to this country picker in the chart we need to fix this but for now let's just add two other different cards it's going to be for the number of recovered people and the number of deaths we can grab this grid don't take the container we can just grab the inner one the grid of item and we can paste it right here two more times at the end of this video maybe we are going to refactor this by creating a dynamic map just so we don't have to three times have the same things right this is not good for the second card we are going to have recovered in here we can put number of recoveries from copy 19 and this can be deaths and the number of let's say caused by coffee 19 okay let's save it and see how it looks okay we do get three cards doesn't look so nice yet but we are going to add some styles and implement that doesn't look so nice yet but first let's catch the real data and then we are going to style it for the last time let's see how our props look like and let's take data from them so if we open the inspector and then the console we should be able to see the object that we get in here we get the data object inside of there we get the confirmed but we need to go one level deeper to get the value of confirmed of course we are going to destructor this so we are going to take confirmed as well as they recovered and the deaths of course we need to take last update I think let me see last update yeah last update as well confirmed recover and that's are still not real values we need to say confirmed and then we need to say that value this is going to give us the real value of confirmed cases if we save that and go back oh you'll be greeted with a nice little error it says cannot read property value of undefined so how to read that error cannot read property value okay that's okay of undefined that means that the confirmed was undefined so how can we check whether the data was not yet fetched do you remember when we first can't lock the props you could see that the first time the object was undefined and then only the second time it was fulfilled so in here we can just add an if statement and say if there is no data that confirmed so if it doesn't exist of course if there is no confirmed there is also not going to be recovered or deaths so we can say if no data that confirmed we don't have data here with the structured data so you can just put confirmed and if no confirmed then we are going to say return and then loading just like this and then just below we have our normal return so let's go back and see whether that works okay you can see loading right here but we are not getting the data which is interesting let's try to debug it let's do console that log right there and let's try to cons log to confirmed okay first we get undefined and then the second time we get undefined and that was my bad we don't have these as props if you go back into the app j/s you can see that we passed only one prop and that prop is the data so first we need to destructured the data and then the structure or all of these things outside of the data so it looks something like this we first have our destructuring of the data and then another destructuring of all of these things so if you save that and now go back we should indeed see loading and then this is the number of infected people but we said that there is going to be a counter so the numbers are going to move so how can we implement that well if you remember at the beginning we installed a dependency called count up and we installed it from react and then - count up so we can use that component and it's going to make wonders for us and in here we're going to replace the value with a component called count up and that count up is going to be a self-closing component and it's going to have a few different properties first one is going to be a start it's going to start from zero so we can just say start is going to be equal to zero the second thing it needs is going to be the end and the end is going to be the value that we use just now which is confirmed that value just like that and then we also can specify a few more things we can set the duration for example 2.5 seconds is okay and then the last thing that we can do is specify the separator the separator is used to specify how do we want to separate our number since the numbers of in fact people are large we can add a comma in between and this is our component if we now go back and check it out and you can see the number started from zero and are now loading that's great so now that we know what goes inside of here we can also collapse that into one row and we can leave it like this so this typography has a bit more characters so we can leave it in a new line great in here we get the real date but where is it coming from from last update right with the structure data from the data coming right here so if you say last data and then just try to use that let's see what's going to happen okay we get this weird format but how to make it a normal human readable format in here we can make a new date from that so we're creating a new date object and then we need to call that to they string if we call that two days string on a new date object is going to return it in a human readable format so if you go back you can see Thursday April 2nd of 2020 that's great and the numbers are loading so we have the first card up and running besides the styles but let's first do the data for all the other two components so I'm going to copy this typography which contains the count up and then I'm going to replace it with here so we can just replace the real thing ok real data and then the typography for the date is going to be the same so I can just replace it right here and right here but of course we don't want confirmed here we want the recovered and then in here we are going to have deaths just like that let's save it and go back to see how it looks okay loading and then the numbers are loading okay we have that and now let's apply some styles so we imported the styles from styles but now let's add that we have the container we are also going to have styles for each one of these cards and we are not only going to have one style we are going to have more people styles for each grid so the styles are going to be as follows class name and now this is the question how we do multiple styles with using the module that CSS we cannot do something like styles that test and then styles that test one this is not going to work this is not proper syntax well you might think putting it in an array is going to make things work but again this is not going to work so what can we do there is an external module called class names and we can import it the practice is just to call it CX so like last names I guess from class names like this old over case and now instead of having it like this in an array we can just do C X and then put that as a function call that's a method and this links our classes together and now we can apply multiple classes so each card is going to have a style of card and then it is going to have a class name of either infected recovered or deaths so in here we can put infected one last thing that we have to add to this grid item is going to be the size for mobile devices so on mobile devices that's going to be the screen extra small we want this to take all 12 spaces of the weather so we wanted to take a full width of the screen but on medium and upper devices we wanted to take only three spaces out of 12 and we are going to copy this now and paste it for each specific grid card right there red card and the only thing that we have to replace is going to be infected with recovered and then finally the infected with dots just like that now we can go back to our CSS first thing that we can do in here is the container so that container before I meant to do like display flex but it looks like we only need a margin 50 pixels on top and bottom and zero pixels on left and right and then for each card we want to give it a margin on left and right so that's going to be zero top and bottom and 2% on left and right since we are dealing with material UI and we are setting the styles like this we are going to need to use that important that's important to make this work with material UI you sometimes need to do it if you're not doing inline styles okay and now we are going to add a specific class for each of the let's say class categories so it's going to be infected it's going to be border bottom then pixel solid and then we are going to say our GPA this last one is for opacity and it's going to be 0 0 255 this is the pure blue color and then we are going to give it a 0.5 opacity it's just going to tone it down a bit now we're going to copy this and paste it two more times one time it is going to be 4 recovered and one time for that and we're just going to change this so we're going to have blue 4 infected green which is here you're going to have green 4 recovered and then the red 4 deaths so just like this and then 255 that's it that's all that we need for now and if we go back you can see if you refresh the cards look great the count up is working and that's it for the cars of course we need to style this with the country picker and the chart chart is going to be a really interesting part I think that's the part that we can move on next for the chart to work we need a second part of our API so we're going to close everything and just have the API ready in here just below we are going to have a second function that's going to be export Const and then we are going to call it fetch daily data because we need the daily data for the chart of course it's also going to be an asynchronous function and inside of there we can also put a try and catch block before I did this with that Ben and I catch and it's so much easier to do it what async/await so I'm really glad that I can show you in here we're going to have the same thing as with it before so const response and then that's going to be equal to a weight Axios that get and then we need to specify the URL we have the URL here but it's not only that we are going to get the second part of the URL so we can make a template string like this and it's going to be forward slash daily this is where we will get our daily data from we get the response from the response we can this structure the data and then finally we get almost the same things back but this is going to be in an array so let's go to cons log it in here console log the data to be able to see this console log of course we need to call the function we are going to call it inside of the chart right that's where we should actually get the data so inside of here we first need to import react as well as the use state and the use effect hook because in here we are going to be using hooks so use state and use effect inside of here we can specify the state the state is going to be daily data and then the second part set daily data so once we fetch the data we are going to set it to the state using hooks equals to use that state and in here you provide the initial value which is going to be again an empty object so this is how you state works maybe some of you didn't think I'll do that before in here we get the state field it's the same as we had something like state is equal to daily data and then we have an empty object so this would be the representation of this in a class-based component but in here we immediately get the setter method for it we don't have to worry with this that's at state okay and now just below we are going to have use affect method which accepts a callback so you can have use effect and then a callback down there in here we are going to encounter a problem that I mentioned earlier use effects with asynchronous functions are a bit hard to read so we cannot make it something like this a sync use effect doesn't exist and in here as you can see the reactive and gives us a message effect callbacks are synchronous to prevent race conditions put the icing function inside so we cannot do this we need to create a new function so Const for example fetch data or fetch daily data we cannot call it like that because we're going to have to import the API so let's do that import and then a named import fetch daily data from data slash and then data slash API okay and then we can call this for example fetch API is going to be equal to an arrow function async 1 of course so in here we can use async capabilities in here we can immediately do Const daily data which is going to be equal to a weight and then we need to fetch the daily data of course the return of this function is going to be a promise because it's asynchronous and then with the evade keyword we wait for it and then put it in a variable we don't even have to put it in a variable we can immediately call our set daily data and then pass whatever is in there too that set daily data this means that we have daily that data populated right here and we need to call the fetch API function like this of course we can make this a self calling function but this is also okay now the daily data is populated but we are never using it so where are we going to use that daily data we're going to have two different charts so I'm going to create a constant for each one of them we can have bar chart which we are going to have later for each specific country but our line chart is going to be the one responsible for the global showing of the data it's even better because we have the daily data on at the global scale so to make this work we need to import the line chart from the reactors I so import then line we can do the bar while while we are here from react charges - it's the second version and while we are here we can also import the styles from that slash chart that module that CSS that's it I don't think we need anything else great now in here in the line chart we can use that specific chart so how is this line chart going to work well it is a component we imported from the react charge is the only parameter that we need is going to be data we do this to make it dynamic but we add another pair to make it an object so the data is going to be an object it's going to have a few properties labels which we are going to leave an empty string for now and also data sets which are going to be an array of objects so we're going to have two different objects now we need to input all of this data and that can get complicated so let's start piece by piece first of all at the beginning the same thing as before when the thing is initially load we are not going to have data initially loaded so what we can do is we can say if daily data and then the first thing so that's going to be the first day is available then we are actually going to return that line chart but if we don't have the first day of the daily data available that means that none of the days are available and the data is not fetched yet in that case we are going to return now now after we call this fetch API we can do that right here let's console.log the daily data and we should be able to see what do we have in there okay I just notice that in here we have the data which is correct but in the API we have fetch daily date that should be data so great for you if you notice that thing let's go back and check whether this works now I noticed this little error right there and that means that for the react charges to work we also need to have charges installed so you can open the dermal and then we can install NPM install that they're saved chart that Jas after we install this this is going to make sure that our charts can run so this is just a reactive wrapper for charts yes but to make this work we need to have charges installed as well okay great so now that this gets completed we should be able to see our daily data okay that's it and then we can run NPM start and again close this terminal and wait for the browser to load our daily data okay we have some errors but the most important part is that this works we indeed do get a console log that contains 71 past days of data the things that we are going to need from here are going to be total confirmed and then we have of course deaths and recovered people so that's great now we can use this daily data in this chart so we just need to pass it in here and I'm just going to show you the way how you can do it so let's first do the labels the labels and the data sets needs to be an array so let's first get all the dates from the daily data and display them as labels so inside of here we can look through the daily data in here we can immediately just the structure the date and then simply return that specific date return date now this is a map and returns an array of all of the dates let's see if that brings us something or we still have an error okay we still have an error we're going to worry about that later but right now let's first do the data set data sets are the most important part so let's first do them you might be wondering why do you have two data sets and not three so four infected people four recovered people and four deaths unfortunately the API doesn't provide daily data for recovered people it only provides to confirm and the deaths that's unfortunate but we need to do what we can use from the API so in here we are going to have the data and that's going to be pretty much the same thing right there but we are not going to use the date rather we are going to get the confirmed the second thing that we need is the label it's just simply going to say infected also we need a border color which we can specify with let's say hexadecimal value I found that 3 3 3 3 & FF works really well and then we can say fill true which is just going to fill the space below that chart great and now we can do the second thing we can copy this data set right there and replace the empty object and now other than confirmed we are going to have deaths so in here we have that's the border color is going to be red and we are also going to give it a background color which is going to be an RGB a the same one that we used with the card of death so it's going to be an RGB a with 255 0 0 and then for 0.5 so that's just going to show the area below the border color that's going to be background background color like that now our line chart is done and we can display it right there so instead of the chart we're going to have let's say a dip yeah we were going to have a dip and that div is going to have a class name of you guessed it container so style is that container and just below that in here we can put our chart just like this and in here we can display our chart that's going to be line chart the only chart that we have for now we are also going to create a bar chart I guess something is still broken so we need to go in the browser and check that out cannot read property 0 of undefined in the line chart so daily data 0 is undefined that means that in here we have some problems so let's one more time console.log the daily data I really like doing this debugging slide so I can show you how to solve the issue yourself okay let's refresh and see what do we got you can see right here that we get an empty object and of course we cannot get zero property of an empty object daily data is an array we saw that before we are looping through it so inside of here it would be more correct to put an empty array and then that is going to enable us to more easily test if there are no values now instead of this we can just check daily data that length since it is an array is not equal to zero if it is not equal to zero that means that there is something inside of there and then we can represent a chart we can even make this shorter by using truthy and falsy values we can leave only this why is that so well if the length is zero so if the array is empty it's going to be zero which is by default for C and if it has any other number of elements like three 571 it's going to be true T and then this is going to show which is great so now let's say after a bit of debugging I just found out that our console logs which seem to be populated with data weren't coming from here they were coming from here instead of returning the data all this time we just can't so logged it and we don't want to do that we saw that with the data there are a lot of stuff so in here we have total confirmed main line China other locations all the other stuff we just want confirmed and then did that's and the date that's it that's all that we need we can go back in here and we can do really similar thing to the one that we did right there we can get only the data that we need and only return that data but in this case the data is an array so we need to loop over it so let's say for example Const modified data is going to be equal to data that map so we want to map over it we're going to have daily data inside of here and for each one of these we are going to return an object so how do we do an instant return of an arm we first put parentheses and then an object like that so whatever is in here we are returning as an object we want to have confirmed which we are going to set to daily data that confirmed that total we are also going to have deaths which is going to be equal to that's the daily data that that's that total like that and then the date which is going to be equal to daily data that report date that's it like that and now we have the modified data and we don't want to console.log it as with it before we want to return it returned modified data just like this now it is going to be right there it is going to be fetched when initially it is fetched is going to be 0 this check is going to make sure not load the chart without any data and then if there is data that this chart is going to be loaded let's go back and see whether that works it looks like we are still getting some errors daily data is not a function let's see what's happening here and I just noticed the daily data needs to be a map so daily data is not a function it's not a method we need to say daily data that map to map or it ok now with that out of the way if we save it and go back let's see ok we finally get our chart it's right there and if we save that and go back you can see the chart right now it's small it's on the side we need to make it in the middle and much bigger but that's it we get the data so let's immediately place it in the middle and give it some size so that we can see how well the data is really showed with the chart the only thing we need to do to fix that is go into the app that modular CSS and then add Flex direction of column that's going to put it immediately below the cards as you can see right there and now we just need to make it bigger so inside of the chart that we import styles with it and now we just need to add the styles so inside of here we just needed that container and display flex justify content center and finally with of 85% of the whole screen this is going to fix our what and that's it now we have the cards you can see them right there they're styled and these numbers are incremented as soon as you load the page just below that we have the color picker component which we didn't implement yet and then finally we have the chart the chart was initially just an array with 71 element but in here we nicely visualized it you can see the exponential curve and unfortunately the number of deaths as well that's it now we can focus on making the counter picker work and making the bar chart for each specific country let's focus on making the country picker so we can go inside of the country picker component and we are no longer going to have just the simple h1 right there in this component we are also going to use both use state and use effect hooks just like that and also we need to import some stuff from material UI that something is going to be native select which is going to enable us to select a country and then deform control just like that and then from again add material UI core just like that great now inside of here let's use these components we imported from material UI first we are going to have a form control just like that and inside of there we are going to have a native select like this then inside of the native select there go different options so let's say we have our first option which is going to be global with a value of Global's so this is a blueprint of how our options should be but then again we are not going to have 100 or 1000 different options for each country right now we are going to fetch them from the API and then we are going to loop over them but for now let's just add classes to deform control class name equals to let's say styles that form control and that would be it for styling and we just need to import styles from that slash and then as always country picker that module that CSS and now we'll be good to go to fetch the countries from the API well how does that need to look what do we need to get let's go back into our API and we're going to see that right now it's not going to be complicated below expert Const veg daily data we are going to have export Const and then countries that's going to be again an async function and it's going to have a try and catch block so try catch in here we can just do console log error I forgot to put that in there as we always do in the try block we are going to have a Const off response which is going to be equal to a weight and then axioms that get and in here we need to specify the URL again it's going to be a template string that's going to say URL but it's going to be forward slash countries just like that now let's see what are we going to get back from that so console log response of course we need to call it somewhere so now we are exporting it let's go into our country picker and let's actually call it so we need to import it import countries from dot slash dot slash API if I'm not mistaken that should be it and now again we are going to have use effect which takes in a call back inside of there we need to create an asynchronous function Const fetch countries for example async function instead of here we can await for these countries but we are not just going to set them to a variable we're going to set them to the state so inside of here we need to say Const and we can call it fetched countries and of course set fetched countries that's going to be equal to use state with an array right there because the countries are going to be an array so right now we can finally do set fetched countries and what is this going to be equal to well I'll wait countries in this whole time will still didn't see the console.log coming from right here from the API so we can finally call this function fetch countries just like this and there is only one thing that we need to do inside of here we need to provide a second parameter to the use effect it says if present use effect will only activate if the values in the list change so initially without this this would just run endlessly but if we put set fetch countries in here it is going to change only when said fetch counters change that's going to enable us to pick different countries with that out of the way we can go to our index j s and we can go to the browser to see what the response is in here we get the data with the status headers config but again we just need a data inside of the data we have the countries in here that's an array of 181 country in an array and for each country we have the full name is so to name with two characters and I saw three name with three characters the only thing that we are going to want from all of this is just an array of countries with a full name so in the API let's do just that in here we have the response but of course we are going to the structure the data out of it and then we are going to the structure countries out of the data then we can map over those countries so return countries that map and for each country let's just close this properly we just want to return its name so we don't need is o2 and I so three so just return country that that name for each specific country before we go out and check how the data looks like I just noticed a little error we have fetch daily data we have fetch data and all of these are asynchronous functions this is an asynchronous function as well so let's call it like so fetch countries and immediately if we go back to the country picker you're going to notice an error this indeed needs to be called as a function so in here we're going to call it properly fetch countries and just like that we are going to call it but these two functions cannot have the same name because this would be calling itself so we're going to change the name of the outer function to fetch API just like that without out of the way let's finally console.log the fetch countries which are now in this state right here okay if we go back as you can see right there we have an array of 181 country with just the country names exactly as we need them now we're going to loop over them and create a picker for each one just below this option we're going to create 180 one more option we're going to do that dynamically by mapping over the fetched countries so fetched countries that map in here we get the country and then for each country we are going to want to create an option that option is going to say country so it's going to be the name of the country also it's going to have a value of that same thing so it's also going to have a value of country and there is a react rule that we also need to provide it a key whenever we are mapping over something in react and that key is going to be equal to I which is just going to be index we get that index right here as a second parameter to the map and with that out of the way if we now remove this console.log and go back we should see a picker with all different countries and as you can see right here the options are here we just populated 191 option in one single line that's great we won't be keeping the state of the chosen country in the country picker rather that's going to be in spirit component the fjs to make that work we need to go inside of the AB GS and then in here we need to add a country which is at the beginning going to be an empty string right there now we need to create a method that is going to change the state of that country so in here we are going to call it handle country change which is again going to be an async function it is going to take in one parameter which is going to be country of course and inside of there we are simply going to well at least for now set the state right so we're going to first fetch the data and then set the state but let's first try to get this country to here so console.log country how do we do that well we are going to pass this method as a prop to the country picker just like this so country picker and then it's going to be equal to handle country change but we need to add this in front now our country picker can make use of that coming through props so in here we are going to immediately the structure it handle country change and then on change on the country picker we're going to set that as the parameter of that function or as an argument rather we are going to have a default value which is going to be equal to empty string of course and then we are going to add that specific on change handler in there we always have a callback function which of course has an event and then we just want to call this function coming from the props handle country change and then we want to pass whatever the event is equal to so the data the chosen country and the data for the country chosen is inside of the event that's target that value I just noticed I have a big diaper right there it's just handle country change which is equal to this that handle country change if we go back now for example choose Endora we indeed do get that printed out that's great because we have that in the app in the app we can now make additional requests we are going to want to call the API and we need to pass that specific country so we still need to make that part of the API work we need to go back into the API and that's going to be in the same call as we have it right there this fetch data but how are we going to make it dynamic so first of all we need to create something called let's say changeable URL right there and we are going to set it equal to the URL at the beginning but then we need to change it so we know now that this fetch data is going to receive one parameter which is going to be country and we are going to see that right here in the app because we are going to want to call the same fetch data in the same way we called it in the component that mount initially we want to call it right there but this time we want to pass the country that's why we needed to set this parameter of country right there and now we're going to see what do we need to do with this changeable URL so if there is a country so if it is full we are going to set the changeable URL to be equal to and now we're going to build the URL that goes URL forward slash countries the same as we had right there below but this time we need to populate it with one more thing and you guessed it does the country great the thing that we get back from this is going to be the same thing that we need to get back for this it's going to be completely the same but this time we are going to pass the changeable URL instead of the URL so if we are calling this without any parameters without the country initially as we are calling it right here then the country is going to be equal to undefined that's false II and we are going to call it with the same initial API but if there is a country then we are going to change this URL we are going to populate to the country and then this data is going to correspond that specific country in here we can again add console.log error if there is one so now let's go back to the app j s and console log that data so console log fetched data great let's see whether we are getting any and then we can set it to the state of course so if we go back okay we don't get anything because we didn't choose anything now if we choose for example let's say Belgium we indeed do get an array of values for that specific country of course it needs to be reflected right here and right here in the chart that's the exact reason why we needed to have the country in the state of the app because app is the parent component of both cards country figure and the chart now we can pass that specific country to each one of these to the chart to the cards and so on now that we've gotten that fetch data we can do the same thing we can set it to the state of course you can see this code is repetitive so at the end of this video and we may clean this up we just make an external function and then call it on the component dip mount and on the handle counter change great so now our data is going to be inside of this data but we need to update the country as well so in here we are going to add country is going to be equal to country that we are fetching right there from this parameter great now where do we want to pass the data well the data is updated and it is actually being passed in real-time in here in the cards we are already passing data that the initial data is the same data as the data for each specific country so possibly this will work right now if we just save it and go back right now we have the global data right here if we change for Angola for example that data indeed gets reflected Bahamas that's it our cards work now of course we need to pass the data to the chart as well so data we can also pass the country so that we know for which country is the data for and great of course we need to destructure this from the state so in here we're going to have country of course that's coming from the state now we can go back to the chart and that's going to be the final part of this video we need to create the bar chart that's going to show final data or the current data for a specific country in here in the props of the chart we are getting the data and the country so that's great again in here we have the daily data that's only for the global chart but for the bar chart we are going to use this data right here so let's create our bar chart it's going to be the same as the line chart so constant our chart and then it's going to be equal to some JSX again we need to have one checked so we are going to say if data that confirmed so if the data exists then we are going to show the bar chart so in here we have the bar chart and if it doesn't exist we're going to return now that's it now we need to input all the data for our bar chart it's going to be a bit different from the line chart so the thing that it needs is of course the data that's one property which again we have double square brackets one for making the code dynamic and the second one for opening an object and the second thing is going to be options options is again going to be equal to the object in options we are going to have legend and that's going to be equal to an object or display equal to false we don't want to display a legend we are not creating a map and then we can have the title which is going to have the display of true and it's going to have a text of a template string which is going to be equal to current state in and then in here we get our country which is coming from the props of course great now let's provide that data we're going to first have the labels in here we can make static labels we know that there is going to be only three columns so we can have infected recovered and that's just like that and then we have our datasets we're going to have an array of only one object which is going to be our single data set and inside of there we're going to have a label it's going to say for example people so the number of people it's going to have a background color which is going to be an array so in here we need to specify a background color for each one of these infected recovered and deaths that's going to be the same thing that we had in the cards so if you go into the cards module we have this RGB a blue RGB a green and then RGB a red so we're going to copy all of these and just paste them right there into the chart but we need to make them strings so we are going to have this one and then these two as well but we need to make them strings so just like these that's it we got our background colors and the most important part is the data so comma data and the data is again equal to an array inside of that array we are getting the data the data is coming right there from the props we are passing it right here on line seven for me and it's coming from data that confirmed data that recovered and beta dot deaths we are going to destructure these so we don't need this data right here nor here nor here and we also don't need it here we just want to check for now from the data that we are getting in here in the props we can the structure that and we can take confirmed that's and the recovered that's it now our bar chart is not being used anywhere so how are we going to display bar chart if there is a country chosen and a normal chart a line chart if no country is chosen we can just make it ternary so we can say if there is a country then show the bar chart otherwise show a line chart that's it now if we go back okay I need to spell this correctly so bar chart bar chart and great if we go back now we should be able to see our global charts right here and if we choose a country we can see our bar chart but the data is not being properly displayed so let's see what's wrong with that the first thing that we can do is we can console.log be confirmed as well as the recovered and the deaths so let's do that to make sure that we are properly getting them right here if we do that we can notice a huge flaw in our application and you can see we are constantly getting more and more and more requests and that's one little mistake right here so in the use effect we are going to put an empty array this makes the use effect behave like a component did mount so it only happens once otherwise it was just going and going and going endlessly which was making our application slow right now we get it only once so right here and right here for the updated one now let's choose a country so let's go for Australia and we indeed do get values but they are nested being an object with the property of values so that's where our numbers are so right there we have to go in here and we need to say that value for each one of these just like that we can now test it out if you go back you can see that we indeed do get the global chart and the global numbers but as soon as we change the country for example to Argentina you can see our numbers are being populated and our bar chart is being generated that's great right now we need to add only a few more styles a few finishing touches we need to add an image right there and we need to make it mobile responsive let's see how it looks right now since we are using material UI it already looks really really good we specify that each card is going to take full width on mobile devices so that's exactly what happens but we are just going to add a few more finishing touches let's start doing that right now first thing that I notice is that we didn't add any styles to the color picker so we can do that right now we just need to set this form control form control we are going to give it a width of 30% and also a margin bottom of 30 pixels and we need to say important because we are adding this on a form control element and unfortunately we are not styling this in line so we need to specified okay in the country picker do we indeed have that style right there we do that's going to be it regarding that let's see if we need to add some other classes in the app itself so inside of the fjs or app that CSS we need to add that image so let's do that right now I'm going to create images folder in the SRC so a new folder images and then I'm going to drag and drop the image we are going to use I'm going to leave the link in the description so you can use it as well we cannot see it's right here but you're going to see it when we render it so let's add an image first in here we're going to use an image but what is the SRC going to be so with react we need to import all of our images and we know that it is in the images folder so we can do just one thing import and then we can call it for example Corona image from dot slash images slash image that PNG at least that's how how it's called for me and then in the SRC of that image we can simply provide that path and our image should be showing let's just add a few styles so we're going to say class name is going to be equal to styles that image and it says that we need to provide an alt tag that's for screen readers we're going to say call it 19 just like that now we are ready to go providing the image some Styles we need to go to the app that module that CSS we are going to target that image so that image with lowercase letters and it's going to have a width of 370 pixels as well as the margin top of 50 pixels let's see how that looks looks like I have one small typo right there images and then image that PNG if we go back we should indeed see the image and here it is okay now we could also make this a bit more responsive so I'm going to add a media query so media and let's say just max width of let's say 770 pixels so this is going to be both for tablets and for mobile devices for that we are going to give it a container a margin of 0 and then 10% off left and right and we are going to make the image 100% so image width is going to be 100% that's it let's see what else can be styled and how it looks right now so if you go back everything's good on the mobile devices that's good the images now we have some padding so on left and right and we also have the image right there which is taking full wet great let's now add some space between these cards so that can be done in 2d cards that module that CSS and we need to specify simply a margin so we are going to do the same thing we are going to copy the media from right there and we are going to say simply that card margin two percent so that's on top and bottom and zero on left and right and unfortunately we need to say important because this is a material UI element if we do that and we go back you can see we have some slight little padding right here what else can we do we can make the chart a bit bigger on mobile devices so we can do that in the chart that module that CSS again copy the media query and inside of here we're going to make that container span 100% of the width so if we go back and refresh now we can see the chart is just a bit bigger it doesn't look all that good on mobile devices but if we make it landscape it looks good so we have that for mobile devices tablet also looks great and our basic version let's refresh to see those numbers counting up hopefully more recoveries are going to be here but yeah in here we get our chart let's see for Andorra for example this is a bar chart that we were expecting Bahamas ok works well I just noticed one small issue that we have so if we go to the country picker and choose a country for example Australia and then if we go back to the global take a look at what happens we get an error and it says cannot get API country's global what does this mean that means that if we go to the country picker we shouldn't set the value for global to be global we just need an empty string because there is no country chosen and then for that case if the global is chosen this country is going to be an empty string we are going to just fetch data for an empty string and in the API since we know that empty string is a falsie value if there is an empty string still our basic API for daily data is going to be called and then we are going to get our basic historic daily chart other than this bar chart so one more time we go to Angola and then we get back to global and this time we indeed do get the proper chart that's it our application is done since I was recording this video there may be some mistakes in the code so what I would strongly encourage is that you go to the github link is down below and then if you want to use this project or you can make it better just for the repository of this project while you're there you can also give it a star on github if you like this video feel free to subscribe and leave a like that really helps a lot with YouTube's algorithm also if you'd like more complex projects like mine stack or more complicated redux or react applications feel free to let me know in the comments also let me know what do you think about this corona tracker now we are going to go over the whole application one more time so we can repeat what we learned and what we built starting from the ab GS it's the only class based component that we have in here we have the data and the country which are just some initial States there we have the component lead Mount which is making a request to the fetch data the fetch data is in the API so we are creating a special fetch data function which is asynchronous that function is returning right there only the data that we need now once we get that data we are setting it to the state sometimes we are also going to be able to choose a country so how do we do that if you go into the components and then the country picker you'll be able to see that there we have our country picker component and it works using the form control and the native select from material UI there we are fetching the countries right here we are fetching them from the API it's just an array of 190 countries and then we don't have to write option 100 to 80 times we are just looping over them and then we'll be able to choose from all the countries once the country is chosen it goes back to the app that G is right here through this handle country change and there we get the country as a parameter and we are making a request one more time to the fetch data API this time with the fetch data it also changes the country in here we are of course displaying the image the cards the country picker and the chart so cards are always being shown and the data is being fetched right here in the app but for the chart the data is sometimes being fetched from the chart Jia's itself and that's on our initial load in charges the data is being fetched right here so that's fetch daily data that's completely different data coming from the API its historic daily data so we need that data only to show this line chart we loop over the data and we display this line chart which is using the react charge is to after we do that we then display it right here but when we choose the country then we don't have the array of all the different days of the data we just have the current data so we just have one number and that is again coming from the API right here then again we have the cards which are the crucial part of that in here we have the count up component which we'll learn how to use we are also getting all the data coming from props from the app which is using the API and then we are rendering three different cards showing the current data in this count up component we mentioned that we may want to refactor this because we have a lot of repetitive code but since this video is already too long you can do that yourself so you need to create a map and then an array with all different data so you're going to look to three objects first one is going to have data like infected the data for the infected the less this little string right there number of active cases and then the second object in the array is going to have recovered number of recoveries recovered value you're going to loop over that and then display the same thing three times so that would be one optimization that we could make finally in here we have all the api's fetching the data fetching the daily data and then fetching countries of course all of this as always on Java Script mastery is done on the newest JavaScript standards we are using async await we are using the proper reacts folder structure and the files we are exporting all the components from only one file everything is just up to date and ready to show for example to your employers or just to showcase on a portfolio that's going to be it for this video see you in the next one [Music]

Channel: JavaScript Mastery

Views: 419,620

Rating: 4.9573035 out of 5

Keywords: corona tracker, react corona tracker, react js app, react js project, react hooks, api data fetching, react js hooks, react js hooks project, react real project, react real application, javascript async await, charts.js, react charts.js, charts.js project, react js, react js application, build an app in react, build a project in react, react chartjs, react chartjs project, react material ui, react material ui project, react application, react app, react js tutorial

Id: khJlrj3Y6Ls

Length: 94min 11sec (5651 seconds)

Published: Sun Apr 05 2020