‫Welcome to the next coding challenge.
‫And in this one, we will build this very simple
‫currency conversion tool.
‫So here we can input some amount of money
‫that we want to convert from one currency to another.
‫So let's say for example, we want to convert 100 euro,
‫so the input currency to the output currency,
‫which is US dollars right now.
‫And so you see that the converted value is $107.17.
‫And this conversion here is actually done by an API
‫which contains real time currency conversion data.
‫And so by the time you're watching this,
‫the value here will most likely look different.
‫And of course we can also change the currencies.
‫So let's say we want to convert from US dollar to euro,
‫so the other way around.
‫And then 100 euros or actually $100 is just €93.
‫Now right.
‫So this is the task for this lecture.
‫And as always, we are starting
‫from some very simple starter file.
‫So here I already have, basically the HTML skeleton
‫laid out for you, here in the app component.
‫And so your task now, is to first transform
‫these elements here into controlled input elements.
‫So just like we have done before.
‫And then after that, I want you to use an effect,
‫like we did in this section,
‫in order to actually do an API call to this URL here,
‫which will then do the actual conversion.
‫So here, again,
‫is the URL of the API that we're going to use.
‫So your fetch request will be made to this URL right here.
‫And then you can replace the amount,
‫the from currency and the to currency.
‫And if you want to get more information about this API,
‫you can just go to this link right here.
‫Alright.
‫And so as you see here in the demo,
‫the conversion is made each time
‫that one of these three fields here updates.
‫So if I delete something here,
‫then immediately the value is updated here
‫with a new value, coming from the API.
‫And the same if we change here to some other currency.
‫So this is going to be a bit similar
‫to what we did throughout this section.
‫And so take a few minutes now
‫and I'll see you back here once you are finished,
‫so that you can then check out if your solution is correct
‫and what you could have done maybe differently.
‫Okay.
‫So I hope that you had a great time
‫with building this calculator
‫and that you had some success with it.
‫So if your calculator works,
‫then you are already done with this video here.
‫But in any case,
‫I will of course now implement my own solution here.
‫And I will just start
‫by making these three elements here, controlled elements.
‫So let's create some pieces of state.
‫So amount and set amount.
‫And of course, you could have called them any other thing.
‫So that's not really important.
‫And let's actually start with one here.
‫So that's const.
‫And then here,
‫let's do the from currency
‫and set from currency.
‫And here the default is going to be euro.
‫And then let's do the same for the other currency.
‫So to currency and set to currency.
‫And so here let's use by default, US dollar.
‫And now we just need to wire all that up
‫here with these elements.
‫So the value should be the amount.
‫And then on change, we do,
‫set amount is equal to e.target.value
‫but we should not forget to actually convert this
‫to a number.
‫Because otherwise we get a string
‫and that we cannot really convert.
‫Well probably we could, actually because we will
‫then plug it here into a string later.
‫But yeah, it's nicer to have it all
‫in the correct data format here.
‫But anyway, this now is the from currency.
‫And then
‫on change will be,
‫set from currency,
‫again, e.target.value.
‫Okay.
‫And now I will just copy the same thing
‫here to the other select element.
‫So to currency and
‫set to currency.
‫And here we are missing this closing brackets.
‫And yeah, that's it for the controlled elements.
‫And so let's now get to work on the effect.
‫So use effect
‫and then passing in our effect function, as always.
‫And then let's initially run this on component mount.
‫So we will do an HTTP request
‫to this URL right here.
‫And therefore, we will need a fetch function
‫which returns a promise.
‫And therefore, we now need an async function.
‫And since the effect function itself cannot be async,
‫let's create another one in here.
‫So async function
‫and calling it simply, convert.
‫And then, later we will simply call that function in here.
‫Okay.
‫And now let's do the actual conversion itself.
‫So we will do our fetch request to this URL
‫right here.
‫So let's grab that.
‫And then of course we need to replace all these values here
‫in this template, literally.
‫So amount.
‫Here we have the from currency.
‫And then finally, we have also, the
‫to currency.
‫And so this will, remember, return a promise.
‫And so let's await that promise
‫and store it in a variable called, response.
‫And then from there, let's also await the data itself.
‫So await by converting the response to Jason.
‫And then let's start by simply logging that to the console.
‫So checking out the data,
‫so that we know which format it has.
‫And immediately we see down here, that we get a result.
‫And so that means that our effect is already working
‫with the default data that we gave it here.
‫So here then, we can see that inside the rates object,
‫we have the USD property, which is our to currency.
‫And so that's the converted value right here.
‫So let's try to read that value.
‫So that's inside, data.rates.
‫And now we need to dynamically read the property from there.
‫So in this case, that's USD
‫but of course we cannot hard code that.
‫Because if our to currency would be euros,
‫then here we would have euros.
‫And so we can simply read the property,
‫by doing it like this.
‫And so there is our number.
‫And so instead of logging it to the console,
‫we now want to have it appear on the screen right here.
‫So as always, what we need, is a new piece of state.
‫And set converted.
‫And so just like before,
‫as soon as the data arrives, we will update the state,
‫which will then update our user interface
‫and show us the converted value.
‫Here let's start with nothing.
‫And yeah, simply replacing this console.log with set
‫converted, give it a save and nothing happened.
‫But it should happen as we reload the page.
‫Well actually not and well of course,
‫the reason is that down here we still hard coded the output.
‫So here now we want to read converted
‫and then we can even write the to currency here as well.
‫So we have 1.0717
‫US dollars.
‫Great.
‫So that's working just fine.
‫But what if we change something here?
‫So now I update this to 100
‫but you see that nothing is happening.
‫And if you remember everything we just learned
‫throughout this section,
‫this is going to make total sense to you.
‫Because as we type a new number here,
‫we will update the state that is inside the app component.
‫And therefore we will re-render this component.
‫However, our effect right now,
‫only runs on the initial render.
‫So we don't have anything here in our dependency array.
‫And so React has no way of knowing
‫that it should also rerun this effect right now.
‫And so, let's change that.
‫So let's basically give our dependency array
‫all the values that our effect in fact depends on.
‫And so those are, amount, the from currency
‫and the to currency.
‫So each time one of these three changes,
‫then our effect here should basically synchronize
‫with any of those.
‫So amount, from currency
‫and to currency.
‫And again here I like to use the analogy,
‫that this dependency array is essentially
‫like listening for one of these three variables to change.
‫And then each time that happens,
‫it will just re-execute our effect again.
‫And so this means that really,
‫our effect is now synchronized to these three variables.
‫Great.
‫And so, as we type here,
‫you see that the value actually updates.
‫Now you do see maybe,
‫that it takes some time for the update to happen.
‫Let's maybe click here.
‫And notice that the change wasn't immediate.
‫And if you have a slower internet connection,
‫then maybe for you it will take even longer.
‫And so that's of course
‫because our application needs to make this API call
‫and only after that, the state is updated.
‫So only then we get our results, which we can display here.
‫So to tell the user about that,
‫we again need our loading state.
‫So let's do that.
‫And notice how here we are just ignoring errors.
‫So if something goes wrong,
‫then we are not accounting for that situation right here.
‫But this is just a challenge to make the effect work.
‫So set is loading to true.
‫And of course, first I need to create
‫this new piece of state.
‫So is loading and set is loading.
‫And we start with false.
‫And then before the fetch happens, we set it to true.
‫And once we are done, we set it to false again.
‫So set is loading
‫back to false.
‫But now where do we actually use, this is loading state?
‫So we could of course, again display some loader here.
‫So something like a text displaying loading.
‫But instead, what I want to do here,
‫is to basically disable these three fields.
‫And so that then has the purpose
‫of showing the user that something is happening.
‫And also, besides that, it then prevents the user
‫from typing in anything else
‫and creating multiple HTTP requests at the same time.
‫So let's do that.
‫And this we haven't done before, actually.
‫But in all of these input elements,
‫we can specify the disabled prop.
‫Which again, is standard HTML.
‫And so disabled basically takes a true or false.
‫So if we set it just to true here,
‫then you see that it gets like, grayed out
‫and then we cannot do anything with it.
‫Now of course,
‫we don't want it to always be true but instead,
‫we want it to be disabled, when is loading, is true.
‫Okay.
‫And we will do this many other times
‫throughout the course.
‫So this is a pretty common thing to do actually.
‫Okay.
‫And this one as well.
‫And now watch what happens when I click.
‫So very shortly, these three got disabled,
‫which shows the user that indeed, something is happening.
‫So that the data is being loaded in the background.
‫Now there's just one final thing that I want to do,
‫which is, what happens when these two are the same.
‫And in fact, we even get an error in this situation.
‫Because the API is not made for the case
‫that we are converting from one currency to the same one.
‫So let's fix that and that's not too hard.
‫So before we do any of this, we can check
‫if the from currency is the same as the to currency.
‫And so in that case,
‫then we basically do not want to run the convert function.
‫So let's do that down here.
‫So outside of this function and before even calling it.
‫So we just say,
‫if from
‫Cur is equal
‫to the to currency,
‫then return and also set the converted value
‫to the amount.
‫Which is simply because the converted value will be the same
‫as the amount, if the currency is the same, right.
‫So let's try that here.
‫I'm just reloading to getting rid of those errors.
‫And then let's see.
‫And there we go.
‫So now one euro is one euro.
‫And we didn't even have to call the API for this conversion
‫because it is in fact not really a conversion.
‫Okay.
‫And that's it, I think.
‫Now remember that we ignored errors here,
‫so we didn't handle them at all.
‫But you should never do that in the real world.
‫So that's just something that I wanted to mention here.
‫But since this is just a learning exercise,
‫that's no big deal.
‫But anyway, with this, we finish yet another section.
‫So congratulations on the great progress
‫that you have been making up until this point.
‫And now, after you hopefully review everything
‫we just learned in this section,
‫I'll see you right in the next one,
‫where we will dive even deeper
‫into the topic of React hooks.