1 00:00:01,370 --> 00:00:05,750 We can now start to make our request to the Google API from inside this use effect function. 2 00:00:06,080 --> 00:00:09,380 The first thing we need to do is make sure that we install Axios into our project. 3 00:00:09,890 --> 00:00:15,170 So back over at my terminal, I'm gonna make sure that I'm inside of the Widgets Project directory and 4 00:00:15,170 --> 00:00:17,240 I'll do an NPR install Axios. 5 00:00:19,050 --> 00:00:22,390 I'm gonna let that go ahead and do his thing, it should only take a moment or two to install. 6 00:00:24,190 --> 00:00:25,510 All right, there we go. 7 00:00:26,910 --> 00:00:31,650 Once it's all installed, I'll go back over to my convert to James file and at the top I will import 8 00:00:31,710 --> 00:00:33,840 Axios from Axios. 9 00:00:35,130 --> 00:00:38,500 I'm then going to replace my console log inside of use effect. 10 00:00:39,160 --> 00:00:43,810 Now, whenever we get a new language or text, we're gonna make our request over to the Google API. 11 00:00:44,840 --> 00:00:49,070 Normally, we would make the request inside of here and then take the response and pull some data out 12 00:00:49,070 --> 00:00:49,310 of it. 13 00:00:49,460 --> 00:00:52,700 But for right now, let's just try to make the request by itself. 14 00:00:53,060 --> 00:00:57,350 Just make the request and we'll take a look at the request that's being issued inside of our network 15 00:00:57,350 --> 00:01:01,190 request log after we can confirm that we are making the request successfully. 16 00:01:01,430 --> 00:01:02,630 And we understand the form. 17 00:01:02,630 --> 00:01:06,560 The response will then take some data out of it and set some state and stuff like that. 18 00:01:07,900 --> 00:01:10,990 Right now, we'll just write in a direct axios dot post. 19 00:01:11,470 --> 00:01:14,410 Notice that we don't even have a weight or anything like that inside of here. 20 00:01:16,450 --> 00:01:18,060 So we're going to put in the URL right here. 21 00:01:18,330 --> 00:01:19,830 Now, the URL is rather long. 22 00:01:19,860 --> 00:01:23,430 So make sure that you type it out identically to about to what I'm about to show you. 23 00:01:23,920 --> 00:01:33,840 We're going to put an HTP s bohlin slash slash translation dot Google API is dot.com flash language 24 00:01:34,470 --> 00:01:36,570 last translate slash V to. 25 00:01:39,380 --> 00:01:45,110 Now, this you are l right here is pretty much not going to change in any number of years at all. 26 00:01:45,620 --> 00:01:49,850 So if you start to get any foreign force, once you make this request, I can just about guarantee you 27 00:01:49,910 --> 00:01:51,600 that you are putting in an incorrect. 28 00:01:51,650 --> 00:01:55,070 You are l right here, but please make sure that you double check. 29 00:01:55,100 --> 00:01:56,510 You got that Colin slash slash. 30 00:01:56,750 --> 00:01:58,370 Double check your spelling the word translation. 31 00:01:58,640 --> 00:02:02,090 Make sure you've got Google AP eyes and not just Google and so on. 32 00:02:03,910 --> 00:02:05,280 We are making a post request here. 33 00:02:05,430 --> 00:02:10,980 And whenever we make a post request, the second argument to Axios is always gonna be some information 34 00:02:10,980 --> 00:02:12,330 to send along in the body. 35 00:02:12,900 --> 00:02:18,480 Remember, if we look back at the actual documentation really quickly, the documentation for that API 36 00:02:18,510 --> 00:02:24,420 that we are using says very clearly that we should provide these as query string parameters, even though 37 00:02:24,420 --> 00:02:25,440 we're making a post request. 38 00:02:25,500 --> 00:02:27,390 We're not gonna send anything along in the body. 39 00:02:27,780 --> 00:02:30,930 Technically, you can with this API is just not quite very well documented. 40 00:02:31,350 --> 00:02:35,220 Instead, we're going to send all of our data along as query string parameters. 41 00:02:35,840 --> 00:02:38,670 And to do so, we have to provide a third argument. 42 00:02:38,760 --> 00:02:42,090 A third object to the Accio Scott Post statement. 43 00:02:42,750 --> 00:02:47,580 We're going to leave the second object right here in the second argument as an empty object to say that 44 00:02:47,580 --> 00:02:50,280 we don't want to send along any information in the body, the request. 45 00:02:50,820 --> 00:02:54,810 Instead, we want to provide a third argument to a second object. 46 00:02:55,740 --> 00:02:58,500 Inside there is going to be a Paramo property. 47 00:02:58,950 --> 00:03:01,980 And that's where we are going to add all of our query string parameters. 48 00:03:04,480 --> 00:03:11,660 To make sure you've got that empty object, then another object with BRAMS and inside of here is where 49 00:03:11,660 --> 00:03:16,280 we are going to add in that Q target and the API key. 50 00:03:18,130 --> 00:03:22,810 OK, so first off, the key property, that is the text that you want to translate in our case, the 51 00:03:22,810 --> 00:03:27,560 text you want to translate is coming from the text crop is coming into our convert component. 52 00:03:28,030 --> 00:03:29,380 We'll put inside of your text. 53 00:03:31,520 --> 00:03:33,320 Next up is our target. 54 00:03:33,530 --> 00:03:35,000 That is the target language. 55 00:03:35,410 --> 00:03:38,880 And we are receiving that from the language prop. 56 00:03:39,020 --> 00:03:40,640 That is coming into the convert component. 57 00:03:41,210 --> 00:03:43,460 Remember, at this point, language, that prop right. 58 00:03:43,460 --> 00:03:47,750 There is going to be the entire option object so it can have a label and a value. 59 00:03:48,080 --> 00:03:50,150 We want specifically the language code. 60 00:03:50,270 --> 00:03:52,820 So we're going to provide language dot value. 61 00:03:54,000 --> 00:03:56,210 So we'll put it in target of language. 62 00:03:59,970 --> 00:04:02,370 And then finally, the last property. 63 00:04:03,450 --> 00:04:04,070 Is our key. 64 00:04:04,470 --> 00:04:07,170 That's the API key that you should have copy pasted a little bit ago. 65 00:04:08,120 --> 00:04:10,130 So we'll put in key and the value for that. 66 00:04:10,250 --> 00:04:12,620 I'm gonna go back towards my translator J.S. file. 67 00:04:13,460 --> 00:04:15,950 I'm going to cut that API key I had stored up here. 68 00:04:18,410 --> 00:04:20,030 And then pasted in right there. 69 00:04:22,630 --> 00:04:23,650 All right, so that should be it. 70 00:04:23,710 --> 00:04:25,390 That should be enough to make our request. 71 00:04:26,040 --> 00:04:28,600 It's going to save this file and then flip back over. 72 00:04:30,120 --> 00:04:31,030 And we'll see how we're doing. 73 00:04:32,320 --> 00:04:37,500 Right away, we could go to our network request tab whenever our convert component is first displayed 74 00:04:37,500 --> 00:04:39,810 on the screen, the use effect function is going to run. 75 00:04:40,230 --> 00:04:44,610 And so we can see already that there has been one request made to that translation API. 76 00:04:45,360 --> 00:04:47,400 I've got a status of 200 right here. 77 00:04:47,970 --> 00:04:54,750 If you see any other kind of status, specifically a status of 404 or three or four o four, you can 78 00:04:54,840 --> 00:04:57,780 either click on that thing and take a look at the preview tab. 79 00:04:57,900 --> 00:05:01,030 And it should have some kind of error message here to tell you what is going wrong. 80 00:05:03,790 --> 00:05:05,600 For me, looks like everything worked out correctly. 81 00:05:06,410 --> 00:05:11,900 So on the previous tab, I can see that I have back a data property that has translations and that is 82 00:05:11,900 --> 00:05:13,110 an array of object. 83 00:05:14,000 --> 00:05:17,840 And each of these objects are going to have some possible translation of the text that we submitted. 84 00:05:18,380 --> 00:05:21,560 Right now, we do not actually enter in any text whatsoever. 85 00:05:21,980 --> 00:05:25,100 So the translation result is, well, an empty string. 86 00:05:26,470 --> 00:05:29,050 If we start to put in some text to translate inside of here. 87 00:05:29,200 --> 00:05:30,780 So how about I there? 88 00:05:31,180 --> 00:05:35,800 You'll notice that with every single key press, we are making an additional request by then. 89 00:05:35,800 --> 00:05:37,570 Take a look at the very final request here. 90 00:05:39,480 --> 00:05:44,940 I can take a look at the euro itself and notice that we submitted the text hi there to be translated. 91 00:05:47,030 --> 00:05:48,390 And then if I look at the response. 92 00:05:50,030 --> 00:05:51,080 I can see the results. 93 00:05:52,040 --> 00:05:58,140 So if I translate hi there into Afrikaans, I get Haidar, I suppose, is that I'd be translated or 94 00:05:58,140 --> 00:05:58,680 pronounced. 95 00:05:59,740 --> 00:06:00,700 No, I'd say that looks pretty good. 96 00:06:00,730 --> 00:06:02,410 We can also try changing the language. 97 00:06:02,440 --> 00:06:04,450 So let's try going over to say Dutch. 98 00:06:05,020 --> 00:06:06,970 We can take a look at that additional request. 99 00:06:09,100 --> 00:06:10,150 And hello, Da. 100 00:06:10,360 --> 00:06:14,890 I suppose to be the Dutch, I probably have that accent pretty butchered, but you get the idea. 101 00:06:15,490 --> 00:06:16,870 So I'd say that this looks pretty good. 102 00:06:17,230 --> 00:06:20,590 Now, all we really have to do is pass the response. 103 00:06:20,590 --> 00:06:25,690 We're getting back to an API poll out that translated texts, update a piece of state inside of our 104 00:06:25,690 --> 00:06:27,760 convert component and show it on the screen. 105 00:06:28,480 --> 00:06:30,040 Let's take care of that in just a moment.