Past Orders Query

[00:00:00]
>> Brian Holt: Past.lazy.jsx, at the top here. So we're gonna import another one up here called getPastOrder with no S from ../api/getPastOrder. We'll go code that up in just a second.
>> Brian Holt: And then we're gonna import our modal as well. Import modal from ../Modal, cool, all right.
>> Brian Holt: Everyone's favorite, we're going to make another currency converter here.

[00:00:45]
>> Brian Holt: NumberFormat en-US, and style is currency.
>> Speaker 1: Would you just put that in the utility?
>> Brian Holt: Yeah, no, I think this is the fourth time we've done it. I'm already regretting my decisions. All right, we're just doing it, all right fine. [LAUGH] We'll just do it, useCurrency.jsx. Don't say I never did anything for you.

[00:01:16]
Export default function useCurrency. This is gonna take in some sort of price. We're gonna have that all that stupid stuff we keep writing over and over again that everyone keeps complaining about.
>> Brian Holt: .NumberFormat en-US. It's gonna be style currency currency USD. And we're really just going to return intel.format.

[00:01:57]
Is it format to price? What is that, I gotta remember exactly. It's just format. Okay, format, price, okay? Now instead of doing it this way, we can say instead of here, we can dump that business. And our price is going to be something like const price = use.

[00:02:33]
What did I call it?
>> Brian Holt: UseCurrencies, is that what it's called?
>> Speaker 1: Yeah, it's that.
>> Brian Holt: Yeah, cool.
>> Brian Holt: UseCurrency and I mean this is gonna be a little bit hairy now because I actually have this inside of a map, right? In theory you shouldn't use hooks that way, but you'd be able to say like 15.10 here, and now price would be a properly formatted price.

[00:03:08]
So in this case, it's actually probably not gonna be useful because we can't use it inside of our map here. So instead of making this a hook, probably what you would do is you would just say
>> Brian Holt: const priceConverter =
>> Brian Holt: And then we'll say intel.format price. So I guess this is exactly the same thing.

[00:03:49]
It's just not a hook, right? Is that the hook return the just I-N-T-L, right, and then Yeah, and then you could just have this. Here's the scone flow.
>> Brian Holt: Something like that, and then now you kind of cover both ways of doing it.
>> Brian Holt: All right, now inside of past.lazy.jsx, we can instead of getting the useCurrency here.

[00:04:19]
We can also get the priceConverter and then this actually will be useful to us. So we're gonna make another hook up here, which is focusedOrder. So if a user clicks on one of the orders, we want them to pop up with the modal and see the details of that particular past order.

[00:04:40]
So that's what the focusedOrder is gonna be.
>> Brian Holt: UseState, again, you can put anything here. I just have this as empty, which is gonna be undefined. So focusedOrder is not gonna have anything to it to begin with. But feel free to put null or whatever you want there.

[00:05:06]
>> Brian Holt: This is kind of a cool one. All right, so we're gonna do another query here from TanStack. So const isloading. We have to call this something else because isloading already exists here. So we have to call this something like isloadingPastOrder.
>> Brian Holt: That's all this is doing is just renaming it to a different variable.

[00:05:33]
And data again is gonna be pastOrderData, okay? And that's gonna be equal to useQuery. What's our query key gonna be? It's got to be unique to this particular order. So it's gonna be pastOrder, and we have to give it some unique kind of key to it, kind of like the keys that we use in React.

[00:06:05]
Well, focusedOrder itself we know this is gonna be unique to that particular focusedOrder, so we can use that as the query key.
>> Brian Holt: Okay, queryFunction, it's just gonna be getPastOrder, that one that we just imported that we haven't written yet. And it's gonna be focusedOrder.
>> Brian Holt: StaleTime.
>> Brian Holt: Now something I said earlier in the course, I did not use AI anywhere.

[00:06:43]
I'll confess I actually did use it here cuz I wanted to find out how many seconds are in a day, cuz I didn't wanna do that math off top of my head. So I said staleTime should be one day in milliseconds.
>> Brian Holt: So that is one place I did use it cuz I couldn't be bothered to google it, that sounded hard.

[00:07:20]
>> Brian Holt: All right, we do have one weird problem that you're probably catching on to here, which is, wait I don't have a focusedOrder if there's no focusedOrder, right? What happens if this runs on the first page right now? It's gonna go try and request a focusedOrder for something that doesn't exist yet.

[00:07:40]
So how do we prevent it from doing that? We only wanna request something if there is a focusedOrder. And if there's not a focusedOrder, then we don't want to, right? That make sense? Well, turns out they thought of that. That's kinda cool. You just put in this enabled, and if there is a focusedOrder, then you you will go out and grab something and if there's not then you won't.

[00:08:10]
So you'll see my note here I have a double exclamation point. It's not that I'm just excited about focused orders. We've all seen if or something like this if loading, right? This means not loading, right? This also has the fascinating feature of turning this into a Boolean, right?

[00:08:29]
So this is actually literally false, right? So not loading is triple equal to false or true if it is, right? So what happens if I do not not loading? It's just it's the same thing, but it's turned into a Boolean, right? So this is going to be either true or false.

[00:08:52]
That's what the double exclamation point means. I do it, I understand that it's kind of like a little opaque, but it's common enough in coding that I just keep doing it. I don't think it's actually even technically necessary. I think this is just fine, but that's why that's in there in my notes.

[00:09:12]
Does that make sense?
>> Speaker 2: To put it another way, is it avoiding truthiness or implied truthiness and forcing like a full Boolean?
>> Brian Holt: Yes exactly, it's doing the type coercion right here, right, as opposed to letting TanStack query do it.