Rendering Product Data

[00:00:00]
>> Anyway it's giving me a yellow, what's going on? Well it's asking me that because there is nothing in green in the XML. I could actually, with Alt+Enter, collapse the empty tab, it was just that. You don't have anything inside just do this, okay? Make sense? So if I build this and execute this, I'm not sure if you realize that there is a very small 4 there.

[00:00:29]
So those are the four categories that were downloaded and parsed automagically into my structure. So now what I need to do is to loop through the structure instead of putting dummy data, make sense? So we are getting there. So I need to open the order, I'm sorry, the menu page.

[00:00:57]
Let me minimize emulator, typically having multiple monitors, it's pretty good for for Android development, as you can see you have emulators and panels all over the place on the previous. So, then I don't need this item that I have here. What I need, there is an items version that receives at list, okay?

[00:01:16]
So instead of receiving a fixed number like five that we have here, we can actually go around this with just a list, okay? So, before actually doing that, When we go here down, we are using an image, a dummy image, okay? So later we will need to also change that, the dummy image, with something different.

[00:01:47]
Just have that in mind, okay? So we need to change that as well. Okay, so we need to loop through the structure, okay? The structure has the data manager, has the menu, okay? Like so, do I need to, Do something else here? Well, actually, what we need to do, even if this is really weird, we need to import this.

[00:02:18]
So we dataManager.menu. Let's move on and then it will work. It's complaining but I think it's fine. So, this is looping through, The category names, okay? So we are going to loop through the category names. So here we can say it.name, that is the category, okay, make sense?

[00:02:46]
So, it is a category. So I can say it.name. This is the name of the category. And then we have products, makes sense? And what we need to do with the products, is actually loop through with a for each. So for each product, what we need to do, If we have a product now.

[00:03:07]
Maybe if you don't like it, we can now call it product, or it's up to you. Because now we have two its, the one on the outside is the category, okay? And the other one it's the product. So I mean it's fine, it's up to you. So now I can take the card that I have here and paste it here.

[00:03:26]
And now the product is not a dummy product. What should I put inside this? It, so I'm going to render it, okay, make sense? And what about onAdd? What should I do here in onAdd?
>> Data Manager.
>> datamanager.cartAdd, we already did that. And they're going to add?

[00:03:51]
>> Product, it.
>> It, they're going to add it, okay? Let's see, look at that. First, we have hot coffee, yeah, we need some padding, some sort of thing. But we are seeing, Black Americano, Flat White, now Iced Coffee, Frappuccino. So this is actually the data coming from the web server.

[00:04:13]
The only missing piece regarding some paddings that I may have is the lacy image. I wanna change that black coffee with the real image. So let's do that. This is actually, well first, let me remove this item count five that I have. And now I need to change my product item.

[00:04:31]
So instead of an image, we are going to use an AsyncImage, that is coming from one of the external dependencies that we use, remember. And instead of painter by need to import it, it receives model. And what is model? The URL of the image. Where is the URL of the image?

[00:04:54]
Does anyone remember?
>> [INAUDIBLE] the web.
>> Product.imageUrl. Remember, we did like a property an immutable variable that is calculated every time. Just that, let's see. Look at that, it seems like it's working. It's downloading all the images on the fly really quickly because we have a good connection here.

[00:05:20]
But yeah, well, you may wanna also have a placeholder or a background while the image is loading, okay? You can play with that. But this is actually working at this point. It's actually reading all that information. Okay, let me add some paddings. So, we can actually, here in the LazyColumn, well the text that we have, we can add some properties like, for example, we can change the color.

[00:05:47]
We can use the primary color. And maybe some padding to the, this is the name of the category, okay? We can add a padding, so modifier.padding. And we can say, remember the first one is left, it's gonna start because if you are in right-to-left like Arabic or Hebrew, it will be the other way around.

[00:06:11]
So we can say 10, 20, no 10, 10 no, that's too much 10, 20dp, then 10dp and 10dp So for values like so, Think we are fine with this. So just to separate things a little bit, like that. So we can see the elevation. And that's all for the menu page.

