All language subtitles for 009 Submitting & Sending Cart Data_en

So let's now send a request

once the form is submitted.

Now this checkout component is already a pretty

full component with a lot of code in there

and they are for I'll not add the request logic in there

but instead I want to kind of submit

or ascend the submitted data

back to the cart where we then also have the cart data

which is good because we need that

to send it to the server,

to then send both the carts data

so the items in the cart

as well as the submitted user data to the server.

Now, one important word here,

on a server you should typically never trust

the data you get from a client

because of validation

as we built it here can always be circumvented.

For example, I as a visitor

could edit the loaded JavaScript code.

It's not hidden from me

I can edit it attached to find an article

and a video with more information on that.

Therefore, you typically always wanna validate incoming data

on the server as well.

Now here, we only have a dummy backend with Firebase

and whilst we could actually also add some service

and logic to that,

that's simply not the focus of this course

since this course is about React

which is a client side library.

If you wanna dive into service side code,

service side validation, writing your own server side code

I of course also got courses on this, for example

my Node JS course, but that's just a side note

I just wanted to emphasize

that you should not trust client side data like this.

You for example, typically also would want to

validate those submitted cart item prices

with actual database data on the server.

It's not something we do here

but I want to make you aware of that.

So therefore it's the cart component

where that data should be submitted to the server.

And for this I'll add a new function in that cart component,

submit order handler that could be the name

of that function

and in here, I expect to get the user data

as a argument, as a parameter.

We already get access to the cart data

through the cart context.

So that won't be a problem

and therefore, all we now gotta do is make sure

that this submit order function is called

from inside to the checkout component

and that it receives that user data.

So for that, I'll pass it to the checkout component

through a prop.

Let's say the on submit

or on confirm prop, up to you it's your component

where I point at the submit order handler.

So on confirm as the prop name hence in checkout.

In this confirm handler.

Once we validated everything down here

we now wanna call props.onConfirm

so that prop name we're expecting here

in the cart component.

We wanna call props on confirm

and now forward that user data,

which should be an object

because I'm not expecting multiple arguments

for the name street, city and so on.

But I am expecting just one argument here

the collected user data.

So let's group that user data into an object here

where we set the name equal to the entered name,

not the validity but just the name.

Set a street field to the entered street

set the city fields to the entered city

and set the postal code

to the entered postal code like this.

And with that we pass the data from the checkout component

to the cart component.

In there we now wanna send the request to the backend

and we wanna send both the user data

as well as the cart data.

Now for this, we can again use the fetch function

and send the request to Firebase.

So to our Firebase, URL here

and then to a new Node of our choice.

For example, order.json

you don't need to create it in advance

it will be treated dynamically.

And the important thing now is

that this should be a post request.

So we need to pass this configuration object

as a second argument to fetch

and set method to post.

We then also need to add to the body

and set this to JSON.stringify

since we need to send JSON data

and pass in all our data

and that's an object with the user data.

So here we could set a user field

and pass the user data we're getting here

as a value for that field

and then maybe add a ordered items field

and that should then be our cart.

Now for this we have our cart context

where we get our items.

So we can then set cart context items

as a value for the ordered items.

And that's the data we're then sending to the backend.

Now just like this, without anything else

it should already work.

We're not handling the response yet.

We're not handling errors or anything like that

but we are sending a post request.

So this should already work.

If we save that

and I do have some data entered here

I do have some cart data

and I click confirm that should have worked.

And indeed, if we check the Firebase console

you should see an order's Node now

with a new auto generated ID for this newly added item.

And then in there we have user with the user data we entered

and ordered items with the cart data we submitted.

So that is working.

If it's not working, definitely double check your code

compare it to mine

because that should now be working.

Now therefore, as a last step,

I of course wanna change the user experience a little bit.

I want to clear what we see on the screen here.

If we clicked, confirm

and show a loading spinner

and then access message if the cart was submitted

and of course the cart

should then also be cleared thereafter.