PersistentProductView.razor

@inject GalacticRelicsService GalacticRelicsService

@* to manually persist state from pre-rendering, this must be injected
   and the callback to persist state must be disposed using IDisposable *@
@inject PersistentComponentState PersistentState
@implements IDisposable

<div class="p-3">
    <h3 class="display-5">@(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;

    #region Persistent State Management

    // Persistent state requires creating a unique key for storing this component's state
    string productsKey = $"{nameof(PersistentProductView)}-{nameof(products)}";
    string categoriesKey = $"{nameof(PersistentProductView)}-{nameof(categories)}";
    PersistingComponentStateSubscription persistentStateSubscription;

    private Task PersistComponentState()
    {
        PersistentState.PersistAsJson(productsKey, products);
        PersistentState.PersistAsJson(categoriesKey, categories);

        return Task.CompletedTask;
    }

    private void RestoreComponentState()
    {
        // check if the state has been persisted
        if (PersistentState.TryTakeFromJson(productsKey, out List<Product>? persistedProducts))
        {
            products = persistedProducts;
        }

        if (PersistentState.TryTakeFromJson(categoriesKey, out List<Category>? persistedCategories))
        {
            categories = persistedCategories;
        }
    }

    // the subscription must be disposed to avoid memory leaks
    public void Dispose()
    {
        persistentStateSubscription.Dispose();
    }

    #endregion Persistent State Management

    protected override async Task OnInitializedAsync()
    {
        // attempt to restore persisted state
        RestoreComponentState();

        // ??= allows us to only call the API if these are null, e.g. if
        // there was no persisted data
        products ??= await GalacticRelicsService.GetProductsAsync();
        categories ??= await GalacticRelicsService.GetCategoriesAsync();

        // manually define what should be persisted with a callback method.
        // this subscription must also be disposed, so this component must implement IDisposable.
        // according to documentation, this must be called last to avoid a race condition.
        persistentStateSubscription = PersistentState.RegisterOnPersisting(PersistComponentState);
    }
}