[00:06:42]
Now we need to work with the cart. But the cart is actually not so complicated. Actually, the logic of the cart, the business logic was already done. If our code works, we shouldn't need to render similar to product, we need to render the other list. So it's actually pretty similar, okay, to these examples.

[00:07:01]
So we go to the OrderPage, and right now it's empty. And what we need to do is also add a LazyColumn. And the LazyColumn will contain items, as we did before. Because it's actually similar to what we did before. If you go to the companion website, lesson seven, lesson six, sorry, finishing the menu, Here you have the code in case you wanna copy and paste.

[00:07:38]
We need to do something very similar. So we need to create items, okay? So we are going to create an item here, with, Our dataManager.cart, okay? Makes sense? So we need to do this. Before doing that, well, I need to also import. What happens if the cart is empty?

[00:08:03]
Well if the cart is empty, Its count is 0. Also we can call the recent empty function, it's empty. If it's zero, we can put a text or a card with a text inside. What's the difference? The card will be like a container, okay, for the text. The text will say, your cart is empty.

[00:08:33]
Or your order is empty. Something like that. Okay, like so, Cart is complaining. So if we don't have items in the cart, we will not render a text. But because a text alone can be really simple we can put a cart. Because we are in a LazyColumn, LazyColumn also accept item or items as children.

[00:09:00]
So I can create an item, and within the item, a cart, and within the cart, a text that says your cart is empty or your order is empty. But remember the cart can contain elevation and some modifiers as we are used to at this point, like padding, let's extend dp.

[00:09:19]
And then, we add also for example, elevation is not a modifier, it's actually a property of elevation. So, let's say 4.dp, like so, okay? So, then we need to render items, okay? From the companion website, I have already here, a cart item already designed. That is just more of everything that we have already done.

[00:09:51]
It's a row with different text, one for the quantity, one for the product name, one for the price, okay? And one for one image that is actually a delete button, okay? That's kind of what I have here, okay? So what do I need to do here is render cart items.

[00:10:14]
So we are going to ask item in cart is it, and then on delete, I need to do something. What is on delete? An argument that we have here. This is similar to the add button that we saw before. So when you click on the image, actually, how to do that with a clickable modifier?

[00:10:36]
We already done this. So it's a clickable modifier over the image that will call on delete. What's on delete? An argument that we receive of type lambda expression. Okay, makes sense? So what do we need to do on delete? We need to talk to our data manager and call cart remove with it.

[00:11:01]
We're going to remove it, okay? It makes sense, right, in this context. So let's see what happens at this point. So now it's working with previews and data managers, it's a bit tricky. It's probably better to run it directly here. So actually, if I go to my order, it says your order is empty.

[00:11:24]
Maybe we need to increase a little bit the font size of that. It's really small. How'd you do that? It's text, so we change the texts style if we want, or the font size directly, or the style wherever you want. Or just the style. Remember we have different text styles that we asked you material theme, material theme.typography.body-subtitle, subtitle-one.

[00:11:54]
Remember these are pre-built styles. So if I go to my order, it's kind of the same thing. But anyway let's use h4, Now it's better. Also we can add some paddings and more things. Now if I go to the menu, and I add a Black Americano, and I go back to order, magic happens.

[00:12:20]
I see the Black Americano. If I go to the menu and add another Black Americano, and also I'm more of a flat white guy, there is a Flat White here somewhere. Here, and I'll also, what else, cold brew? I go to my order, and I see my cart.

[00:12:39]
And I have delete buttons. Will they work if I click here? Hm, it works. Remember, these buttons are talking to the data manager. The data manager is creating a new list in our mutable state. So the mutable state recognized that something has changed in that state. And it's recompoing our structure.

[00:13:04]
It goes to our app, and executes again, the functions that are actually needed, okay? So, it actually works. I can delete this, I can delete this, and my order is empty. Yeah, then we can have a button that says Submit Order and we are kind of done on the order section.