1 00:00:02,250 --> 00:00:07,800 So now to come to an end in this module, I want to make sure that we also save orders on a server 2 00:00:07,800 --> 00:00:10,530 and of course that we fetch them from there as well. 3 00:00:10,540 --> 00:00:16,810 Now we have the orders action creator here and there we can again take advantage of Redux Thunk and 4 00:00:16,810 --> 00:00:22,780 return our function here, which gets that dispatch function, which should be asynchronous with the async 5 00:00:22,810 --> 00:00:25,280 keyword so that we can use async await 6 00:00:25,570 --> 00:00:32,110 and in that function here which we return, ultimately of course I will dispatch my action object 7 00:00:32,110 --> 00:00:38,320 but before we do that, we can now send a request to store that order on a server and we can borrow 8 00:00:38,320 --> 00:00:41,650 that request from the products action creator. There 9 00:00:41,710 --> 00:00:46,930 it's not really a big difference whether we create a product or that order, so we can copy this entire 10 00:00:46,930 --> 00:00:55,120 product creation code here all the way up to here and move that over to the orders.js 11 00:00:55,160 --> 00:00:59,170 file. Now of course, you can also add error handling here, 12 00:00:59,180 --> 00:01:00,450 I'm not having it here, 13 00:01:00,470 --> 00:01:05,530 one thing I want to at least add is that I don't get a check if the response is not okay 14 00:01:05,540 --> 00:01:07,880 in which case I'm want to throw a new error, 15 00:01:07,880 --> 00:01:13,130 something went wrong but that should not be the focus here because we covered error handling and loading 16 00:01:13,130 --> 00:01:14,500 spinners, not really the part 17 00:01:14,510 --> 00:01:16,410 I want to focus on here, instead 18 00:01:16,440 --> 00:01:20,420 let's make sure that we're sending this request to the right address and that should not be the products 19 00:01:20,450 --> 00:01:21,080 node 20 00:01:21,110 --> 00:01:25,150 but let's say the orders node which kind of makes sense I guess because 21 00:01:25,520 --> 00:01:32,260 we want to store our orders. Maybe we also want to store our orders specific to that user so we could 22 00:01:32,260 --> 00:01:38,740 store that at /orders/U1 which is my dummy user ID I assume here. Later that will be 23 00:01:38,740 --> 00:01:42,040 different, later we'll have a real ID here, a dynamic ID, 24 00:01:42,040 --> 00:01:48,350 for now let's just hardcode this here so that we have some subfolder, one subfolder per user later. 25 00:01:48,610 --> 00:01:53,980 It should be a post request because we're adding, we're appending some new data, we're adding a new order. 26 00:01:53,980 --> 00:01:55,360 This header needs to be set 27 00:01:55,360 --> 00:01:58,170 and of course the data we're sending is different though. There 28 00:01:58,210 --> 00:02:05,020 I want to send my card items and my total amount and one other important thing, the date of the order. 29 00:02:05,890 --> 00:02:12,820 I want to send my date here converted to a string with toISOString on the date object 30 00:02:12,820 --> 00:02:17,530 so that we create this locally in the app and then we save the timestamp on the server. 31 00:02:17,530 --> 00:02:22,180 Now in your app, you also might want to do that date creation on the server but since this course shouldn't 32 00:02:22,180 --> 00:02:27,100 focus on server-side programming, we'll just do it here and send it to the server and not worry too 33 00:02:27,100 --> 00:02:29,450 much about what else a server could do for us, 34 00:02:29,530 --> 00:02:34,500 instead let's do all the things here and just send that finished timestamp to the server. 35 00:02:34,570 --> 00:02:40,300 Now this will add an order here and once we're done, we get back our response data which will include 36 00:02:40,330 --> 00:02:46,090 that automatically generated ID if you remember, we did that on the product creation as well. 37 00:02:46,090 --> 00:02:51,820 So therefore now when we add an order, we of course forward our items and the amount 38 00:02:51,820 --> 00:02:55,990 but now I also want to forward the ID which I get from resData.name, 39 00:02:56,170 --> 00:03:02,710 that's the same logic we used when we created a product and there's one additional thing, my date snapshot 40 00:03:02,710 --> 00:03:05,040 of course should be the same as created here. 41 00:03:05,050 --> 00:03:14,010 So actually what I'll do is I will create my snapshot here, date with new date and then use this constant 42 00:03:14,010 --> 00:03:20,840 here to create my string version and use the same constant here to forward it with my order data. 43 00:03:20,850 --> 00:03:23,730 So here date refers to this date constant, 44 00:03:23,730 --> 00:03:29,400 so that I use one and the same timestamp, both locally in my data managed with Redux which is the 45 00:03:29,400 --> 00:03:35,670 data I work with here in this running app and of course also have the same timestamp on the server which 46 00:03:35,670 --> 00:03:41,880 is the data I will load in the future or other devices will load. And now we just need to work on the 47 00:03:41,900 --> 00:03:45,500 orders reducer for add order. 48 00:03:45,500 --> 00:03:48,450 The ID is now something I get from outside, 49 00:03:48,470 --> 00:03:52,910 so here I have orderData.Id because that's what we're forwarding here, 50 00:03:52,940 --> 00:03:58,700 it's that automatically generated ID Firebase gives us and the date is also received from outside, 51 00:03:58,910 --> 00:04:06,100 here we can now use orderData.date like this and with that, we have all the logic to hopefully add 52 00:04:06,250 --> 00:04:07,600 an order. 53 00:04:07,630 --> 00:04:14,710 Now let's go back here and add this to the cart and click order now, this seems to work, if we go back 54 00:04:14,740 --> 00:04:20,890 we now see an orders node here on Firebase with a U1 subfolder for our user with the generated unique 55 00:04:20,890 --> 00:04:27,400 ID and in there, the order data with the timestamp with the price, with the card items which was this 56 00:04:27,400 --> 00:04:31,570 one white shirt and that all doesn't look too bad I'd say.