Original subtitles

So how can we send a POST request

when we click Add Movie,

to submit that movie data we collected two Firebase?

Well, we already got this ad movie handler,

which is in the end triggered when ad movie is clicked.

And there we get a movie object, which in the end contains

a title, an opening text and a release date.

An ID will be added by Firebase automatically.

So in the end here it's in this add movie handler

where we wanna send another Http request

by using the fetch API.

And I mentioned, even though it's called fetch,

it's not just the air to fetch data,

you can also use that same function to send data.

Might sound strange, but that's just how it works.

Of course, by the way you could also outsource

some code into separate functions,

maybe also stored in other files to keep this file lean.

Here for education purposes, I'll keep it all in one file.

So back to addMoviehandler.

We wanna send the request.

And of course I wanna send it to the same URL

which I use for getting my data,

otherwise getting would never succeed.

But I said that fetched by default sends a GET request.

And here we now need a POST request.

The fetch API works such that you can pass

a second argument to fetch.

And you can use that argument to configure

this outgoing request.

And for example you can set the method key.

By default, this is GET, but here we can set it to POST

to send a POST request.

And if you send a POST request to this end point,

at our Firebase service, Firebase we'll go ahead

and create a resource in the database.

Now what happens exactly when sending a POST request

to some URL always depends on the backend you're using.

It's not set in stone that sending a POST request

will always create a resource

even though it's typically will,

but it always depends on the concrete API.

Here for Firebase, sending a POST request

we'll create a resource.

So, we also need to add that resource

which should be stored.

And we do that with the body option here

on this fetch API configuration object.

Here I wanna pass on my movie,

though body doesn't want a JavaScript object like this,

instead it wants JSON data.

I mentioned before that JSON is this data format

which is typically used for exchanging data

between front-end and backend.

Now to convert a JavaScript object to JSON,

we can use a utility method which exists in JavaScript.

We can use the JSON object, which is built

into browser side JavaScript and call stringify

and this basically takes a JavaScript object

or array and turns it JSON format.

Now last but not least, we need to add some headers

or to be precise, one header, which we do by adding

the headers key and setting an object as a value,

and that's the content type header written like this,

which should be set to application JSON.

Technically this header is not required by Firebase,

it would be able to handle the request

even if that header is not set, but a lot of rest APIs

to which you might be sending requests later,

might require this extra header, which describes to content

that will be sent, and therefore setting it

is not a bad idea, and it will set it here even though

it's technically not required.

And with that, we'll send a POST request

with that data, to this URL.

Again, this will be a asynchronous task

and we get back a promise, so we can again use

async await here, to await our response.

And then we can also get our response data

by awaiting response dot JSON,

because Firebase also sends back data in JSON format.

And for the moment we can console log that data.

Now of course, we could also add error handling here

and all the wrap this with try catch

and do the same as we did before.

Set Error if we get an error and so on.

I'll not do that here though,

because I wanna keep those short and focused,

but we could do exactly the same as we did before

for getting data.

Now with that though, we hopefully do store some data.

So for now, reload, I can try entering a title here,

my first movie, and some texts here,

and some release dat of our choice doesn't matter at all,

and click Add Movie.

And now let's have a look at the Firebase back-end.

And here in the real-time database,

you should see a new movies node,

because we sent this request to slash movies here.

And in that movies node, you find this encrypt ID

which was auto-generated by Firebase,

and there you find the data which was sent.

So this worked.

In the React app, if you open the developer tools

into JavaScript console, you should also see

the response object you got back from Firebase

and their Firebase replied with that auto generated ID

which was stored in some name field.

So this is how we can send a POST request.

Now, if we click Fetch Movies, it should be able

to get back some movies, but of course our logic

for transforming these movies doesn't work anymore.

Previously we expected that we have our results field

in our result, but now actually that's not the case anymore.

If I console log the data, we get back when fetching movies,

if I console log that, you will see that if I reload,

the data we get back as an object

where we have the encrypted ID as a key

and then another nested object

with the actual movie data.

So we're not getting back in array but an object

where the IDs are keys and then the data are nested objects.

So we just need to transform this appropriately

to again display our movies.

So therefore here, we're not using map anymore,

instead now here, we could simply create an array,

loaded movies, which initially is empty,

and then create a for in loop to loop through all the keys

in data, because data is now an object as I just mentioned,

and keys are the IDs of the movies actually as you saw here.

And then we simply want to go to loaded movies

and push a new object for every key value pair

we got in the response data, and say the ID equal to key,

set title equal to data for the given key dot title.

So here we're drilling into that nested object

we got into response.

We're drilling into this object here,

where we have a title, opening, text and release date.

This is how we dynamically access a property in JavaScript.

And we're doing that for the title, for the opening text,

and then also last but not least, for the release date.

Here we also do that like this.

And there would be other ways

of writing that's transformation logic,

but this way is hopefully very easy to understand.

So then because our loaded movies, which now again

is an array full of objects, full of objects

which have to structure we expect,

and therefore we can now get rid of this code

and set our movies here equal to loaded movies,

which is this array we just built.

And with that, if I reload, you see that data is now loaded.

And if I now add a second movie with more text,

and a release date of 2022, sometime in August,

I can click Add Movie, and if I fetch my movies there after,

I get the second movie as well.

And of course you could now tweak this app.

You could make sure that new movies

are fetched automatically after a movie was submitted.

You can add error handling in the addMoviehandler.

You can do all of that, but this is just a demo

to show you the core parts that are involved

when it comes to sending HTTP requests.

And you now saw how you can set a GET request here

to get data and how you can send a request to store data.

Both matters in many applications, and now you know both,

and you'll also know how you can handle

different states and errors.

We didn't do it here for addMoviehandler,

but it would work in exactly the same way

as for getting our movies with fetchMoviesHandler.