Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,160 --> 00:00:04,340
So how can we send a POST request
2
00:00:04,340 --> 00:00:06,060
when we click Add Movie,
3
00:00:06,060 --> 00:00:09,663
to submit that movie data we collected two Firebase?
4
00:00:10,550 --> 00:00:13,150
Well, we already got this ad movie handler,
5
00:00:13,150 --> 00:00:16,730
which is in the end triggered when ad movie is clicked.
6
00:00:16,730 --> 00:00:21,550
And there we get a movie object, which in the end contains
7
00:00:21,550 --> 00:00:25,080
a title, an opening text and a release date.
8
00:00:25,080 --> 00:00:28,960
An ID will be added by Firebase automatically.
9
00:00:28,960 --> 00:00:32,130
So in the end here it's in this add movie handler
10
00:00:32,130 --> 00:00:35,540
where we wanna send another Http request
11
00:00:35,540 --> 00:00:38,090
by using the fetch API.
12
00:00:38,090 --> 00:00:40,900
And I mentioned, even though it's called fetch,
13
00:00:40,900 --> 00:00:43,470
it's not just the air to fetch data,
14
00:00:43,470 --> 00:00:46,800
you can also use that same function to send data.
15
00:00:46,800 --> 00:00:50,500
Might sound strange, but that's just how it works.
16
00:00:50,500 --> 00:00:52,710
Of course, by the way you could also outsource
17
00:00:52,710 --> 00:00:55,270
some code into separate functions,
18
00:00:55,270 --> 00:00:59,760
maybe also stored in other files to keep this file lean.
19
00:00:59,760 --> 00:01:03,980
Here for education purposes, I'll keep it all in one file.
20
00:01:03,980 --> 00:01:06,060
So back to addMoviehandler.
21
00:01:06,060 --> 00:01:07,560
We wanna send the request.
22
00:01:07,560 --> 00:01:10,410
And of course I wanna send it to the same URL
23
00:01:10,410 --> 00:01:12,460
which I use for getting my data,
24
00:01:12,460 --> 00:01:15,600
otherwise getting would never succeed.
25
00:01:15,600 --> 00:01:19,190
But I said that fetched by default sends a GET request.
26
00:01:19,190 --> 00:01:22,490
And here we now need a POST request.
27
00:01:22,490 --> 00:01:24,820
The fetch API works such that you can pass
28
00:01:24,820 --> 00:01:27,210
a second argument to fetch.
29
00:01:27,210 --> 00:01:29,570
And you can use that argument to configure
30
00:01:29,570 --> 00:01:31,500
this outgoing request.
31
00:01:31,500 --> 00:01:34,350
And for example you can set the method key.
32
00:01:34,350 --> 00:01:38,780
By default, this is GET, but here we can set it to POST
33
00:01:38,780 --> 00:01:40,570
to send a POST request.
34
00:01:40,570 --> 00:01:43,710
And if you send a POST request to this end point,
35
00:01:43,710 --> 00:01:47,070
at our Firebase service, Firebase we'll go ahead
36
00:01:47,070 --> 00:01:49,710
and create a resource in the database.
37
00:01:49,710 --> 00:01:53,380
Now what happens exactly when sending a POST request
38
00:01:53,380 --> 00:01:58,070
to some URL always depends on the backend you're using.
39
00:01:58,070 --> 00:02:00,950
It's not set in stone that sending a POST request
40
00:02:00,950 --> 00:02:02,900
will always create a resource
41
00:02:02,900 --> 00:02:04,570
even though it's typically will,
42
00:02:04,570 --> 00:02:07,510
but it always depends on the concrete API.
43
00:02:07,510 --> 00:02:10,380
Here for Firebase, sending a POST request
44
00:02:10,380 --> 00:02:12,520
we'll create a resource.
45
00:02:12,520 --> 00:02:15,190
So, we also need to add that resource
46
00:02:15,190 --> 00:02:16,580
which should be stored.
47
00:02:16,580 --> 00:02:19,080
And we do that with the body option here
48
00:02:19,080 --> 00:02:22,520
on this fetch API configuration object.
49
00:02:22,520 --> 00:02:25,010
Here I wanna pass on my movie,
50
00:02:25,010 --> 00:02:29,290
though body doesn't want a JavaScript object like this,
51
00:02:29,290 --> 00:02:31,850
instead it wants JSON data.
52
00:02:31,850 --> 00:02:35,150
I mentioned before that JSON is this data format
53
00:02:35,150 --> 00:02:37,640
which is typically used for exchanging data
54
00:02:37,640 --> 00:02:39,423
between front-end and backend.
55
00:02:40,300 --> 00:02:43,370
Now to convert a JavaScript object to JSON,
56
00:02:43,370 --> 00:02:47,010
we can use a utility method which exists in JavaScript.
57
00:02:47,010 --> 00:02:49,460
We can use the JSON object, which is built
58
00:02:49,460 --> 00:02:54,460
into browser side JavaScript and call stringify
59
00:02:54,770 --> 00:02:57,200
and this basically takes a JavaScript object
60
00:02:57,200 --> 00:03:00,163
or array and turns it JSON format.
61
00:03:01,280 --> 00:03:03,760
Now last but not least, we need to add some headers
62
00:03:03,760 --> 00:03:06,840
or to be precise, one header, which we do by adding
63
00:03:06,840 --> 00:03:09,940
the headers key and setting an object as a value,
64
00:03:09,940 --> 00:03:13,660
and that's the content type header written like this,
65
00:03:13,660 --> 00:03:16,203
which should be set to application JSON.
66
00:03:17,150 --> 00:03:20,550
Technically this header is not required by Firebase,
67
00:03:20,550 --> 00:03:22,580
it would be able to handle the request
68
00:03:22,580 --> 00:03:26,780
even if that header is not set, but a lot of rest APIs
69
00:03:26,780 --> 00:03:29,370
to which you might be sending requests later,
70
00:03:29,370 --> 00:03:32,990
might require this extra header, which describes to content
71
00:03:32,990 --> 00:03:35,270
that will be sent, and therefore setting it
72
00:03:35,270 --> 00:03:38,470
is not a bad idea, and it will set it here even though
73
00:03:38,470 --> 00:03:40,083
it's technically not required.
74
00:03:41,470 --> 00:03:43,860
And with that, we'll send a POST request
75
00:03:43,860 --> 00:03:47,180
with that data, to this URL.
76
00:03:47,180 --> 00:03:49,560
Again, this will be a asynchronous task
77
00:03:49,560 --> 00:03:52,297
and we get back a promise, so we can again use
78
00:03:52,297 --> 00:03:57,297
async await here, to await our response.
79
00:03:58,770 --> 00:04:01,780
And then we can also get our response data
80
00:04:01,780 --> 00:04:04,880
by awaiting response dot JSON,
81
00:04:04,880 --> 00:04:08,900
because Firebase also sends back data in JSON format.
82
00:04:08,900 --> 00:04:11,573
And for the moment we can console log that data.
83
00:04:12,810 --> 00:04:15,900
Now of course, we could also add error handling here
84
00:04:15,900 --> 00:04:18,420
and all the wrap this with try catch
85
00:04:18,420 --> 00:04:20,250
and do the same as we did before.
86
00:04:20,250 --> 00:04:23,720
Set Error if we get an error and so on.
87
00:04:23,720 --> 00:04:25,630
I'll not do that here though,
88
00:04:25,630 --> 00:04:27,850
because I wanna keep those short and focused,
89
00:04:27,850 --> 00:04:30,770
but we could do exactly the same as we did before
90
00:04:30,770 --> 00:04:31,893
for getting data.
91
00:04:32,940 --> 00:04:36,300
Now with that though, we hopefully do store some data.
92
00:04:36,300 --> 00:04:40,143
So for now, reload, I can try entering a title here,
93
00:04:41,060 --> 00:04:45,100
my first movie, and some texts here,
94
00:04:45,100 --> 00:04:50,100
and some release dat of our choice doesn't matter at all,
95
00:04:50,620 --> 00:04:52,500
and click Add Movie.
96
00:04:52,500 --> 00:04:55,740
And now let's have a look at the Firebase back-end.
97
00:04:55,740 --> 00:04:57,630
And here in the real-time database,
98
00:04:57,630 --> 00:05:00,190
you should see a new movies node,
99
00:05:00,190 --> 00:05:05,120
because we sent this request to slash movies here.
100
00:05:05,120 --> 00:05:08,810
And in that movies node, you find this encrypt ID
101
00:05:08,810 --> 00:05:12,080
which was auto-generated by Firebase,
102
00:05:12,080 --> 00:05:14,530
and there you find the data which was sent.
103
00:05:14,530 --> 00:05:15,523
So this worked.
104
00:05:16,690 --> 00:05:19,780
In the React app, if you open the developer tools
105
00:05:19,780 --> 00:05:22,610
into JavaScript console, you should also see
106
00:05:22,610 --> 00:05:25,390
the response object you got back from Firebase
107
00:05:25,390 --> 00:05:29,380
and their Firebase replied with that auto generated ID
108
00:05:29,380 --> 00:05:31,483
which was stored in some name field.
109
00:05:32,330 --> 00:05:35,450
So this is how we can send a POST request.
110
00:05:35,450 --> 00:05:39,250
Now, if we click Fetch Movies, it should be able
111
00:05:39,250 --> 00:05:42,180
to get back some movies, but of course our logic
112
00:05:42,180 --> 00:05:45,650
for transforming these movies doesn't work anymore.
113
00:05:45,650 --> 00:05:48,760
Previously we expected that we have our results field
114
00:05:48,760 --> 00:05:53,090
in our result, but now actually that's not the case anymore.
115
00:05:53,090 --> 00:05:58,090
If I console log the data, we get back when fetching movies,
116
00:05:58,950 --> 00:06:03,000
if I console log that, you will see that if I reload,
117
00:06:03,000 --> 00:06:05,470
the data we get back as an object
118
00:06:05,470 --> 00:06:08,170
where we have the encrypted ID as a key
119
00:06:08,170 --> 00:06:09,770
and then another nested object
120
00:06:09,770 --> 00:06:12,010
with the actual movie data.
121
00:06:12,010 --> 00:06:15,220
So we're not getting back in array but an object
122
00:06:15,220 --> 00:06:19,373
where the IDs are keys and then the data are nested objects.
123
00:06:20,260 --> 00:06:22,930
So we just need to transform this appropriately
124
00:06:22,930 --> 00:06:25,340
to again display our movies.
125
00:06:25,340 --> 00:06:29,490
So therefore here, we're not using map anymore,
126
00:06:29,490 --> 00:06:33,383
instead now here, we could simply create an array,
127
00:06:34,590 --> 00:06:37,990
loaded movies, which initially is empty,
128
00:06:37,990 --> 00:06:42,370
and then create a for in loop to loop through all the keys
129
00:06:42,370 --> 00:06:46,360
in data, because data is now an object as I just mentioned,
130
00:06:46,360 --> 00:06:50,713
and keys are the IDs of the movies actually as you saw here.
131
00:06:51,820 --> 00:06:55,240
And then we simply want to go to loaded movies
132
00:06:55,240 --> 00:06:59,660
and push a new object for every key value pair
133
00:06:59,660 --> 00:07:04,460
we got in the response data, and say the ID equal to key,
134
00:07:04,460 --> 00:07:09,460
set title equal to data for the given key dot title.
135
00:07:09,560 --> 00:07:12,700
So here we're drilling into that nested object
136
00:07:12,700 --> 00:07:14,070
we got into response.
137
00:07:14,070 --> 00:07:16,960
We're drilling into this object here,
138
00:07:16,960 --> 00:07:20,063
where we have a title, opening, text and release date.
139
00:07:21,530 --> 00:07:25,710
This is how we dynamically access a property in JavaScript.
140
00:07:25,710 --> 00:07:30,033
And we're doing that for the title, for the opening text,
141
00:07:32,190 --> 00:07:36,780
and then also last but not least, for the release date.
142
00:07:36,780 --> 00:07:39,500
Here we also do that like this.
143
00:07:39,500 --> 00:07:40,870
And there would be other ways
144
00:07:40,870 --> 00:07:43,370
of writing that's transformation logic,
145
00:07:43,370 --> 00:07:46,823
but this way is hopefully very easy to understand.
146
00:07:48,180 --> 00:07:50,760
So then because our loaded movies, which now again
147
00:07:50,760 --> 00:07:54,010
is an array full of objects, full of objects
148
00:07:54,010 --> 00:07:56,240
which have to structure we expect,
149
00:07:56,240 --> 00:07:58,940
and therefore we can now get rid of this code
150
00:07:58,940 --> 00:08:02,030
and set our movies here equal to loaded movies,
151
00:08:02,030 --> 00:08:03,743
which is this array we just built.
152
00:08:05,450 --> 00:08:10,210
And with that, if I reload, you see that data is now loaded.
153
00:08:10,210 --> 00:08:15,210
And if I now add a second movie with more text,
154
00:08:16,560 --> 00:08:21,560
and a release date of 2022, sometime in August,
155
00:08:22,560 --> 00:08:26,640
I can click Add Movie, and if I fetch my movies there after,
156
00:08:26,640 --> 00:08:28,930
I get the second movie as well.
157
00:08:28,930 --> 00:08:30,700
And of course you could now tweak this app.
158
00:08:30,700 --> 00:08:32,460
You could make sure that new movies
159
00:08:32,460 --> 00:08:36,030
are fetched automatically after a movie was submitted.
160
00:08:36,030 --> 00:08:39,320
You can add error handling in the addMoviehandler.
161
00:08:39,320 --> 00:08:42,640
You can do all of that, but this is just a demo
162
00:08:42,640 --> 00:08:46,080
to show you the core parts that are involved
163
00:08:46,080 --> 00:08:49,040
when it comes to sending HTTP requests.
164
00:08:49,040 --> 00:08:52,550
And you now saw how you can set a GET request here
165
00:08:52,550 --> 00:08:57,550
to get data and how you can send a request to store data.
166
00:08:58,020 --> 00:09:02,330
Both matters in many applications, and now you know both,
167
00:09:02,330 --> 00:09:03,890
and you'll also know how you can handle
168
00:09:03,890 --> 00:09:05,990
different states and errors.
169
00:09:05,990 --> 00:09:08,430
We didn't do it here for addMoviehandler,
170
00:09:08,430 --> 00:09:11,400
but it would work in exactly the same way
171
00:09:11,400 --> 00:09:14,987
as for getting our movies with fetchMoviesHandler.
14124
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.