Search⌘ K
AI Features

Create a List Page

Explore how to build a product list page in Rust by setting up data structures, making fetch requests to retrieve products, and managing component state with user actions. This lesson helps you create efficient frontend components that display and interact with backend data.

We'll cover the following...

Initial setup

We need a new page to list our products saved in the database. For that, we first need some structs to handle the list.

Rust 1.40.0
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Product {
pub id: i32,
pub name: String,
pub cost: f64,
pub active: bool,
}
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct ProductVariant {
pub id: i32,
pub variant_id: i32,
pub product_id: i32,
pub value: Option<String>
}
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Variant {
pub id: i32,
pub name: String,
}
type ProductList = Vec<(Product, Vec<(ProductVariant, Variant)>)>;

We add a new type called ProductList. ...