Cart Checkout

[00:00:00]
>> Brian Holt: So inside the render body of order, you want to take care of the checkout at this particular level.
>> Brian Holt: Just to kinda show you how you would do this.
>> Brian Holt: Okay, so we're gonna write an async function called checkout.
>> Brian Holt: Okay, we're gonna setloading(true) because we don't want people to be able to add and subtract things while we're checking out, right?

[00:00:42]
And then we're going to say, await fetch( "/ api/order") okay?. And then we want it to be a post, so method:"POST", headers, we have to tell it it's a JSON request. So "content- type": "application/json", Cool.
>> Brian Holt: We're gonna have a body which is JSON.stringify
>> Brian Holt: So if you're not familiar, this is the same as saying cart:cart, the name of the thing is cart, and the name of the variables cart.

[00:01:38]
But in JavaScript, you can just condense that down If they're the same name and just call it cart like that. When someone checks out, they probably expect their cart to be emptied, right? So, all you do with that is setCart to be empty array and setLoading to be false.

[00:01:57]
By this point, because we're doing an await here, then it's just going to wait for this to finish first, and then once this is finished, then it'll do these things, that's the magic of await here. Okay, last thing here, we have this function called checkout, we have the ability to call inside of cart, but we have to pass it from parent to child, right?

[00:02:20]
So down here on cart, we're just going to say checkout equals, you probably guessed it, checkout. And now that function is being passed from parent to child via the props, right? So that checkout function is now this checkout function, which now we can call very easily with the on click here.

[00:02:42]
Let's talk a second about props, we haven't really talked too, too much about it. It used to be kind of confusing the difference between props and state. I kind of really pull those concepts apart so that hopefully they're not confusing to each other. Props are things that are passed from parent to child, right?

[00:03:04]
So in this particular case, you have the cart, and this is getting the actual cart itself is coming from the parent, and checkout is a function that's coming from the parent. But it's important to note here, cart is immutable, or maybe stated differently, you cannot change cart if because it came from the parent, right?

[00:03:22]
So I can't say cart =cart.push( 'lol'), right? This is not gonna do anything, because the cart of the parent is separated from the cart of the child. So in other words, this is what's called one-way data flow, which is something that some people talk about sometimes with React, that data only flows down in components, it never flows up, right?

[00:03:47]
So there's no way I can say inside of this cart, like parent.cart.push or anything like that, doesn't exist, there's no way to do that directly from the child. The only way that a child component can affect the parent component is through something like this, where you pass a function down from the parent to the child and say, hey child, when you want to affect the parent, called this function.

[00:04:15]
So maybe you stated differently, cart has no concept of its parent, it could be the top level component, it could not be the top level component, it could be rendered here, it could be rendered there, it has no concept of where it is, it doesn't matter, right? It's its own encapsulated component, this is different verses the used state, right?

[00:04:34]
Which is the mutable part of the child that it can modify itself, right? And a component can only modify its own state, it can't modify its child state, it can't modify its parent state, it can only modify its own state, so in other words, these components are self-encapsulated.

[00:04:51]
It can be annoying because it makes it verbose to change things at various different levels, but it means that like. If I see that there's a problem with cart, let's say it is showing the wrong word for checkout. I'm 99.99% that the problem is going to be inside of cart, it makes it very obvious of where problems are.

[00:05:16]
And that's my favorite part about React is it's very debuggable from that perspective, right? If there's a problem with checkout here, it could mean that the props are passed in incorrectly, in which case I'd have to go up the parent tree to see, what are you passing down?

[00:05:31]
But at that interface level, parent passes in this, child takes this, makes that interface really easy to debug. Because I can just open my dev tool, like what are your props, right? What did you get? And if it's what I expect or what it gets, right, that I know the problem lies within the child.

[00:05:49]
So let's go fix the problem that we had here, it is not header, it headers. How dare you browse, so that's in order.JSX, that's the checkout function, just make sure you have headers instead of header. Alright, so then we can come back over here, and get your Hawaiian pizza, couple of those.

[00:06:20]
Barbecue, add cart, click Check out, and you can see, we get a 200 with an orderid. So just so you know this actually is being saved in your database, then the little SQLite file, so you'll be able to view your orders later. And you can just wonder, why did you buy so many not Pluton of pizzas [LAUGH]