We can now start to make our request to the Google API from inside this use effect function.
The first thing we need to do is make sure that we install Axios into our project.
So back over at my terminal, I'm gonna make sure that I'm inside of the Widgets Project directory and
I'll do an NPR install Axios.
I'm gonna let that go ahead and do his thing, it should only take a moment or two to install.
All right, there we go.
Once it's all installed, I'll go back over to my convert to James file and at the top I will import
Axios from Axios.
I'm then going to replace my console log inside of use effect.
Now, whenever we get a new language or text, we're gonna make our request over to the Google API.
Normally, we would make the request inside of here and then take the response and pull some data out
of it.
But for right now, let's just try to make the request by itself.
Just make the request and we'll take a look at the request that's being issued inside of our network
request log after we can confirm that we are making the request successfully.
And we understand the form.
The response will then take some data out of it and set some state and stuff like that.
Right now, we'll just write in a direct axios dot post.
Notice that we don't even have a weight or anything like that inside of here.
So we're going to put in the URL right here.
Now, the URL is rather long.
So make sure that you type it out identically to about to what I'm about to show you.
We're going to put an HTP s bohlin slash slash translation dot Google API is dot.com flash language
last translate slash V to.
Now, this you are l right here is pretty much not going to change in any number of years at all.
So if you start to get any foreign force, once you make this request, I can just about guarantee you
that you are putting in an incorrect.
You are l right here, but please make sure that you double check.
You got that Colin slash slash.
Double check your spelling the word translation.
Make sure you've got Google AP eyes and not just Google and so on.
We are making a post request here.
And whenever we make a post request, the second argument to Axios is always gonna be some information
to send along in the body.
Remember, if we look back at the actual documentation really quickly, the documentation for that API
that we are using says very clearly that we should provide these as query string parameters, even though
we're making a post request.
We're not gonna send anything along in the body.
Technically, you can with this API is just not quite very well documented.
Instead, we're going to send all of our data along as query string parameters.
And to do so, we have to provide a third argument.
A third object to the Accio Scott Post statement.
We're going to leave the second object right here in the second argument as an empty object to say that
we don't want to send along any information in the body, the request.
Instead, we want to provide a third argument to a second object.
Inside there is going to be a Paramo property.
And that's where we are going to add all of our query string parameters.
To make sure you've got that empty object, then another object with BRAMS and inside of here is where
we are going to add in that Q target and the API key.
OK, so first off, the key property, that is the text that you want to translate in our case, the
text you want to translate is coming from the text crop is coming into our convert component.
We'll put inside of your text.
Next up is our target.
That is the target language.
And we are receiving that from the language prop.
That is coming into the convert component.
Remember, at this point, language, that prop right.
There is going to be the entire option object so it can have a label and a value.
We want specifically the language code.
So we're going to provide language dot value.
So we'll put it in target of language.
And then finally, the last property.
Is our key.
That's the API key that you should have copy pasted a little bit ago.
So we'll put in key and the value for that.
I'm gonna go back towards my translator J.S. file.
I'm going to cut that API key I had stored up here.
And then pasted in right there.
All right, so that should be it.
That should be enough to make our request.
It's going to save this file and then flip back over.
And we'll see how we're doing.
Right away, we could go to our network request tab whenever our convert component is first displayed
on the screen, the use effect function is going to run.
And so we can see already that there has been one request made to that translation API.
I've got a status of 200 right here.
If you see any other kind of status, specifically a status of 404 or three or four o four, you can
either click on that thing and take a look at the preview tab.
And it should have some kind of error message here to tell you what is going wrong.
For me, looks like everything worked out correctly.
So on the previous tab, I can see that I have back a data property that has translations and that is
an array of object.
And each of these objects are going to have some possible translation of the text that we submitted.
Right now, we do not actually enter in any text whatsoever.
So the translation result is, well, an empty string.
If we start to put in some text to translate inside of here.
So how about I there?
You'll notice that with every single key press, we are making an additional request by then.
Take a look at the very final request here.
I can take a look at the euro itself and notice that we submitted the text hi there to be translated.
And then if I look at the response.
I can see the results.
So if I translate hi there into Afrikaans, I get Haidar, I suppose, is that I'd be translated or
pronounced.
No, I'd say that looks pretty good.
We can also try changing the language.
So let's try going over to say Dutch.
We can take a look at that additional request.
And hello, Da.
I suppose to be the Dutch, I probably have that accent pretty butchered, but you get the idea.
So I'd say that this looks pretty good.
Now, all we really have to do is pass the response.
We're getting back to an API poll out that translated texts, update a piece of state inside of our
convert component and show it on the screen.
Let's take care of that in just a moment.