ProductView.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 {
    List<Product>? products;
    List<Category>? categories;

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

    /*
     * With no persistent state management, this data will be fetched twice.
     *
     * The products will first appear during prerendering.
     * When the component becomes interactive, all state (e.g. _productsPage)
     * will be lost, and this method will run again and re-fetch the data.
     *
     * The user will see the UI "flash", where the cards appear from the prerender,
     * disappear when WASM starts, then reappear once WASM fetches the same data.
     */
    protected override async Task OnInitializedAsync()
    {
        products ??= await GalacticRelicsService.GetProductsAsync();
        categories ??= await GalacticRelicsService.GetCategoriesAsync();
    }
}