PersistentAttributeProductView.razor

@inject GalacticRelicsService GalacticRelicsService

<div class="p-3">
    <h3 class="display-5 mb-0">@(CategoryName ?? "All Products")</h3>

    <CategoryPicker @bind-CategoryId="selectedCategoryId"
                    Categories="Categories" />

    <ProductGrid Products="Products"
                 CategoryId="selectedCategoryId" />
</div>

@code {
    [SupplyParameterFromPersistentComponentState]
    public List<Product>? Products { get; set; }

    [SupplyParameterFromPersistentComponentState]
    public List<Category>? Categories { get; set; }

    int? selectedCategoryId = null;
    string? CategoryName => Categories?.FirstOrDefault(c => c.Id == selectedCategoryId)?.Name;

    /*
     * Using the [SupplyParameterFromPersistentComponentState] attribute above
     * makes the values of those properties persistent across prerendering and
     * interactive rendering with no additional code.
     *
     * By the time the code gets to this point in WASM, the properties should
     * have a value from persistent state, so ??= avoids fetching the data again
     */
    protected override async Task OnInitializedAsync()
    {
        Products ??= await GalacticRelicsService.GetProductsAsync();
        Categories ??= await GalacticRelicsService.GetCategoriesAsync();
    }
}