So now to come to an end in this module, I want to make sure that we also save orders on a server
and of course that we fetch them from there as well.
Now we have the orders action creator here and there we can again take advantage of Redux Thunk and
return our function here, which gets that dispatch function, which should be asynchronous with the async
keyword so that we can use async await
and in that function here which we return, ultimately of course I will dispatch my action object
but before we do that, we can now send a request to store that order on a server and we can borrow
that request from the products action creator. There
it's not really a big difference whether we create a product or that order, so we can copy this entire
product creation code here all the way up to here and move that over to the orders.js
file. Now of course, you can also add error handling here,
I'm not having it here,
one thing I want to at least add is that I don't get a check if the response is not okay
in which case I'm want to throw a new error,
something went wrong but that should not be the focus here because we covered error handling and loading
spinners, not really the part
I want to focus on here, instead
let's make sure that we're sending this request to the right address and that should not be the products
node
but let's say the orders node which kind of makes sense I guess because
we want to store our orders. Maybe we also want to store our orders specific to that user so we could
store that at /orders/U1 which is my dummy user ID I assume here. Later that will be
different, later we'll have a real ID here, a dynamic ID,
for now let's just hardcode this here so that we have some subfolder, one subfolder per user later.
It should be a post request because we're adding, we're appending some new data, we're adding a new order.
This header needs to be set
and of course the data we're sending is different though. There
I want to send my card items and my total amount and one other important thing, the date of the order.
I want to send my date here converted to a string with toISOString on the date object
so that we create this locally in the app and then we save the timestamp on the server.
Now in your app, you also might want to do that date creation on the server but since this course shouldn't
focus on server-side programming, we'll just do it here and send it to the server and not worry too
much about what else a server could do for us,
instead let's do all the things here and just send that finished timestamp to the server.
Now this will add an order here and once we're done, we get back our response data which will include
that automatically generated ID if you remember, we did that on the product creation as well.
So therefore now when we add an order, we of course forward our items and the amount
but now I also want to forward the ID which I get from resData.name,
that's the same logic we used when we created a product and there's one additional thing, my date snapshot
of course should be the same as created here.
So actually what I'll do is I will create my snapshot here, date with new date and then use this constant
here to create my string version and use the same constant here to forward it with my order data.
So here date refers to this date constant,
so that I use one and the same timestamp, both locally in my data managed with Redux which is the
data I work with here in this running app and of course also have the same timestamp on the server which
is the data I will load in the future or other devices will load. And now we just need to work on the
orders reducer for add order.
The ID is now something I get from outside,
so here I have orderData.Id because that's what we're forwarding here,
it's that automatically generated ID Firebase gives us and the date is also received from outside,
here we can now use orderData.date like this and with that, we have all the logic to hopefully add
an order.
Now let's go back here and add this to the cart and click order now, this seems to work, if we go back
we now see an orders node here on Firebase with a U1 subfolder for our user with the generated unique
ID and in there, the order data with the timestamp with the price, with the card items which was this
one white shirt and that all doesn't look too bad I'd say.