Fetching & Rendering Data

[00:00:00]
>> We need to get data into this Astro component, so we're going to create a new Astro component that will be for listing items and then that's what we're going to display here. And this is gonna be a child component so we're going to create one in the components directory called shop-items.astro, this naming convention is my preference I use Kebab case.

[00:00:24]
Instead of Pascal case for components that drives some people up the wall, I'm sorry if you are one of them. To me, this is just easier to scan, I don't know, I don't like capital letters in file names. Yeah, I see some nods. Yeah, that's how I feel about it [LAUGH].

[00:00:43]
Okay, so inside this, first we're gonna set up a little helper function, and I am going to actually copy paste this function around a little bit. Because I use it twice and I didn't think that was enough times to merit making like a utility function. And this is a case where I think like somebody's gonna be screaming you should dry this out and and I don't, I don't care.

[00:01:09]
So what I'm using is a built-in API called, the international and then the number format API allows me to format currency. So that I don't have to figure out how to do that myself. And it's really just a wonderful little API that saves me so much time and then I can pass in my amount.

[00:01:30]
And what this will do is any amount that I send into this format currency will come out formatted as US dollars. It is a delightful way to save myself a bunch of manual processing of numbers. So next, let's load some products. So I'm gonna grab a result from the fetch API.

[00:01:50]
So Astro enables top level await so that we don't have to write async functions to load products. This is an extraordinarily convenient little thing that just avoids some mental loop de loops. To get product, so we're going to run fetch. And inside of this, we're going to hit https.

[00:02:08]
And I made a little API to power this, so it's gonna be called astro-frontend-masters-api.netlify.app/api/products. Let me make this bigger so that you can see that whole thing. And we can just hit that straight up. Then what I'm gonna do is just make sure that we don't have an issue.

[00:02:30]
So if anything is wrong with the response, we'll just console-error and show it so that we can check out what's going on. Fingers crossed, no issues, I've now built this app several times in preparation for today and it worked all of those times. But since we're live there is a decent chance that this is all going to blow up in my face.

[00:02:52]
Then I have a type declared called ShopItem that we're gonna use for this and you can just grab that like that. So we're gonna get back an array of shop items from this product API. And we get those by awaiting result.json(). So this is hitting an API.

[00:03:10]
We're loading the response. We're checking if the response is okay. And if the response is okay, we're grabbing the body of that response as a JSON object. And that gives us our shopItems which we can now see our shop items that's not super helpful because it doesn't show us all of the properties in there.

[00:03:27]
But that's okay because autocomplete will still work so we're gonna do a new section in here called shop-items. And then let me actually leave this up for a bit in case anybody still needs it. Then we're gonna do some looping, so we're gonna grab our shop items and we're going to map over them and grab each item.

[00:03:51]
And inside of here we want to return a div, and that div that we want is going to have a class of item. And again, we don't have to add a key or anything because astro components don't work that way. Then we can add an image and the source is going to be item.image, and we're just gonna autocomplete our way to victory here, item.image.src.

[00:04:14]
And then we can add the alt. The alt will be item.image.alt. And below that, we're gonna set up an h2 to be the item name, so item.title. Where is it? I don't know why that autocomplete wasn't working but there it is. Then we're gonna get the description so item.description.

[00:04:48]
Hello, I thought I was helping everybody. I'm not very good at TypeScript, I think it shows. So then what we can do is we're gonna grab that price and because I have that helper, we're gonna grab formatCurrency and pass in the item.price as our amount, and that will output a price.

[00:05:16]
And then the last thing is we're not gonna do this just yet, but we're gonna put a little placeholder in to say we need to add a, add to cart button. Okay, so then we're not even gonna bother looking at this unstyled. We're just gonna throw the styles in.

[00:05:33]
So we're gonna go into the _workshop-assets, the styles folder, and then components-shop-items. I named them to match the directory. And then paste that into a style component. And then if we come back out here and reload nothing happens because we're not using the component yet. So next, let's go add this component into our shop.

[00:06:01]
So to do that up at the top, just like we did with the layout, we're going to import shop items. From components/shop-items. And then down here where it says list products, we're going to replace that with a ShopItems component. This doesn't need any props yet, we're gonna add props later, but what this will give you is a list of our sandwich kits.

[00:06:35]
Great, easy peasy. So this is one of the things that, again, I really like about the way that Astro is set up. Is it's not asking you to learn a lot of really specific APIs to make things work, we get to use browser standards. So here's the Fetch API, this is a browser standard.

[00:06:53]
If you need documentation on it, you go to the Mozilla developer network, right? MDN docs, you hit up Fetch. This works everywhere. This is a standard browser API. You can run it in your console if you wanna test it, it's great. And then we just loop over it using regular old JavaScript stuff very familiar if you've worked in JSX before.

[00:07:14]
But we get some of the benefits of not writing JSX, like being able to use class as its own attribute and not having to add keys to things to make them function. So it's just very pleasant, like it's just very nice to work with.