Re-Upload: CryptoCurrency Tracker: React + chart.js w/ hooks

alright guys for our next project we're probably going to be building what is my favorite project of this entire course and so I called this project Coinstar I thought I was being clever with the name however after finishing making the project I realized that name is already taken by that stupid coin machine if you guys remember back in the day that used to be at the local grocery stores where you could take all your coins and dump it into the machine it would give you like a little receipt that was uh that you could exchange for cash but anyways I'm sticking to that name because I think it's an awesome name for this project so let me quickly run through so let me quickly run through what we're going to be building for this application and so this is basically just a crypto currency price tracker and so you can see that I've got four coins listed here so I've got Bitcoin litecoin I don't know what these two stand for I can't remember off the top of my head but what will load or render onto the screen is we'll get an image for the coin will render out what its value is at that moment and we'll also give the percentage change and right now it looks like all of the prices for the coins have gone up over the past 24 hours so everything's green and the little arrow is indicating that it's increased however if the value of the coins drop we would see that this arrow would point down and it would get color-coded red now if we hover over any one of these coins you'll see that we get a little X mark and so if we select that it'll delete it and we'll stop tracking the the price of that coin we've got a little drop-down menu up here this is going to give a list of coins that we support in our application and if we select a coin it's going to then add it to the watch list and obviously if we add a coin that's already there nothing should change yep and here we go we can see that the value of this coin has dropped by point fourteen percent and you can see that it's changed to red and we've got that down arrow now at this point if we had stopped right here I think that would be a pretty fun application to work on however I wanted to make this a little more challenging so if you click on any one of these coins it's going to take us to a detailed page about that coin so let's click on this and let's see that now look at that so we're going to be using a charting library called charge is that's going to help render out historical data about the the price of the coin and we should also be able to flip between how far back we want to go so right now we defaulted to the last 24 hours however if we select a year you can see that it's gonna go back to a full year's worth of data and then if we select seven days you'll see that it'll go to just one week's worth of data and then beneath that we're also going to render out some more detailed information about the coin so we got the market cap the volume circulation supply low and height for the past 24 hours and then total supply and then lastly one other feature I wanted to point out is that we're also going to implement local storage on your web browser and so if I go back to this tracking page and I hit refresh you'll see that we're always tracking the same coin so if I add a new coin it's gonna remember that this is part of the watch list that the user is interested in and so if I hit refresh you'll see this new coin is automatically gonna get loaded up when we refresh the screen and if I delete all of them and let's say I just want to watch Bitcoin and then I hit refresh you can see that it remembers the exact coins that we want to watch and so we're going to implement that using the local storage feature of your web browsers and you know for this project we're going to be using the coin gecko API and so I found this API and it's an awesome API because first of all it's free and on top of that you don't even need a token or authentication so it's super easy to get started with and they've got amazing documentation so you'll see that implementing this API is going to be dead simple anyways I think that's enough talking let's go ahead and get started with building out this application in the next video alright guys let's go ahead and get started with the base configuration for our application so I'm going to use a create react depth tool to create the boilerplate for our application and we're gonna call this Coinstar you now let's go ahead and delete all of our files index jss well as an app is you all right and then once we render out our app start our our application you and then let's just verify that we're running around app so that looks like it's working now the next thing I want to do is I want to set up the routing before we proceed any further so if we go back to our web page you'll see that we've got really just two pages right we've got this main page here which once we start building out the app I'm gonna call it summary page that's gonna cuz it's gonna give us a summary of the price of all the coins that we're interested in and then when we click on it it's gonna take us to the detailed page so those are gonna be two pages it's gonna be a coin summary and then coin page sorry coin summary and then coin detail pages so let's um well first of all we need to actually install a react router so let's add a new terminal right and you can add a new terminal here and then hit NPM install gackt routered um that way we don't have to actually stop our application all right and while we're at it we might as well install some of the other dependencies that we'll need as well so we know that since we're going to interact with an API we're going to need to install Axios so we'll install that as well now what I want to do is I want to create a new folder in our source directory and this folder is going to contain all of our react router pages so I want to store all of our page components in a separate folder and that's going to just organize our app a little bit more so I'm just gonna call this pages and then within here let's make a new file and I'm gonna call this coin detail page JSX and so this page is going to represent the detailed page of a coin it's gonna be a regular component as well and then we're gonna make a new page and I'm going to call this coin summary page you you and now let's go ahead and wire up our react router so I'm gonna go to our App component and within here let's say we want to import first of all we're going to want to import our pages whole import coin detail page and then we'll import that from dot slash pages and then coin detail and then we're gonna do the same thing for coin summary you you okay so we've got these two pages imported and we're also going to have to import react router Dom so we'll do that oops and we want to specifically import browser router as well as route you you you and within our app component I'm going to break out this div remove the app we're gonna wrap everything in our browser router and I'm going to just render out our summary page for now you and we'll define a route for that so we'll do route and then I'm gonna do an exact and the path so when we go to the essentially the home page or just a slash route we want to load up that summary page component and then here I'm gonna do the component prop and set that to coins summary page you so we've got well we haven't technically finished all of the routing but I want to just pause the routing for now we're not gonna set up the detailed page quite yet because we have to learn a few different concepts to actually understand how to set up the details page for multiple different components so for now we're just gonna leave it like this we'll work on setting up the coin summary page and then once we wrap that up we'll then take a look at how to set up the coin detail page let's go ahead and make our components directory like we normally do and I'm gonna make our first component which is going to be this header and this header is going to be on both pages so whether it's the coin summary page or the coin detail page it should still be there so let's add that so we'll call this I mean we'll just call it header jsx makes sense and our header is just going to return an h1 tag well actually it's gonna be an h1 tag with some classes and by the way guys just to give you a heads up even though this app looks ugly as hell there's still a lot of styling that went into this so you're gonna find that throughout this course we're gonna be adding a ton of styles to a lot of our components so there's gonna be a lot of just watching me type and then copying it if that becomes a little tedious though keep in mind that you know I do provide all the source code so go to the last video of this course or sorry the last video of this project I'm gonna provide the completed code and so anytime if I'm typing out all of the classes and it's starting to just take too long just pause the video then copy the classes from the source code and then paste it in and then you can skip over that portion of the video it'll hopefully speed up things I don't want this project to take too long and I don't want to spend too much time styling our components when the main port when the main goal of this video and this course is to teach you react and so the classes that we want to add for this h1 tag is going to be text center and these are bootstrap classes so we're gonna have to import bootstrap after this we'll do text - warning then we want MT - three and then MB - four and this is just going to say coin stock and like I just said we need to import bootstraps so let's get bootstrap you all right we've got bootstrap imported let's just see if our actually render anything out under the screen so let's go back to our app component and let's take a look at the final prep and we can see that this component right is going to be on both pages right so how do we set that up within react route or Dom I covered this in the previous project so hopefully you guys know the answer to that it's pretty simple we don't have to set a route all we have to do is just render out the component right here under browser router and so we'll do header import that in there and so now if I hit save we should to see our header component perfect and while we're there and now just to wrap up this video for now the last thing I want to do is import some custom CSS so let's do new file under the source directory we'll call this app dot CSS so the first thing we want to do is we want to zero out all the margin and padding I'm gonna do that right there now then I want to change the background color of the body so that's gonna make it that nice dark almost grayish blackish color for the you ELLs we're just going to remove the annoying little dots on the list item then I've got a couple of classes here which I'm just gonna copy and paste the rest and so here let me just minimize this so these are the final classes just go ahead and pause the video and just copy or copy it from the final code either way don't spend too much time worrying about the CSS I want to keep our main focus on JavaScript and so now that's there let's just do a save all and I'm I don't know oh we didn't import our app dot CSS so let's go into our app component and import that all right and so now we've got that nice gray background so I think that's a good stopping point we've got the styling in place we've got bootstrap added and we've set up some of the routing and so in the next video we're probably going to start tackling that coin summary page which is probably which is probably which is probably the easier page of the tube because the second page the detailed page that charting library is kind of a pain to work with I actually had to spend a lot of time trying to get that to work so we'll get started with the summary page hopefully you guys can hopefully when you guys follow along this one's not too difficult because it's we're not doing anything new on the coin summary page anyway so I'll see you guys in the next video in the last video we set up the styling or the CSS for our application and we also set up the routing within our application so we have one route at the moment and that's going to be for the slash path so basically the root path and we're going to be loading up the coin summary page so the coin summary page is going to be this page here where it gives us the summary or the quick overview of all of the coins that we're tracking and so in this video I want to start tackling the coin summary page and if we take a look at this page I think there's probably I'd say breaking this out into two different components is probably all we need to do so we'll have one component for the add coin as well as another component for this list of coins so let's let's make those components and let's get those rendered out onto the screen so let's do let's make one for the add coin SX and this is just going to be an empty function for now we'll come to we'll come back to adding this functionality probably at the end of the video right now I'm more concerned with setting up the second component which is the coin list and so we'll do a new file for that and we'll call this coin list JSX we'll set up the base config for that and let's go to the coin summary page and we'll go into this div and render out both of those components so do you coin ad we mm-hmm it's not Auto importing maybe I have to do a save all alright let's try it now oh it's add coin so I do add coin import that and then we need a coin list you and now let's go ahead and build out our coin list component okay so in our coin list component this is probably where a lot of the logic for our application is actually going to lie and so this component is going to be responsible for fetching data from coin gecko right so as soon as this component mounts we wanted to fetch data now I'm sure you guys are already aware on how to set that up we're going to have to use the use effect hook if we want to ever perform a task whenever a component mounts so we're going to have to import use effect so we'll do use effect I'll import that we'll say what we want to do is because we have to make an asynchronous call to that API we have to define a new function right because we can't ever return a promise within the use effect hook so we actually have to define a new function I'll call that fetch data like we have normally done and then remember we have to actually call that function you and lastly we want this component to only sorry we want to only fetch the data when the component mounts so we want to pass in an empty dependency array if we don't pass this remember what it means we're going to fetch this data every single time the componentry renders and at this point I don't want to set that up and at this point I don't want it to do that for now I just want to fetch the data once and then that's it all right and so now we're also going to have to import Axios you and we're also going to need a place to store all of that data so we'll do Const and I'm gonna call this coin so this is gonna be the data that we receive back from the coin gecko API and we'll do use state and I gotta import you state first come on BS code imported for me there we go and then this is just going to be a empty array head start now let's go ahead and explore the coin gecko API and you'll see that there's a several different end points so if you just want to get the price we can use this end point right here and by the way you know I told you guys how amazing this API is you can actually try it out and then specify the different value so if I want to see let's see four IDs I can pass in Bitcoin as the ID and then the currencies that I want to receive data for and then we can hit execute and it's gonna show you the requests that it's going to send as well as the response and so this just gives us the price however this is not going to be the one that I want to use instead I want to use coin markets the reason we're gonna use coin markets is that gives us a little more data and and we need we need to actually retrieve the 24 hour change percent change so that's only going to be in the coin markets API coin markets endpoint and so the way that this is going to work is we have to pass in a string of currencies that we support or that we want to receive data for for simplicity I'm just going to use one currency so we're just gonna do the US dollar although you know when we complete this project I think a good challenge for you guys would be to actually implement having an app that supports multiple currencies it wouldn't be too hard to to implement but for now we're just gonna stick with implementing it for the US dollars then we have to pass in a string of IDs and these IDs represent the different crypto currencies that this API supports and so one of those is if you want the data for Bitcoin you just type in Bitcoin which is the ID for Bitcoin and then here we can hit execute and we'll see the data that we're gonna get so we're gonna get all of this data returned in an array I'm if we add let's say like e theorem we should get both so now we get Bitcoin and then we get aetherium and if you don't know what the different IDs are you can always go to let's see where's the end point that I'm looking for I'll coin list so if you hit coin list and then hit try out it's gonna give you a full list of all the coins that supports and the IDS for them and this is a pretty massive list so you're gonna have to go through all of these to find which coins you want and we're just gonna hard code a couple that I've already found so we can skip that and this page usually ends up being massive so I'm just gonna refresh it so I don't have to deal with that more time so I can copy what the get request should look like so we want USD and then we want Bitcoin and then let's say e theorem okay and so this is going to be a get request we're going to send it to this endpoint and then you know there's going to be the question mark and then you can see we pass in the currency which is US dollar and then we pass in the IDS of our Bitcoin all right so now that we know what our get request is going to look like let's set up the API and I'm gonna do this a little bit different than we've done before instead of just typing out the full API here I want to create a new folder and I'm gonna call this api's and then within here we'll do new file and I'm gonna call this we'll just call this coin gecko Jas will import Axios here you and I'm just going to export default and then when I run the Axios create method and we're just gonna say the base URL is going to be HTTP colon slash slash API coin gecko dot-com flash API v3 and this is just so that we don't have to keep typing out the base URL we can just type in Axio stop create and then type in slash and then the specific endpoint that we want to access because we will have to hit multiple different endpoints for our application and so this is just gonna make it a little bit easier to work with and we don't have to continually type out the full URL and so now we want to import this Axios object that we made so let's go back into our coin list component and we want to first of all we don't need xq us here anymore and say we can just do import and then go to let's see we're gonna call this and when I'll just call it coin gecko I can't think of a better name and then we'll import it from dot dot slash api's and then coin gecko and so here what we can type is so we want to do coin coin gecko dot get and then the URL that I want to go to is coins flash markets hopefully this made sense I noticed a little bit different than what we did before but all of the doing is that we create a excuse object from this with the base URL of slash API slash v3 right because that's you know this is the full URL up to v3 and then what we do is we go into coin list and then we add in the specific endpoint we want to get to and so let me make this a little bigger for you guys so we go up to can't highlight it on this thing here we go so the Axios object that we created has the URL up to here and then we're just adding in slash coins slash markets to hit this exact endpoint and then if we want to use like market chart then what we would have to do is just add slash market underscore chart and that's gonna take us to this endpoint so we can reach different endpoints without having to type in the same URL over and over again and what we want to do after this is we want to pass in our usual object that's gonna be the parameter so params and let's take a look at what parameters we need let's go back to that API call we made right here and so we need 1 4 vs underscore currency so we'll do vs underscore currency and that's going to be set to you USD and then the next one's going to be IDs you and so we're going to need a list of coins that we want to receive data for and so for now I'm just going to type in Bitcoin and we'll just we'll add an e theorem for now as well all right so this should be everything we need to receive the data that we want the next thing we want to do is we want to actually store the results so will do Const response equals this CIO's object and then obviously since this is going to be an asynchronous call we want to do a wait and then we have to make this fetch data an asynchronous function and then once we receive that data let's let's do a console dot log and then response and we usually want response that data Oh looks like we made an error let's see and I didn't do a save all there we go we inspect and go to our console looks like the server responded with a status of 404 okay we must have made a mistake someplace so let's go back to v3 let's see if that looks ok ok guys so I found the issue it was a really stupid mistake but if you take a look at the error you can see that we got a 404 but it looks like we're sending the API request to ourselves and so what I had messed up is this should be all capitalized so URL should be capitalized so now I think if I save this yep it looks like it ran perfectly and we should get our data back all right and so let's take a look at our data and so it's going to always return an array even if we ask for only one object or one cryptocurrency and we've got the different data about that cryptocurrency so we got the ID the symbol and we've got an image which we will need to render out as well we've got the current price which we'll need and then we've got the price change percentage in the last 24 hours so there's the three pieces of data that we need for each cryptocurrency on our summary page right we get the image the price and then the percent change all right so now that we got this API set up let's take a break here in the next video I want to set up our I want to set up a context API to store the data on the list of crypto currencies the user is interested in watching because this because that data is something we need to store right because eventually when I add a new coin and I'm watching that and I hit refresh we should store that information someplace so that the next time we load the page we should be we should be able to remember that and also we need to be able to kind of dynamically render out a list of coins that were interested in into this API call cuz right now I'm just hard coding Bitcoin but we do eventually need to pass in a variable that's gonna represent an array of coins we're interested in all right so I'll see you guys in the next video in the last lecture we were able to successfully make an API call to the coin gecko API and retrieve data for a single Bitcoin in this video I want to work on setting up a a state object that's going to represent all of the bitcoins the user is interested in tracking and we're going to utilize the context API for this because there's going to be several components that need to have access to this and I think it makes sense to store it inside a context API so as usual we're gonna go to our source directory and we're gonna make a new folder we're gonna call this context and then within there we'll add a new file and we'll call this I'm gonna represent this state with the name watch list because that makes sense so we'll call this watch list is actually I'm gonna call this watch listed actually I might I'm actually going to call this watch list context so watch list context ijs and so as usual the first thing that we need to do is we want to create our context object so we'll do watch this context we got to make sure we import that as well and then we have to create our watchlist context provider component we're going to have to pass in the props you and I'm going to set up state within this component and we're gonna use that we're gonna do that using the u s-- state hook so we'll do a Const and then watch list which is just going to be an array of strings you and then we'll do you state let me import that okay so we've got that imported and so what we can do here is we can pass in an empty array and what that would do is when the user first logs into this page it's going to basically load up no coins and so all he'll see is just this one button where he can then add coins in but I think there's a bad user experience I think if the user first when the user first navigates to our page I think by default we should load up some of the more popular crypto currencies so that they can see how the website looks and then afterwards they can delete the ones they don't want and add the ones they don't that they do want so what I'm gonna do is I'm gonna hard code some coins into our default state so we're gonna add Bitcoin cuz that's the most popular one I think ëthere iam is the second most popular and then I don't know what's the third most popular will just add ripple whatever okay what we need to do is we'll return and then we'll grab that watch list context dot provider component and we're going to pass down let's see I'm gonna pass down an object that's going to have a watchlist just for now but eventually we will have to pass some other data and why is this giving me an error let's see yeah we got to import react as well and then we'll render out the props or their child props save that and then let's go back to our coin list and let's do let's use the use context hook to get that information and so we're going to D structure the watch list property and that's going to be set to use context and then we got to import our context which is let's see what is it called watch list watch list context alright and just to make sure that's working let's just do a console dot log watch list you let's see cannot be structure property watch list of object as it is undefined yep so I realized I had already gotten ahead of myself and I forgot that we actually have to wrap our entire app within our context so we're going to have to add our component in so we'll do watch this context provider and then grab that and then wrap that outside of the routing component the browser router and so now if I'd look at the console we should see that we print out their default watch list so that's gonna be a Bitcoin aetherium and ripple all right so we've got our watch list implemented the in the next video we're going to start tackling how to render out our data we will implement a separate component for each individual coin and then obviously just iterate over that array using a Maps method on that array and then render out a separate coin now before we move on to actually rendering out the coins we need to actually make one minor adjustment and that is that right now we're still hard coding Bitcoin into our IDs field in the parameters for our API call and what we want to do is we want to render out the list of coins that were interested in from watchlist and so the way we need to pass this data into the IDs is that it should be a list of coins that we want separated by a comma so if we wanted another coin we would do a theorem and if we want a ripple it would be like that right so we can't just pass in watchlist which is an array we have to pass a string like this and an easy way to do that is is to use the join method on an array so if we do watch list dot join what that's gonna do is it's going to take all the elements within the watchlist array and it's gonna join them into one big string and what we can do is we can pass in how we want each item to be separated so if I type in a comma that means that each element within the array is going to get joined together and separated by a comma if I added a question mark after then each one would be separated by a comma and a question mark but we only want a question we only want a comma and so this is all that we really should need so if I do a console dot log right after this response finishes and we'll do response.data it's safe else whoops they shouldn't be in there we should now see that we get data for the three different coins so that's working great in the next video I just realized once again that before we can render out that data I want to implement a simple loading feature that we learned in that jiffy API I and so we're gonna add that to this application it's not gonna be any difference the same exact logic all we need is a simple boolean state to track whether we're actually loading data or not so we're going to implement loading functionality into our application now and the first thing that we have to do is import or create a new state and so we'll just call this is loading and we're going to start out with our state being in false you now as soon as we go to actually fetch our data this is when we want to change the state to is loading to true and then after we receive that data instead of consoled out logging it we want to make sure we store that data in set coins you said we want to change that to response data and then after we save our state we need to change the set is loading to false all right so you know between these lines of code right here if we're going to be in a loading state and then after we've saved our state we're going to change the loading state to false all right so let's hit save and let's just make sure we didn't break our application alright looks like everything's working and let's go to our react dev tools and let's just make sure that in our coinless state or updating our state with the retrieved data so if we go to this state we can see that we've got our we've got our array of data so the 0 is going to be for Bitcoin we've got one for aetherium and one for ripple alright so that's all we needed to do for the loading functionality in the next video we can finally get started on rendering out our data alright guys to render out the data that we received from the coin gecko API I think it makes sense to create a new component called I guess we can just call it coin and that's going to represent an individual line or an individual coin within our summary page so there'll be one coin here another coin here and then another one and then another one and before we do that let me go ahead and just modify something here so for the coin list the coin list is going to render out a list of individual coin components and we're going to use the map method like we normally do to do that and so I'm going to create a custom a function called render coins that's going to be handling the logic for that and I'm going to define that function right up here so do Const render coins now since we've implemented the loading functionality we need to check if it's actually loading so do if is loading we'll just for now we'll just return a div and we'll just say loading however if it's not loading we want to return are you well first through the UL and that's going to have a few classes as well we're going to add coin list and list - group and then empty - too what we want to do is we want to iterate over our coins array which is going to have all of our data and we'll say coins map and then as we iterate over it we're going to name each element coin and then we're going to render out a single coin which we haven't created yet but we will in a bit and there's gonna be a few things that we need to pass down right so we have to pass down the actual data as a prop to this coin component so that it can render that data out so well first we need to pass in a key because we're rendering a list of something and react always wants a key prop and so let's go back to our data and see if we can find a good key prop so let's go to our console looks like I don't have the data anymore it's already got deleted so let's go back to this API page just to see what the data looks like again and so just looking through this I mean we have the ID and that's probably the best option for what we should use as the key so we'll pass in this is gonna be coin dot ID then we want to pass in one more prop for now and I'm just gonna call it coin and this is gonna have all the coin data for this specific coin so we can just pass in coin and we'll close that out it's just saying that this Oh it's throwing in air because we have to return this alright and in that air is just because we haven't defined coin yet so let's go back to our components and let's create a new file and we'll call this coin Jas you and we're going to be receiving props and we can actually destructor this because if you go back to coin list we know we're passing the coin prop and that's really the only proper passing down so we can just teach structure that out now and so we'll get coin here we're going to render out instead of a div you have to keep in mind that the way that this outbreaks is at any one of these items if you click on it it's going to take us to the detailed page and so we have to change this to a link tag so we have to import link from react router Dom and for now we don't have where we're going to send this link yet I haven't covered how that's going to work so for now we'll just send it to like a dummy link so I'll just say I will just say send it to slash coin detail or something and then within this link we're gonna have a list element and this is gonna have a ton of classes so just bear with me we need coin list - item and then we need list - group - item is already wrong this should be coin list and list - group - item and then list group - item - action I then we need D - flex and then justify - content - between line - items - centre and then text - dark think that should be it then we need if we take a look at what's going to be in this list item we should have one image and then I'm gonna take and wrap these two data points within different span tags and then lastly we're going to have a font awesome icon for the delete and so let's create the image now the source of the image if we go back to our data it's going to be under image right here so we want we want coin dot image you and this image is gonna have a few classes as well so we'll say we want coin list - image actually that's the only class we need then under the image we want the - span tags so I'm going to do span and then a class of text - decoration none - none and this value so this is going to be the price and so that's going to be stored in let's see where is it where is it where is it a current price so we want coin current price as a current underscore price then we want another span tag and this is going to have a few classes so we'll do text - success and then mr - - and this is going to render out let's see what's it called here we want the price change 24 hours so we'll just copy that dot now before this span tag right here we technically have to load up another font Ahsan mic on so we've got where'd it go we've got the down and up arrow so let's let's just hard code an arrow in there for now so let's see I'll just do an eye tag actually we want this within the span so I'm going to do that right here and so I'm going to do IDOT FAs fa - sort - down and then a line - middle and then mr - one and then lastly outside of the span tag we want to add one more font awesome icon so we'll do I I'm gonna have a class of delete - icon and an FA are and then FA - times - circle and then text - danger okay so this should be our coin component so let's save everything and hopefully this does something that we expected to do a coin is not defined up yep so we have to import it into our coin list we'll do import coin from coin and work okay it looks like things are working all right so we've rendered out the image the value as well as the the percentage change however you know we've hard-coded the color regardless of whether it went up or down as well as the arrow so let's go ahead and fix that real quick so let's go back to our coin and let's see how we can tackle this so the first thing that we have to address is it's going to be this span tag right here which handles the price change percentage and we know that we're going to have to change the icon based off of what whether it's increased or decreased and so here and we also have to change this text success right here so once again I sorry if this is a little confusing but this span tag is going to represent both of the arrow and this value and so right now I said it's a text - success however if we wanted to turn red this has to be changed to text - danger so if I hit save now everything turns red right so we have to dynamically render out our class names so that's pretty easy to do I'm all we have to do is we'll just pass an expression and we'll say if coin dot price underscore change underscore percentage percentage underscore 24h is less than zero and we're gonna do the ternary operator we're gonna say that if it's less than zero I want to render out this is my class name so text - danger and then mr - - right because if it's less than zero we wanted to turn red however if it's greater than zero we want to change this to text - success which will make it green and then mr - - which is just to give a little margin on the right side so let's save that so everything turned green but that's most likely because all of these are probably going up at the moment so I know it's working now cuz I've tested this just trust me for now that that you know we're actually dynamically rendering out the different class names all right so we've got that now we have to adjust the direction of the icon and so for us to do that what we can say is for this section right here I'm going to wrap that in an expression I'm going to say same exact thing is gonna be ternary operator so I'm just gonna grab this statement right here paste that in and we're gonna say when it's less than zero I want to render out the down arrow that makes sense right but if it's greater than zero I want to render out the up-arrow going to copy that and paste it in here and just the difference between the up and down arrow is this one is FA - sort - down and this is FA - sort - up so if I had save it's tough whoops I've got this one right here so we gotta delete that and so now if I had save looks like things are working let me see if I can add a few extra coins let's see if I go to our watch list and let's see maybe light coin is going down need somebody that's going down they're all going up let's see what other one other coins could there be well I don't know any other coins off the top my head just trust me that this is working whoops what happened here did we break something Oh looks like we will actually went to coin detail okay all right so it looks like things are working I don't like the fact that these list items are extending the width of our window so let's change that and if we go back to our coin summary page I'm going to add some classes to this div so we're gonna put it inside a container like we normally do so we'll do poin summary the coin summary shadow border p2 and then rounded Mt - and then BG - light I'm not adding a container so I'm probably adding the container someplace else let me double check yeah so I'm adding the container actually in our app component so within this div I'll do class name equals container it save all there we go that's exactly what I want to see so now we've got a little padding around the edges and it's just taking up you know like about 80% of our screen all right guys so I think this is a good stopping point so I'll see you guys in the next video all right guys so in this video we're going to implement the delete functionality within our summary page and I've noticed that I've actually forgotten a few classes within our coin component because right now if I hover over one of these components we don't get that nice little delete icon and the way I've set up the Delete icon to pop up is that if I go to the app dot CSS file you'll see that I have a class for a delete icon and so I've set the display to none so it's not gonna be displayed however when we hover over anything with a class of coin which I should have given to the L the list component right so any time we hover anywhere on this entire coin component we should see that X so when we hover then I want to take the Delete icon class and set the display to block so that we can then see it and the reason it's not working now is because I never actually assigned that coin class to anyone so if we go back to coin let's add a few classes here so we want to add text - decoration - none my - one and coin I so if I hit save and then we hover over this you can see we get the little red icon and so if we click on it it should ideally delete that specific coin from our watch list but right now all it does is just route us to that coin detail page which is where we sent this link tag to alright and so to figure out how to actually tackle the deletion of the coin let's go back to our coin list and see how everything is implemented so first of all the way we render out our data is based off of well the data that we get from coin gecko is determined by this watch list so the watch list is going to be responsible for determining what coins were interested in receiving data for so if we want to delete a coin we want to delete it from that watch list array and that watch list array is part of our context and so it's it would make sense for us to delete a to handle the delete functionality within our context so I'm going to define a function here and we'll just say handle delete or actually I'll call this delete coin I think that's a little bit better so a delete coin you and the way this is gonna work is first of all we need some information on what coin we're deleting right so we have to pass the data from the coin component up to our context to let us know that what coin we want to delete so we have to pass in the coin and that's going to be the ID of the specific coin and then we will pass this delete coin down and I won't implement this functionality yet until we actually figure out how to pass the coin data so I'll past delete coin and then if I go down to our coin component actually I don't want to I don't want to put any extra logic into our coin component instead all the logic resides in our coin list so instead what I'm gonna do is I'm going to also D structure delete coin out of here and what we're gonna do is we're gonna pass this event handler essentially down to our coin so instead of just passing in one prop I'm gonna pass in a second prop called delete coin and say we want to pass down delete coin then when the eye is selected we're going to add an event handler so we'll say I on click so on click equals and then we'll say first of all we need access to the event prop and we're going to perform some action so right now the only thing we should do is we should well first of all let's destructor out delete coin and we're going to say we want to where did our function go right here so we'll say delete coin and we need to pass in the ID of the coin that we want to delete so we'll do point ID now I'm gonna tell you guys ahead of time this is not going to do what we expect it to do us all gonna do a save all and let's see what happens so we're gonna go to our components and we'll watch the context to make sure that our sorry our watch lists context provider to make sure that our list removes whatever a coin that we're interested in deleting so I'm going to delete litecoin and so that's going to be that third element right here so if I hit X something unusual happens right everything gets removed from the screen well that's not exactly what's happening instead if you take a look at the URL you'll see that we got navigated to slash coin detail and you're probably thinking well why do we do that right I mean we hit the delete button well the problem is is that if we go back to our code you'll see that our entire coin component is wrapped in the link so regardless of where we click on this component it's always going to trigger that link behavior and so that's gonna create an issue because then if you you know we don't want to navigate the user to that page when they just want to delete it and so what we have to do is here we need to say e dot prevent default so it's gonna prevent the default behavior which would be to navigate to that page and I'm not sure if this is the best way of handling it this is the only solution I found um if you guys know of a better solution please let me know shoot me a message and then I can update this video with a better more efficient solution but so far the way when I've tested this application by doing a dot prevent default I think it's I think II died prevent defaults the one that I wanted so let's test this out and see what happens so if I hit X perfect so right now if I click X we don't navigate to the detail page however if I click anywhere else we get navigated okay so perfect if we take a look at our array you'll see that we didn't delete anything and that's just because we haven't implemented the logic within our context so let's implement delete coin and what we want to do is very simple all we have to do is we're going to set watchlist you and we're going to use the filter function so we're going to say list dot filter and then we're going to pass the element and we're going to say we want to return when element does not equal equal coin so anytime the coin ID that we pass in matches oh sorry any time the coin ID that gets passed and does not match element we're going to add it to a new array that we're creating and then passing it into the set while issed function and so basically we're just taking our original array we're removing the one coin that we delete and then pushing that in to set watchlist so that we can update our state and so I'm gonna hit save and let's see if our application works now so if I hit X here looks like it did not work so what's what's happening here let's take a look and I actually already know what the issue is but I think this is a good moment to really for you guys to take a look and see if you guys can solve this yourself it actually has something to do with use effect but if you take a look at what's happening is that we've deleted litecoin right and it got removed from our state from the watch list contact provider and so to figure out why it's still staying on the screen we have to go back down to our point list component and our coinless component the way it works is we've got to use effect hook and we're saying that when the component first renders we want to fetch the data right and that's the only time we ever fetch data and that's C and so since we're no longer fetching data there's no other point in time in our code where we update coins right and because we never update coins we're always going to render out every single bit of data that we have within our coins state so that's the real problem is that coins never changes even though we deleted that light coin all we did was remove it from watchlist so instead what we could do is a very simple solution is we can update our dependency array to include watchlist right so that that way anytime watchlist gets removed that's already updated any time our watchlist state gets updated we're gonna run this use effect hug so that means that we're going to fetch our data again right and so it's gonna fetch our data without the light coin because that's no longer part of the watchlist here well then set coins to that new data and because we set the set coins to the new data we're going to re-render everything and we'll rerender all the coins - the light coin that we just deleted so let's hit save all and let's try this out so if I delete my coin looks like it's working if I delete aetherium it looks like it's working if I delete whatever that is looks like it's working and then finally if I delete this oh something happened and it looks like we're just getting a whole bunch of data all of a sudden right what happened here well why did it why did that happen so let's take a look at our watch list contacts provider and you can see the state is an empty array so we successfully deleted that final Bitcoin but for some reason or another we're loading all this data and the reason for that is when we delete that last entry within watch list because watch list changes we then run the use effect took again right because it's part of our dependency array and so then we run to this code and what happens is we try to fetch data to the coin gecko API and we're running this watch list join and we're joining basically an empty array so we're passing in an empty string for IDs because there's nothing in the watch list array and the problem is is that if we take a look at the coin gecko documentation when left empty for the IDS string it returns the number of coins observing the params limit so it's basically fetching a whole bunch of coins for us by default when we don't pass in the IDS manually ourselves and so we get all of that data we then set it to set coins and then we render all of that data back out so to fix this issue all we have to do is just implement a very simple if statement so what we'll say is that when let's see we're here right above fetch data will say if watch list dot link is greater than zero so when the array is not empty we want to actually fetch our data and so let's see what happens now and let's see if we fix that issue all right so let's delete litecoin let's delete Ripple it's delete etherium and let's delete bitcoin I select Bitcoin and nothing happens so it looks like we broke our application further not exactly well technically yes but this is a very simple fix so let's take a look at exactly what happened to see why hitting the delete button on the final coin in our list doesn't actually delete what we want so if we inspect our watchlist context provider right we have deleted that last component or sorry that last coin that we were wanting to watch so now we have an empty array right and because watch list changes right because it originally had Bitcoin but then we remove Bitcoin which means watchlist updates which means we're gonna run the use effect took once more and so we're gonna go through this and so we're gonna get down to this if statement right and it's gonna say if watchlist dot length is greater than 0 which it's not because it's empty we'll fetch data but since it's less than 0 we're not going to actually fetch the data and because we never fetch the data we never set coins or update it and so our coins array our coins state if we go down to our coin list component still has that data for the single Bitcoin so the problem is is that in the scenario where we've just deleted the final component we never set coins again to be an empty array so all we have to do is just say else set coins and then set it to an empty array because we have deleted that final cryptocurrency that we wanted to track ok so now if I delete delete delete now if I delete nothing perfect our application is working exactly the way we wanted to alright so that was a that felt like a fairly lengthy video but I think this is a probably a really good learning video for you know trying to figure out why our applications kind of behaving the way it is I what was causing those little bugs that we kept running into so hopefully you guys kind of have improved your troubleshooting abilities from that video and you guys have a solid understanding of how state and context and use affect all kind of work together within this video in the last video we've pretty much wrapped up the coin list and coin components so we've pretty much wrapped up our coin summary page and so it's pretty much done there's a few extra things we will still need to add but that's going to be handled pretty much at the end of the project so for now I think we're gonna just pretty much say that coin summary is done for now and we're gonna move on to the coin detail page and if you recall the way that the coin detail page works is that when we're on the summary page we select one of these coins that we want to see more information about and it's gonna take us to that page it's gonna render out a nice chart that's gonna show historical data so if we hover over a specific point in time it's gonna give us the the price of the coin at that specific date and time we're also going to render out the the current price and the current the past 24-hour percentage change which is also going to be color-coded based off of if the value has gone up or down and then down here we render out some extra data about the about the coin itself like the market cap and whatnot which by the way I still have no idea what any of these things mean but I thought it would just make our application look a little nicer so before we actually go about tackling this page right here we have to figure out how to navigate to this page because if you recall when we originally set up our routing for our application we haven't implemented a route or anything for this page so let's get started with doing that although this is going to be a tad bit more complex than our traditional routing if you take a look at the page URL for the detail page you'll see that for the detailed Bitcoin it's gonna take us to slash coins slash Bitcoin right and if we go back and select you know whatever this is it takes us to coins /e OS and if we select this one right here it's going to take us to coins slash okay B so the way I've structured the URL is that for whatever coin we want to see a detailed page for we're always going to go to slash coins and then the ID of the coin and you're probably thinking so does that mean we have to define a separate route and separate components for each for each Bitcoin well you know technically we could do an extra route like that so we can do route and then path equals slash coins slash you know Bitcoin and then you know component and we can say like something like coin we can say something like a Bitcoin detail page right and then do that and then if we wanted to add an extra coin to our application which you know we want to support more than one coin we'd have to copy that and then make the next one which would be like aetherium and then we'd have to create a new custom page for that and then call that aetherium right and then within our pages we'd have to add a separate page for each one that's obviously a terrible way to go about this because basically we would have to duplicate all of our code for every Bitcoin we want to support and that would be terrible for our application so instead what we want to do is we want to actually be able to pass in a variable in our URL so instead of having this we would just have one route and basically say that we want to load our coin detail page right which we had already created here and then basically we want to go to whenever the route is slash coins slash and then some variable name which is gonna be our Bitcoin ID we want to go to our coin detail page and then within our coin detail page we would extract that variable from the URL to determine which coin we want to see detailed information for and that variable though and that variable is referred to as a parameter okay and so we can actually pass in a variable just like I stated we would by typing in a colon so anytime the react router sees a colon that's gonna mean that whatever follows it is going to be a variable name so here we can give it whatever name we want to the name doesn't itself matter so if I I can call this ID I can call this cryptocurrency I can call this whatever it doesn't matter if we just have to give it some kind of name that we can reference later in our application so I'm gonna give this the name of ID all right it's gonna be a Bitcoin ID it makes sense that's standard convention so here what's gonna happen is just to reiterate if we go to a URL like coins slash and then okay be okay be right here is going to actually be stored in that variable so we can then reference ID and you want our application to figure out what coin we want to see more detail for then if we go back to our coin component I know I said we were done with this but we got to make one slight tweak right now the link goes to coin detail which is not where we want it to go instead we want to go to coins right and then slash and then we want to go to the the coin ID right so we want to make sure we actually send it to that route or we want to make sure we update the URL so that we get the proper route match okay so let's go to coin and figure out how we're gonna do this so we're probably gonna need to do some kind of template string so I'll do backticks remember and then we'll do slash coins slash and then we want to pass in some variable which is going to be coin dot ID right so the data that gets passed down in that coin prop is going to have that ID property which we can then use to route towards slash coins slash and then our ID so let's hit save or save all in this case let's see if our application is doing what it's supposed to do so let's hit this okay so it routed to slash coin slash Bitcoin so it looks like it's working but right now we have just an empty coin detail page all right so the first thing that coin detail page is gonna have to do is is actually retrieve that ID or that parameter right so to do that there's a special hook within react router I believe and that's called use params so what we can do is we do use params we call that hook import it in there and we just take that and we store it in a variable so we'll do Const and then we want to you know what let's just do constant X for now and I'm just going to print out X so let's see what that looks like console dot log and then X save I'm going to change the URL back to slash and so if I hit you know the Bitcoin it takes me to slash coin slash Bitcoin and if I go to console you'll see I get an ID of the coin right and if I change this to ëthere iam I get ID equals etherium right and so this property this object comes from the URL parameters and we've got one parameter and that's gonna be ID right an ID remember comes back from right here this variable that we assigned to it so if we change this to crypto currency hit save right now the property is called cryptocurrency and then the value is going to be set to whatever is stored here so we've now extracted that variable but I want to just D structure it and grab ID because that's all we really care about that's the only one there right now but in the future if we add more parameters then you know we need to factor that in as well so I'm gonna extract that and I'm gonna make sure that we change this back to ID we'll save all and let's just double-check that I didn't break it of course I broke something what did I do a coin detail yep we don't need a consult out log anymore alright and yep everything's working just fine so let's go back to what our completed app and see what we need to implement so it looks like we can really break down our page into two different components so we'll have a heart or a graph component and then we'll have a like a coin data component or something just to give some extra data about the about the coin so this was just gonna be those two components and so let's go ahead and add those in now now that we got the routing in place in the next video we're going to work on breaking down the detail page into multiple components and we'll get those components sorted out in that video all right so I'll see you guys there now that we've got the navigation in place between our summary page and our detail page let's start building out our detailed page and if we take a look at it I think it makes sense to break it down into two different components we'll have our chart component at the top and then we'll have our I don't know what you want to call this will just call this like detailed coin data or something like that so I'll have two different components and I think all the most of the logic I think we're going to put within the detailed page so the detailed page is going to be responsible for fetching data from the API and then it's going to pass that data down as props into our chart components that I can render it out as well as into our detailed data component all right so let's go ahead and create those two components you and so this one I'm just going to call history chart jas you and then the second component is going to be called coin data and let's render both of those out onto this page and instead of instead of just rendering indirectly within the return statement I'm going to call a function so I'm just gonna do render data and we're gonna define this function because there's going to be some logic we'll need to add to it you you you you well actually we haven't implemented the loading I got ahead of myself so leave that out for now we'll just do a return and then I'm going to return a div and we're gonna add a class name to this will do class name equals coin list you need to import our history chart as well as our coin data you all right well save all of that we shouldn't see anything on the screen yet if we go back to our application so it should be empty however if we go into our components a tab and then go down to coin detail we should have our history chart as well as a coin data okay so we've got those two components set up now we actually have to retrieve the data that we want so if we go back to our coin detail page within this ID will have what coin that will have the ID of the coin that we want to see detailed information from however we got to figure out what information we need so first of all this is way too big and let's see the there's a couple different end points we can use but what I am specifically interested in is going to be the market chart endpoint so we haven't used this one yet I think what were using before we were using markets but now we want market chart and that's basically going to give us historical data from and that's basically gonna give us historical data so if you look at the fields that we pass in so we're gonna pass in the ID we're gonna pass in the currency we want to see the data for and then lastly we want to see the day so how many days back should we go to get data for and if you look at our application this is where it gets a little tricky but we have three different charts right so we should see one chart for one day so for one day then we should also get data for seven days and we should also get data for one year and so I figured what would be easiest would be to just send three API requests to this endpoint and get it for one day seven days as well as 365 days so let's go ahead and get that implemented so we're going to be using the user fact hook like we normally do so do you use effect you and we're going to define a function in there will be Const batch data it's gonna be a sinc function you you you and what we can do is we can do a well first of all we got to import our API so we'll do import coin gecko from a and then coin gecko and then here what we can do is consult schools and then we'll do in a wait and then we can do coin gecko get is we want to go to the slash market well we want to do actually what is the oops let's go back to this market chart and let's just fill out this real quick and let's just see what the full URL looks like so Bitcoin USD and then let's just say one day for now yeah let's do you know what let's do seven days execute and yeah so we want to go to v3 coins but you'll see this is where it changes them up a little bit so we want to go to slash coins then we have to embed the ID within there then market chart and then we have to pass in all the extra parameters like the vs currency and things like that so this is going to be a little bit more challenging so instead of just hard coding something in we're gonna have to use template strings and we'll say slash coins / then we need to get the the ID and I'm gonna actually change this to coin I think that makes more sense because it's the coin name and then I'm going to say this is going to be coined and then slash market underscore chart then we need a path an object and this is gonna have our parameters so we want vs underscore currency that's going to be USD and the number of days so for now we'll just say I mean we can do like one or two or seven for now I'm just going to do one let's save that and uh we're going to want to just run this once when we mount the component and after we get results let's see where's that end right here wait yes I hear we want to do a console dot log results dot data well let's do a save all and we're gonna go back here and let's just do a refresh so we're gonna go to the e theorem URL and if I go back to console I did not print out anything and that's because we never actually called fetch data you so now if I search err and it's probably because oh look undefined what happened here oh that's right I changed this the coin you know what let's leave it as idea then we have to go back to the the route and then change the parameter but I DS fine so let's just leave that his ID all right so we got our data back and within there we need to we get a few things we only care about prices so we want to go under the prices per property and then within there we've got a array of 287 points and then within our array we have another array so it's an array of arrays and within the nested array there's going to be two two items there's the first item which is the timestamp and then there's the actual price okay so let's save that data and so we're gonna want to do that by using the you state hook so we'll do const coin data set coin data equals you state I'm going to set this to an empty object and fresh ball we get an import you state and then we want to pass in that empty object well actually it's going to be a list at first eventually we'll change that to an object you'll see why in a bit but keep that as an array and then what we want to do is we want to after we console.log let's a set point data and we're going to set it to results dot data dot remember we want to get to the the prices property that's gonna be the array that we're interested in and so that's gonna be prices its save and if we go to our components and then go to you coin detail page you should see our state and we've got our array stored in there with all the data that we need to graph it okay so we've kind of got the data we need although we ultimately want to be able to you know have show one day's worth of data seven days in one year so we're going to retrieve the data from the endpoint the API endpoint three times for each of these so what we're gonna have to do is now you're probably thinking well what do we do you might think we can do you know results day and then that's gonna return the day and then we can copy this right and then take that and then set this to results week and set this to seven days and then we can copy this and do results year and then we set that to 8:00 right and this would technically work and we could then change this to an object like I said we would and then say we want to set this data to be like this so we'll pass in an object where a day is going to be set to day and then wait do oh sorry it's going to be set to results day and then week is going to be set to results week and then this should be a capital y year it's going to be set to results here save we should then go back to our component and let's check out our coin details page hopefully the page refreshed I can't tell but let's go to our state and you'll see our state is now an object and it's gonna be an object where there's three different properties it's gonna be the day week and year and each one of these properties is gonna contain all of our data well so technically we probably should have done results add a dot price so we just get the price we don't really care about like the market average and things like that and then price again so let's hit save and let's take a look now Oh what happened here you yep that should be data that price and then data price all right I think this is what it should look like now so if we take a look it's still undefined well let's clearly I'm messing something up let's do a console dot log and see what that data actually looks like I already forgot and let's see results here let's see so we want data and then oh its prices of course you all right and now back to the reactive tools and let's make sure our state looks exactly the way we wanted to so you get the three properties and then each property is going to have a value of the array which is going to be an array of arrays all right so we've got our data looking exactly the way we want it to however there's one minor slash major issue so if we go to our network tab and we hit this xhr and fetch tab this is going to show us all of the API calls that we made and I want to show you something look at the the timing of our API call so we'd make a call for the days equals to 1 and then if you look at the way we set up our code we're gonna wait that so we're gonna wait till that completes and we get the result right and we can see that with this green don't know highlight that we see that with that green bar and only once that we received this data back from from the server can we then start the next call right which is results week which is gonna get a week's worth of results so then we send it four days equals seven and then we start the request and we have to wait wait wait wait wait until we get that response back then once we get that response back we have to send another one - why does that say 8 days ok well that should be 365 days but either way you guys get the point this is a bad design because we have to wait for each one to come back before we can send the next request it would make much more sense to send all of this to send all three requests out at the same exact time and handle all three of those concurrently right and that way you should see our overall time get reduced significantly because this takes 42 milliseconds plus 47 plus 62 right so that's about like what like a hundred and fifty milliseconds that we have to wait before we get all of the data that we need so how do we go about actually sending all three of these requests at the same time and then awaiting all of them together instead of waiting for one then waiting for the next one and then waiting for the next one well we can do that with the promise dot all so if we do promise dot all we can then pass in an array of promises which I you know if you look at this the coin gecko call or that Ajax object it's going to return a promise so we can pass in these promises so I'm gonna copy this from up to all the way up to here yep right here and I'm just gonna cut that so that's going to be for the day then that's going to be the first promise in another promise so I'm I can just copy this same exact data and then paste that in there right and this is gonna be for seven days I'm going to copy that one more time and paste that in there and this is going to be for 365 days you and then what we want to do is we want to delete all this nonsense you I messed something up on and we want see this should go this should go should go why is this thrown in there I have to close this out so where is so I didn't mean to copy the promis'd at all I just wanted a copy that coin gecko and on so we want to delete this we don't want that we just want the different promises that we're going to retrieve okay so hopefully let me save this just so that it gets reorganized so basically we have this promised at all and then we pass in an array of promises so coin gecko get this is going to return one promise this will return another promise and this will return a promise another promise so we're passing in an array of promises and what we want to do is we want to await those and then we're going to set this equal to a value so I'll do Const and then we have 2d structure the the values that we want return so we'll do day week year you and then we're gonna have to change what we're saving our data is so it's no longer called result day said it's just gonna be called day and then we've got week year you so let's test this out and run this in theory this should send out all of the requests all at once and get them roughly back at the same time so that we basically cut our wait time by 1/3 essentially so let's hit save you you and I'm gonna refresh that something odd happened whoops you I got a Bitcoin okay there we go this is what I want to see so you can see that we sent all three requests at the same exact time and so the total amount of time it took was 132 seconds which is because the 365 day request took the longest but since they all ran at the same time it's not like we had to wait for one to finish before we could tack on the next one and so this saves us a lot of time and makes the user experience a whole lot better because the user doesn't have to wait as long to get all of his data now if we go back to our state we will have to make a few modifications oh looks like we didn't retrieve our data properly our all of our data is undefined so let's see what went wrong before we set our data I'm just gonna do a console dot log and we're gonna log out let's just do des hommes and it looks like we're not getting any data back that can't be right up sorry guys I see the mistake this should be an array that gets he structured so this should she change to brackets and now if we check our state there we go so now we have all the data that we asked for the only problem is we need to go back into data and grab prices so we'll do de dot data dot prices and then the same thing with week and year you and now if we check our state it exactly the way we wanted to you know this was a pretty decently lengthy video before we wrap this up I realized there's one more thing or one more set of data that we need to fetch if we go back to our application we need to get the detailed data again and so what we have to do is we have to go back to that original endpoint that we were using which is coin slash markets and we need to get the data for that specific coin that we want so I'm going to tack on a third promise onto here sorry a fourth one so let's see it's gonna get tacked on right here I'm just going to copy this actually we just we can copy the request from wish coin summary so or sorry coin list we can copy this exact request and we can pace it back into coin detail page so this go right here we don't need this this is going to get changed to ID because that's the only ID that we care about and then we need to destruction out that data so that's going to be called detail and we'll do a detail equals detailed data and let's just make sure that looks good so we've got our detail and detail returns an array and then the first element in our array is what we're interested in now since we're always going to just request one coin on the detail page let's go ahead and just grab that first element cuz that's the only element that it'll exist so we might as well take that out now and so we check our state our detail has all of the data perfect all right so I think that's enough for this video we'll take a break here and continue in the next one this will be a real quick video I just want to make sure we set up the loading functionality on this page as well so since we are fetching data I do want to provide some feedback to the user that we're loading or fetching the data so we can just do what we normally do to set up some state for that you you and then right before we fetch the data I'm going to set is loading to true and then right after we set this data we have to then set it back down to false so set is loading to false and then when we render our data we want to conditionally render it so we'll do if is loading and I'm just going to do the same thing we did on the other pages just return a diff for now and just say loading you and we can save that and looks like everything's good that's all I wanted to do for this video now that we've set up our coin detail page to fetch the interested data I think it's time we move on to start working with our charts and for working with charts there's a lot of different libraries that you're gonna use for this project we're gonna make use of chart j/s and so we're gonna want to install that will do npm install what was I supposed to do let's see hold on let me go to get started npm install' chart yes and while that's happening let's go back to the introduction page right here and this is going to give us an example of how to create a chart okay so what we have to do is and this is just giving the example in plain JavaScript so we kind of got it converted to react but we have to define a canvas element and that's where the charts going to get rendered so let's go to our history chart page and where we're returning a div let's render out a canvas and so I'm just gonna do canvas I will give it an ID my chart and then let's just define a width equals 250 and a height so we have to give it the dimensions for our actual canvas I'm just gonna set everything to 250 pixels and then close that out all right so we've got our canvas now the example shows that they define a variable and then they actually grab a of reference to the canvas that they created and in react right we won't we don't do a document dot gala man get element by ID in react instead instead normally if we ever want to reference a Dom element we have to use the they use ref hug right we have to add a ref to the canvas so let's set that up so we're gonna do Const and we'll just call it chart Ref and that's going to be set to use ref got to import that first and then here to actually reference this Dom element we need to do a ref equals and then we're gonna set this equal to chart breath so anytime we ever want to reference this Dom element all we have to do is just call this variable chart ref all right and so now once we do that what we have to do is we have to create a new chart and so let's go ahead and do that and what I want to do is I want to I want to render the chart basically whenever the component loads up so we're gonna use the use effect tuck like we normally do and within here I first want to make quick check so I want to say if chart ref is defined and chart referent right so I'm worried that maybe the canvas will get rendered before the use effect hook runs sorry I'm worried the opposite happens where we run the use effect up but the canvas hasn't been rendered yet so this is just to make sure that chart ref actually has a value and now we want to actually create our chart instance so we can do Const call chart instance equal and then we need a new chart chart J yes pass and I did ice misspelled that new chart j/s forgot to import so we'll do import chart che s from is alright so those errors one way and one here we have to pass in two things so we have to pass in here CTX which is the reference to that object and then the second thing is a whole bunch of config parameters and options and for the configs there's a there's three things that we really need to pass in three main things we have to pass in the type of chart so in this example that's doing a bar chart but we probably want to line a line graph and you have to pass in the actual data and then lastly we've got a whole bunch of options for the actual chart and that can modify a ton of different things like the way the chart looks the way it behaves and things like that so for now let's let's fill out the these parameters so the first one is going to be the reference to the chart so we're going to do chart Ref and then for the second part for the actual chart config I'm just going to copy this as an example just so we can test it out and see what it looks like so let's copy that and save that in there and let's take a look they didn't didn't do anything I guess I found my mistake so I forgot to make this dot current because you gotta use the dot current property actually get the actual reference so now if I hit save I think it should render out a chart okay so we've got a chart and you can see that all first of all it's a little too big but it's it's got a it's a bar graph and it's got you know a columns for red blue yellow green purple and orange and you'll see that the data value for these guys is all stored here so 12 19 3 5 2 & 3 and then the labels for the x-axis are you know red blue and yellow so that's how you configure this we're going to have to modify this so that we can plot what we want to plot so let's go to first of all we're gonna have to tweak this and change this to a line graph and if I hit save and take a look at it now okay so it's looking a little better but we actually want a specific line graph and so when we go down to line graph it's gonna show you how to set it up it's gonna give you a few options but what's important for us is that on the axes we want it to be a time value right so we want the x-axis to be the time and the y-value be the dollar so the way that we actually have to structure our data is we have to pass in a array of data all right as you can see right here and then the array should contain an object or the array should be an array of objects where each data point is an object where there's two properties where the date and time is the on the X property or the T property we can call it whichever we want and then the the value is on the Y property so if we go back to our data actually before we do that you know what I'm gonna do I'm gonna change this for a second and I'm gonna delete all of this nonsense so I'm going to remove all of this and then I'm going to change our data so I'm going to say our data is going to be an object where the X is set to let's just say 1 and the y is set to 15 a new data point I'm gonna say X is set to two and why is going to be equal to 12 then let's just keep adding a few more just so we can get enough to make it look like a chart x equals 3 and the Y property is going to be set to 25 and we don't need these labels anymore so I'll delete that let's hit save and let's see what it rendered out I don't know if you guys can see this because it's black on black but let me change the color of real quick so if you want to change the background color how we can go right into this property right here so outside of data we want background color and then we'll just say RGB a equals one seven four comma three zero five I'm a one ninety four and then zero point five you you it's save okay so we've colored the basically the data under the line so you can kind of see our chart and it's kind of coming together it's got these two points I thought we had three points can't really see the x-axis because that's gone but let's work on to work on making this chart a little bit more visible and so what I'm gonna do is for this chart or this canvas that we're rendering out I'm gonna change the structure of our our HTML and I'm gonna say when we return this I'm going to take a another div original dip that we had and I'm going to give that parent div a class name of b:g - white border em 2-2 rounded and then p - 3 and then beneath here we're going to add an extra div but it's gonna remain empty for now so we've got a parent div then just another set of divs then we got the div wrapping the canvas and I think that should be it for now so let's check this it should give us a white background okay so that's a lot better and so you can see now that we've got a chart however there's no x-axis oh I'm not even sure what values it's grabbing but that's okay we're going to figure this out but we have to pass in some configuration options so let's see we're going to need to change the x-axis to be the type of time so that's what we're missing and so let's go ahead and do that but first you know you'll notice that our configs is kind of getting out of hand right like look at all of this so instead I want to take our options section and I want to define this in a separate file and then we can import it so that we can keep our component code relatively short so let's go to our source folder and I'll make a new file and I'll call this I'll call this chart configs that's not a folder I'm making that to file I need a folder Oh new folder and what did I call it chart configs and then we'll make a new file in there and I'll just call this uh I'll just call it chart configs whatever you and here I'm going to just export an object that I'm defining here and so I'm gonna call this history options and this is going to be an object and so this object is going to represent if we go back to the introduction this is going to represent everything for the options section so that we can define it all in a different page and just so you know I don't want to dive too deep into the specifics of customizing chart jessica's it's not really react specific that's just another library but these are gonna be the options that we need so we need to line-height what is it in tation and so we're gonna do always and set the true you and then hover is going to be set to false and lineweight we set to 1.5 you then we're gonna add another property so we're gonna add an animation so if we go back to our final app and we reload you see that it kind of animates up so that's what this is gonna do we're gonna do an animation of and if we provide a duration so I'm just gonna say two seconds so let's gonna take the animation a full two seconds to complete then we want a maintain aspect ratio set to false and so what what this option is doing is that when you notice I if you guys drink it right it gets a little smaller but then it can also get wider but I don't maintain that same square aspect ratio because I set the canvas to 250 pixels both for the width and the height so that would mean that to maintain aspect ratio it would always have to be a square and I don't really want that then we want to make it responsive you you then we have to adjust our scales so we want for the x-axis we're going to sin grid lines actually we don't need that in there we can skip that and we'll just do type so this is what's going to make the x-axis a time-based axes wait what happened here scales well there should be another object yeah this configure is kind of a pain I actually this actually took me quite a while to get down I don't know if it's just because I'm dumb or if charge is documentation sucks because they don't give you any examples like they just give you that one example which is not helpful at all and so distribution set that to linear and then that's going to be the end of that then we want to set the she that should I think that's it so we're going to export this history options and we're going to pass it where is it history chart twelve will do is where does this close closes right there I'm going to delete all of that and then pass in history options and then we'll buy hit tab this should auto import it so let me just double check so I imported history options it's a named import from the chart configs and so that's gonna make our configs look a lot smaller since we're storing all of that nonsense over there I hit save and okay we've got something going right now kind of looks like what we want we've got some times and then we get different values that we provided so we've got the x axis and the y axis obviously this doesn't represent in a real time so I guess it's kind of confusing and it's translating into what is that like seven o'clock or something I don't even know what that is but let's go ahead and add a few extra config options I think this is gonna wrap that part up right real quick so we want to change we got the background color we also want a border color this is just styling guys so don't worry too much about it racer of 5 194 0.4 alright and actually we want the point radius so what I'm doing with the point radius is you'll see that there's a little dot for each point that we defined which is fine for a graph like this but we're gonna have you know hundreds and hundreds of data points so there's like a billion little dots that'll get rendered out if we don't have this and it kind of makes it look ugly so I'm going to set this to point radius of zero so there won't be any circle around it you and for now I think that's good let's save that the label is incorrect still we'll update that later though I'm because it says number of votes oh what'd I just do I know you could do that hello look look at you guys charge is putting in cool ass features alright so we've got that going now let's actually pass our real data down to this chart so first of all our data is in the wrong format so if we go back to let me pull up the react developer tools and you'll see that our data fortunately comes in this format where we have our array but the time and the value are stored in a another array within the array that's not what we want we wanted to store it in an object where the time is set to the x value and the data or the value is set to or the price is set to Y ok so what we have to do is we have to transform our current array of arrays and turn it into an array of objects so let's go back to you coin detail page and what we're going to do is we're going to perform a little JavaScript magic I'm going to define a function up here data you which equals so we're going data and so we're gonna take these arrays that get returned and we're going to pass it into this function which is going to transform those arrays so we want to return a new array and yet new array is going to I'll come from this map method and we're gonna do is when we iterate over oh like that that is what I wanted so L we're gonna iterate over each element within the array and we're gonna return an object and basically say that we want the time object to be set to be l0 right and then we want the Y object the Y property to be set to 1 so Dave and we want to pass these arrays into this format data function so we'll just to format data the other two as well you you alright let's save that what did we do data dot map is not a function excuse me what did I do wrong guys yep all right I see the mistake we don't need to format this data for the detailed form it for therefore the detailed object so now if we do save I know it looks like it's working if we check our state we now have an array of objects where the time is set to the T property and the price is set to V to the Y property now one thing I don't like is you know we get this large decimal which we don't want we just care about the first two places because that's how many cents we ever show so we want to basically truncate it right there and that's pretty easy to do all we got to do is a dot two fixed and then two look at it that's much prettier all right so we've formatted our data and now we have to pass this data down into our history chart component but my mouth is getting a little tired from talking so I think we can take a break right here and then the next video will hopefully finish up the rest of the chart stuff guys so now that we've got the now that we got our data formatted in the way that charge is expects it let's go ahead and take our data which is going to be stored in our state coin data and pass it down to our chart component so we're gonna pass it down as a you know standard prop so I'll just call it data and then pass down coin data and then what we want to do on chart on history chart is let's see structure out data and then let's addy structure a little bit further so I'm gonna do a Const and we'll grab day week year and detail from our data days gonna hold all of the historical values for a single day week you know we'll do week in a year we'll do a year and then detail we'll just get the information about the current value and and information about the coin itself so what we want to do is for now let's just hard code our data to always display lets hard code our chart to always display the one single day data and so what we can do is we can remove this I'm here we can remove the array and I'm just going to pass in day and I think that should be the only thing we need cannot destructure property day of data as it is undefined hmm now I forgot to hit save all all right and so now we've got a chart she doesn't look half bad so it's actually rendering out the data we hover over these points we get values but we should I don't know if it's just a little slow there we go our charts a little massive though so let's work on getting that scaled down a bit and actually I see a mistake that I'm making you know what we want to do actually is we want to let's take this and I think this should fix our issue so we're going to take our history options and spread it out history options and then spread it out with an option that I think that should fix it ah so that's still a little big I don't know why it's not being a little it should be a smaller and it should be a little bit more responsive well it looks like it is responsive but it keeps filling up the whole screen well anyways we'll come back to fixing that a little bit later let's finish implementing all of the logic for the for the chart so we've got our data rendered out however our label is still wrong right so it still says number of votes and we want our label to be the name of the coin so we can just take this out just say this is going to be set to we're gonna pass in a template string and we'll say detail detail name and then price so let's just say something like Bitcoin price or what that whatever hmm so we get an error when this happens and most likely we just need to make sure up here that basically our props get read gets passed down so we want to make sure we do detail so if detail exists then run this okay there we go so we get the Bitcoin price is updated now going back to our completed app we've got we've got the current value as well as the percent change getting rendered out at the top left so let's implement that and remember this is also needs to be colored accordingly based off of whether it's going down or up so I'm gonna go down here and then here I'm gonna define a function called render prices a render price and then I'm just going to say cons render price you and if detail exists I want to return the following so we'll do a pee tag with the class of my - zero here that's going to say detail dot current underscore price and we want to change it to fixed what is it to fixed and so that's only gonna give us the last two decimals and then below this P tag we need to pass in another P tag and this is gonna be a little bit trickier though so we got to do class name equals say we'll pass a ternary operator and say if detail dot price underscore change underscore 24h is less than zero we want to add the classes that'll make it wait did I mess this up this should be zero but we want to add the classes that will make it turn red so text - danger we'll make it turn red and I'm gonna add some vertical padding as well and then we want if it's greater than 0 we want text - success and then my - zero I think that should be it you however it's going to throw an error right now because it says we can't return to JSX you know child elements or sibling elements so we can just wrap it in a fragment you you let's test that out all right what wait what happened here yeah mistake I got to wrap this in curly braces so it actually treats it as a JavaScript function got the value it's not rendering out the oh yeah I didn't actually pass in a value here so we'll do detail dot price underscore change I'm a score percentage underscore 24h and then we want to fixed again you you all right so that looks good and we've got that done I mean we could I could put a dollar sign here and in a percent here but I mean really cares you now the next thing we need to implement are the buttons so that we can load up the different data because right now we're always just rendering a day's worth of data so for that we probably need to implement some sort of state and so we'll do a Const and then I'm going to call this we'll call it time format and then set time format and that's going to equal use state I will say the default time format is 24 hours and we gotta import you state and I'm gonna define a function that's going to handle the logic for what state the user is going to want to see so we'll do a constant determine time format which equals yeah and we're gonna say we're going to add a switch statement here so they do a switch and it's going to be on the state variable time format so when the time format is set to 24h we want to return day that's going to be returning this Audrey that's going to be the array that stores all the data for a single day if the case is set to seven days I'm going to return week and then if case is that you one year we're going to return here and then default let's just do a catch on just returned a piece you save it's gonna format that and what we want to do is for data we're going to just call determine time format so this will run and then based off of whatever time format set - it's gonna return either day week year or or day again if it doesn't match any one of those but it will always match one of those so now if we hit save um it should return a single day's worth of data which it is and you'll see that well actually ignore that so we've got that part set up now we actually have to render out some buttons so the user can determine which one he wants right so we go back to our finished have we've got three buttons right here so let's add those to the UI then under this div right here that wraps our canvas we're gonna put a new div and we're gonna add the class of chart - button and then MT - one and we're gonna create a button with the class of BTN and then a class of BTN - outline - secondary and then BTN - SM and we're gonna copy that so that we have three of them the first one is going to say me for hours we'll say seven days and the last one will say one year and for the middle one we want to add one extra class that's gonna be MX - one just to give it a little space between the buttons so let's take a look and see what that looks like so we've got the three buttons so things are looking good and then we just want to set some on click event handlers we're gonna stay if this button is clicked we want to set time format to be what is this is the button for 24 hours so we can just head through 24 hours and then let's just copy this on these buttons as well and we just have to update what we're gonna set the time format to so there should be seven days and this should be one year so let's take a look and let's see if this works so if I try seven days all right it looks like it's updating to seven days I do one year awesome so we got our buttons working now okay guys so I figured out why the chart was taking up the entire screen and that's because I had an extra n here on maintain aspect ratio so that misspelling was causing it to break so if I hit save now we should see our chart now take up a reasonable amount of space and still be responsive okay guys so I figured out why the chart was taking up the entire screen and that's because I had an extra n here on maintain aspect ratio so that misspelling was causing it to break so if I hit save now we should see our chart now take up a reasonable amount of space and still be responsive alright guys so I think we've pretty much wrapped up the the chart component and now I think it's time we moved on to making our coin data component huh and so we've already created the component here right now there's no actual code in there so let's get started on making that the first thing it needs is it needs the the detailed data and so if we go back to our coin detail page you'll see that we're passing our coin data down to history chart but we also need to pass it to coin data however we don't actually need all of coin data we don't need to have all the arrays for the historical data so we'll just get coin data data alright so just this field right here because that's going to contain all of this information you and then now if we go back to coin data we're going to make sure we pass in props and all we're gonna do here is we're going to call a function called return render data and then we'll define it up up here go do if no sorry Const render data and now all we're going to do is well first of all let's destructor our data and now we're just going to render out a whole bunch of divs and this is going to actually take quite a bit of time so just bear with me because there's a ton of classes we got to add so well so let's get started so we'll do div with the class of BG white and then a class of MT - 3 and then class the P - 2 and then rounded and then border and then row and then within that we want another div with a class of called sfm called s - SM you you and actually before we continue we want to actually put this all within a condition so we'll do if if data exists then we want to render all of this goodness out you if data and then return there we go then let's go within this div again and I'm going to add another div and that's going to have a class of D - flex in a class of flex - column and then within there we want a span tag to do span with class of text - muted and then coin - data bash category you and so this is going to represent the market cap and then beneath that we're going to add another span tag path in data market cap you then beneath that we need in HR tag and we're going to add another div so this is going to be dot d - flex and a whoops dot flex - column and then we're going to add a span that's gonna have a class of text - muted and then a class of coin - data - category and so we're gonna have the total supply on this one and so beneath it is going to be the value of total supply so I add another span tag and that's going to be data total underscore supply you you you and then beneath this one we need to add another div with a class of called HSM this is going to create another column and just to speed things up I'm going to copy from this div down to believe it's oh no where's this guys closing div this guy yeah so from here up to here we're gonna copy that and paste it in here just to save some time I'm because it's exactly the same thing the only difference is we need to oops I may have Cioran where did I mess this up you yeah that's where I messed up so sorry guys so we should have we need to delete these two guys so this is where we left off now let me copy where is it here we go so from here up and then I'm just going to paste that down here there we go that's better and then I'm going to go down one more and then paste it again alright so this is gonna give us three different columns the only thing that we have to change are the headers and the values so under this one this is going to be volume 24 hours and it's gonna be data probably volume now it's going to be total volume you and then this one is going to be a high 24 hours data high underscore 24h and then for the last two we get circulating supply and data dot supply and then lastly we want to knock what is this low 24 hours and then data dot low underscore 24 hours so hopefully this is gonna do exactly what I wanted to do what oh it should be wrapped in brackets you and looks like it's doing nothing so what happened here oh sorry guys I figured out the mistake so I was supposed to pass down detail and I accidentally passed down data so let's fix that and I think we should be done with that section there we go so there's no high 24 but I suspect I did something wrong there probably definitely so let's go back to you where's high 24 yep that's a typo you all right so we finished that and so that's pretty much going to wrap up the coin detail page the last thing we need to do is if we go back to our homepage or our summary page we need to add in that that add coin button alright so that we can add different coins as well as delete coins all right so we'll tackle that in the next video okay guys let's move on to implementing our at coin button and if we take a look at the completed app you'll see that the add coin component is nothing more than a simple drop down menu so you click the button gonna get a drop down menu of the different cryptocurrencies that we support and I hard-coded these specific crypto currencies just because you know there's over a thousand different crypto currencies that we can track and if you actually go to the coin gecko API and you go to the slash coins slash list endpoint you can see all the coins they support and once again it's over a thousand coins and so if you wanted to you can have a a drop gun that could dynamically render out all the coins that they support however I wanted to keep the app simple so I've just hard-coded a couple of different coins you know you can obviously tweak this however you'd like but I wanted to make sure we just kept it as simple as possible and so I've hard coded these ten different coins I think there's ten maybe eight eight to ten coins and the way that it works is if you select a coin that you're not actively tracking right now so right now it doesn't look like we have aetherium on the list so if I select aetherium it's gonna add it to the list so we can see the price and then we can click on it and see the detailed information and so all it's really doing when you select a new cryptocurrency to add to the list is that it's going to our context and it's adding it to our watch list and once it gets added to our watch list the rest of our code should handle it and so let's go ahead and create our ad coin component if we haven't already done so so I've already created this and right now it's just an empty plain old functional component that's rendering out a empty div and we might as well and we might as well render it out on to our coin summary page so don't forget to import it as well and so now if we do a save nothing should change because right now our ad coin is just nothing more than an empty div and to actually implement to this drop-down menu we're going to be using bootstrap and so if you go to components and then drop down now you'll see that they have an example of how to do that so we have to create a div and hopefully you guys can read this so we create a div with the class of drop-down we didn't put in a button and we have to provide all of these classes and then we have another div which is going to encompass the the drop-down items which is going to be our different crypto currencies so it's pretty simple and so let's get started on that and the first thing I want to do is define an array that's going to hard-code the different cryptocurrencies that we're going to support and so I'm going to call this available coins so these will be all of the coins that we are going to render out onto a list and I'm just going to copy and paste it from my notes and so go ahead and just pause the video or take a look at the completed code and you can just copy it from there all right and so now for what we're rendering out onto the screen the first thing that we need to do is give our div a class name and we're going to give it a class of drop-down and then within this day of the first item is going to be a button and that's going to have a class of BTN BTN - primary that's going to turn it blue and then a class of drop-down - toggle and we also have to give this a type equal to button and our button is going to say add coin now the second div is going to contain the list of coins so we'll do a div with a class of drop-down - menu and we'll just leave it like that for now and within this div we're going to have to render out all of these coins as anchor tags so we can see here in the example they gave us within this day of each item it's going to be an anchor tag with a drop-down - item class and so since we have an array we can iterate over that array or map that array so will do available coins dot map access to the specific coin we're iterating over at that moment turn AJ's expression it's going to be an anchor tag with a class I've dropped down - item and the link isn't gonna go anywhere and we're gonna pass in the name of the coin which is going to be accessible from Al and that should be it so let's hit save and let's go back to our app and let's take a look so right now you know we see our button that's nice let me click on it nothing happens but that's expected we shouldn't we haven't implemented the logic for that but the way that this button is going to work is to actually see the drop-down items all we have to do is under this div right here that has a drop-down menu all we have to do is just add a specific class of show I had this come from the bootstrap library so once you add a class of show to this div you can see that this drop-down will start to appear and right now it's hard-coded so if we can't get rid of it and so all we have to do is just find a way to toggle this specific class and we can implement that toggling functionality and so the easiest way to do that we're gonna use our u s-- state hook like we've done before and this is just going to be a simple boolean so we'll do a constant I'm gonna call this is active so I'm going to represent whether the drop-down menu is active or not and then the function will be set is active and this is going to default to a value of false because by default our drop-down should not be open and make sure to import you state as well Anna do you state and let vs code import it in for me and now we have to set in on click event handler for this button so that when the button is clicked we should toggle the state of our is active object and so that can be done just by calling our set is active function and just setting it to the opposite value of whatever is active is at the moment all right so now if we select this we should see that the current state changes we don't see the drop down menu but that's to be expected so let me open up the console real quick and let's just make sure that the state is properly changing go to our ad coin component right now the state is true we select this again state moves to false so that part is working so far now the next thing we have to do is dynamically render out our classes for this div so that if is active is set to true we need to add in a show class and so this is going to be fairly easy we can just use a ternary operator and we'll say is active so if is active is true we're going to return a string of drop-down - menu as well as a class of show and if it's not true then we're just going to return drop down - menu all right and now we click on this we should see our list pop up and if we click on this it should close great so we've got that done now let's actually work on making sure that when the user selects one of these coins it gets added to our watch list and to do that we have to go back to our launch list context and we need to add a new function within this component and I'm gonna call this function add coin so it's going to be responsible for handling the addition of a coin to our watch list you you and the first thing that we have to do is we want to make sure that you know if we are already if we're already tracking Bitcoin it's already in our watch list if the user selects Bitcoin again you know we don't want to add it a second time so we need a little we need a quick check to make sure that the coin that's being added isn't already in the list and that's pretty easy to do we just need a simple if statement and what we can say is a watch list dot index of coin equals equals equals negative 1 ok so let me explain what this is doing so watch list is just an array right nothing more than a simple array and basically what we're gonna do is we want to find what the index of a specific coin is so if we typed in Bitcoin right now into this right here it would give us an index of 0 because it's the first one if we did a if we pass in a value of ripple it would given give us an index of 2 if we passed in litecoin it would give us an index of 3 however if we pass in a coin that's not in our list it's going to give us a negative 1 so that's how we're going to check to make sure that the coin isn't actively in our list by just making sure that when we do an index of we should get a negative 1 and that's going to confirm that this coin is not in our list and we should actually edit you and adding it to our list is going to be easy with you to set watchlist and we're going to pass in our array and we remember we want to pass in the watchlist so basically we're we're essentially making a copy of that array and then we're going to pass in our new coin and so now that we've got that function we want to make sure that we pass it down that anyone you know subscribing to our context can have access to that function and now going back to our ad coin we want to make sure that we actually have access to that ad coin method or function and so we're gonna have to use the use context hook so we'll do Const and we're going to D structure out ad coin because we don't really need anything else from there and we'll do use context don't forget to import that and we also need to import watch lists context and just sure you guys are following I imported both of those okay so now we have access to the ad coin function we just got to figure out where and when we should actually run that function and so basically any time a user clicks on one of these anchor tags we should then call that function so I'm going to create a new function it's going to be called Const Handel click and the coin is going to get passed in there you will say add coin and then we pass in that value of the coin and also we want to make sure that once a user actually clicks on one of these items that we close out our drop-down menu actually you know what we'll leave that for now and I want to make sure I actually show you guys why we want to do that but we'll do uh we want to go down to our anchor tag now and set an on-click event handler I pass a narrow function and we'll say handle click and we want to make sure that we pass in the coin so that's going to be accessible from the e L property we could obviously rename that to coin to make it a little bit more readable but I'll leave it as e l now so at this point like like this we should see that it loads up I don't think anything changed let's check that up there we go so you can see when I click on Tasos I get this added by click on hard on oh it should get added as well I guess that one's card ah no but you can see that after we add a new coin we want to make sure that this drop down menu goes away and so that's pretty easy to do all we have to do is set is active to false all right so let's test that out let's add Tasos and that's working great and yep so that's all we had to do to implement the add coin functionality in the final video for this project I'm gonna show you guys how to implement local storage and luckily this is a very very simple procedure I'm going to show you guys this by just going into the developer console and anytime you want to save data to the local storage of the web browser all we have to do is let's just type in local storage so that's usually the command that we want to use when we want to work with the storage and then we can call a specific method on it so there's several methods we've got get item and set item these are the two main things that we care about so if we want to save data to the local storage we'll call the set item function or method and then we have to pass in key because the way that data gets stored in the browser or in local storage is that we can just pass keep passing key value pairs and nothing else that that's all I can really handle so we'll give it a key and I'm gonna say this is going to be let's just say my data and then we actually have to give it the data and that's going to be you know some other string so I'll say like you know this is my data and then close that bracket hit enter and so this should have stored this key to this value and so we can find out if we actually were successfully able to store that to our local storage by going into I think it's is it memory application yeah application so go to the local storage tab and then go to the your specific website and so each website can store its own respective data and I'm working on page localhost colon three thousand and four however you might be on you know colon three thousand and when we ultimately go to deploy our website we're gonna have a domain name and so that domain name will get populated here so let's like this and you can see that we have we actually have two pieces of data so we've got the my data which I just stored and then we've got the watchlist so I realized I did this on the tab where it's the completed project so you're gonna see there a restoring watchlist within the local storage so that's how you save data now to retrieve data what we do is we do local storage and then dot get item and we'll get let's see my data capitalize it I don't remember yep and so now we were able to retrieve the value of my data which was stored in local storage and printed out to the screen so that's all we have to do we just set item and get item and so let's go ahead and implement this in our app and so let's think about what data do we need to actually store it I kind of already gave this away because we saw that already um but you know ultimately we have a list of coins that the user wants to watch so we want to store that watch list and if we go to our context and this is probably the perfect place to implement this because the context is where we are defining that state for watch list all right so watch list is going to have the list of coins the users interested in so we need to find a way to store watch list into local storage and so we gotta figure out how we're gonna do that and on top of that we gotta figure out when we want to do that and so anytime the watchlist changes right so anytime the user you know either adds a new coin to the list or deletes a coin and we're gonna update watchlist and it makes sense to update our localstorage value whenever watchlist changes right because that's ultimately the values that we're gonna be storing so any time of variable changes and in this case watchlist we want to basically send watchlist to local storage or at least update it so if you think about this I'm pretty sure you guys can already figure out how we're going to implement this so if we ever need to so if we ever need to define any kind of dependency where oh if some variable or state changes then we need to perform certain tasks right that's the perfect scenario for the use effect hook and so let's define that again use effect passing a function and before we proceed any further the way we're gonna get this hook to run whenever watchlist changes is to add it to the dependency array so I will put in watchlist and that's it so anytime this value changes so anytime we had a new coin delete a coin whatever we're gonna run this use effect hook and all we have to do here is just say local storage dot set item right and then all we have to do is let's define a key for our data I think it just makes sense to call it watchlist and then here we're going to just patch pass in watch list oh do watch list I had save let's um let's delete a few things and let's inspect and go to applications instorage localhost I'm on localhost 3003 wait did I save this let me double check and make sure I saved it okay I think I saved it now let's make sure this worked and it looks like it did not work so let's that and nothing is happening oh sorry I said I'm in session storage so we want to go to local storage all right so we've got watchlist it has just Bitcoin which makes sense and if we add a coin at that etherium okay we've added aetherium to our local storage let's add a couple more all right and so it looks like it's working so let's refresh our page and see if it remembers this so we have Bitcoin aetherium and then whatever these two are so just try to remember what it looks like hit refresh okay it looks like things have changed so it did not load up the local storage and that makes sense because we didn't tell it to right we've we set up the logic to save it to storage but when the website loads the page we needed to tell it to load up that data and right now instead of loading up that data it's just loads the default which we pass in to you state so let's figure out how to get that data and so I want to show you something real quick because when we store data into local storage it's not storing this JavaScript components I'm sorry JavaScript objects and it doesn't have that ability instead all I can do is just store those key value pairs and what's interesting is if I do a local storage dot get state or get item sorry and then I asked for watch list you're going to see something unusual what what do they do i misspelled it all right look at how it's stored it's not stored in an array it's a big ass string where we're just you know separating each item that was in the array with a comma so we have to take that into consideration when we import this data into our application so let's do a console log and then we'll just copy this and save that and so here you can see it got my wrong thing there we go so it's just printing it out as a string so what we need to do is we need to modify this so we'll say we want to split this string alright this is a method that you can run on any string and it's going to split your string into an array of different strings based off of some kind of match criteria so I want to split it any time I see a comma right so anytime we see a comma we're gonna split it into a new item in the array so that's gonna give us four different items within the array and so now if I do a console dialogue we now get an array of four items and that's exactly what we need all right so we know how to handle getting the the values back from the local storage and modifying it to put it back into a array now we have to figure out how to load it into you state when we load up the webpage and here's a handy dandy little trick so right now this is getting passed into the array but what we can do instead is I can say instead of loading this we're going to pass the or function and say copy this localstorage this this line right here and copy that right here save and it looks like we're getting a warning for the key prop for the add coin list who cares about that and so let's test this out so I'm going to I'm going to add a coin so we'll just add a whole bunch of coins and let's double check that it's getting safe to storage and it is and now let's refresh the page remember the extra coins that we added so this is working but if I'm not sure if I've ever covered this in a previous video or a previous project um but what this line is saying is we have you state and then we're passing in two things that are separated by the two vertical brackets so it's saying that you know if local storage exists we want to set it to this if this item right here exists and we want to set it to this however if it doesn't then I want to set it to this essentially and the way that the reason that works is that we're just performing at performing a logical or so when we perform an or with you know something that has a value with another thing that has a value we're going to return this value and we can confirm that in the console so let's say I want to do four or or three returns that first one right and we'll do it again I could even do it with a string it doesn't really matter what kind of object and then or or or that string so it's always gonna return the first the first item that we pass in if it's defined however if I pass an undefined something that's undefined which if we have no local storage then it'll be set to undefined and I pass an or and then I pass in an you know a number for gets returned so that's all it's doing right if this exists we're gonna pass that in if it doesn't exist and it's undefined it then we're going to pass this in and so that's it guys we have completed our app we've implemented a ton of different things and we've got a chance to learn about a lot of different things including like local storage how it is how to basically send a bunch of API requests concurrently and there's a few other things that we've covered that we never gotten a chance to cover before so this is you know as I said was definitely one of my favorite projects but I'm a little gassed out from from having to talk for the past 5-6 hours for recording this video but anyways I hope you guys enjoyed this video and enjoyed this project we've still got plenty more to come so so hopefully you guys are ready

Channel: Sanjeev Thiyagarajan

Views: 18,700

Rating: 4.9282513 out of 5

Keywords:

Id: 3m-3qnEXIUk

Length: 167min 4sec (10024 seconds)

Published: Sat Jul 18 2020