FavoritesMenu.razor

@using eShop.WebAppComponents.Catalog
@using eShop.WebAppComponents.Item
@inject eShop.WebApp.Services.IFavoritesState FavoritesState
@inject NavigationManager Nav

@attribute [Microsoft.AspNetCore.Components.StreamRendering]
@implements IDisposable

<div class="favorites-menu" @onkeydown="OnKeyDown" tabindex="-1">
    <button class="favorites-button" type="button" @onclick="OnFavoritesClicked" aria-label="Favorites" aria-haspopup="menu" aria-expanded="@_isOpen">
        <svg class="favorites-heart" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M12 21s-7-4.35-9.33-8.28C.72 9.23 2.05 6 5.5 6c1.74 0 3.17.92 4 2.08C10.33 6.92 11.76 6 13.5 6c3.45 0 4.78 3.23 2.83 6.72C19 16.65 12 21 12 21z"
                  stroke="currentColor"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  fill="@HeartFill" />
        </svg>
        @if (IsLoggedInAndHasFavorites)
        {
            <span class="favorites-badge">@favoritesCount</span>
        }
    </button>

    @if (_isOpen && IsLoggedInAndHasFavorites)
    {
        <div class="favorites-dropdown-content" role="menu" aria-label="Favorites list" tabindex="0">
            <div class="favorites-dropdown-heading">Favorites</div>
            @foreach (var item in favorites!)
            {
                <a class="favorites-dropdown-item" href="@ItemHelper.Url(item)" data-enhance-nav="false">
                    <span class="favorites-dropdown-item-name">@item.Name</span>
                    <span class="favorites-dropdown-item-price">$@item.Price.ToString("0.00")</span>
                </a>
            }
        </div>
    }
</div>

@code {
    [Microsoft.AspNetCore.Components.CascadingParameter]
    public HttpContext? HttpContext { get; set; }

    private IDisposable? favoritesSubscription;
    private IReadOnlyList<CatalogItem>? favorites;
    private bool _isOpen;
    private bool IsLoggedInAndHasFavorites => HttpContext?.User.Identity?.IsAuthenticated == true && favoritesCount > 0;
    private int favoritesCount => favorites?.Count ?? 0;
    private string HeartFill => IsLoggedInAndHasFavorites ? "currentColor" : "none";

    protected override async Task OnInitializedAsync()
    {
        favoritesSubscription = FavoritesState.NotifyOnChange(
            EventCallback.Factory.Create(this, UpdateFavoritesAsync));

        await UpdateFavoritesAsync();
    }

    private async Task UpdateFavoritesAsync()
    {
        favorites = await FavoritesState.GetFavoritesAsync();
        await InvokeAsync(StateHasChanged);
    }

    private void OnFavoritesClicked()
    {
        if (HttpContext?.User.Identity?.IsAuthenticated != true)
        {
            Nav.NavigateTo(Pages.User.LogIn.Url(Nav));
            return;
        }

        _isOpen = !_isOpen;
    }

    private Task OnKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Escape")
        {
            _isOpen = false;
        }

        return Task.CompletedTask;
    }

    public void Dispose()
    {
        favoritesSubscription?.Dispose();
    }
}