jsmr/JSMR.UI.Blazor/Pages/Home.razor

@page "/"
@inject VoiceWorksClient Client
@using JSMR.Application.VoiceWorks.Queries.Search
@using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Services

<PageTitle>Home</PageTitle>

<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
    <MudTabPanel Text="Available" Icon="@Icons.Material.Filled.Home">
        <JProductCollection Products="availableVoiceWorks"></JProductCollection>
    </MudTabPanel>
    <MudTabPanel Text="Upcoming" Icon="@Icons.Material.Filled.ArrowUpward">
        <JProductCollection Products="upcomingVoiceWorks"></JProductCollection>
    </MudTabPanel>
    <MudTabPanel Text="Announcements" Icon="@Icons.Material.Filled.Home">
        <JProductCollection Products="announcedVoiceWorks"></JProductCollection>
    </MudTabPanel>
</MudTabs>

<style>
    .j-product-items-container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .j-voice-work-card {
        display: flex;
        gap: 1rem;
        background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(39, 59, 73));
        border-color: rgb(63, 78, 88);
        background-image: linear-gradient(0deg, rgb(30, 53, 69), rgb(57, 79, 94));
    }

    .j-voice-work-image-container {
        width: 240px;
        width: 300px;
    }

    .j-voice-work-card > .j-voice-work-image-container {
        flex-shrink: 0;
    }

    .j-voice-work-image {
        border-radius: 20px;
    }

    .j-voice-work-content {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .j-voice-work-card > .j-voice-work-content {
        flex-grow: 1;
    }

    .j-product-title {
        font-size: 1.25rem;
        font-weight: 600;
        font-family: "Poppins", "M+ 1p";
        color: #d2dce6;
        text-shadow: 1px 1px 2px black;
    }

    .j-product-description {
        /* color: #7C8099; */
        font-size: 1rem;
        font-family: "Poppins", "M+ 1p";
    }

    .j-voice-work-info {
        width: 240px;
    }

    .j-voice-work-card > .j-voice-work-info {
        flex-shrink: 0;
    }
</style>

@code {
    VoiceWorkSearchResult[]? availableVoiceWorks;
    VoiceWorkSearchResult[]? upcomingVoiceWorks;
    VoiceWorkSearchResult[]? announcedVoiceWorks;

    protected override Task OnInitializedAsync()
    {
        _ = LoadAvailableVoiceWorksAsync();
        _ = LoadUpcomingVoiceWorksAsync();
        _ = LoadAnnouncedVoiceWorksAsync();

        // availableVoiceWorks = await GetAvailableVoiceWorksAsync();
        // upcomingVoiceWorks = await GetUpcomingVoiceWorksAsync();

        return Task.CompletedTask;
    }

    private async Task LoadAvailableVoiceWorksAsync()
    {
        SearchVoiceWorksRequest request = new(
            Options: new()
            {
                Criteria = new()
                {
                    CircleStatus = CircleStatus.Favorited,
                    ReleaseDateStart = DateOnly.FromDateTime(DateTime.Today.AddDays(-6))
                },
                SortOptions =
                [
                    new(VoiceWorkSortField.ReleaseDate, Application.Common.Search.SortDirection.Descending),
                    new(VoiceWorkSortField.Downloads, Application.Common.Search.SortDirection.Descending)
                ]
            }
        );

        var result = await Client.SearchAsync(request);

        availableVoiceWorks = result.Results.Items;

        await InvokeAsync(StateHasChanged);
    }

    private async Task LoadUpcomingVoiceWorksAsync()
    {
        SearchVoiceWorksRequest request = new(
            Options: new()
            {
                Criteria = new()
                {
                    CircleStatus = CircleStatus.Favorited,
                    ScheduledReleaseDateEnd = DateOnly.FromDateTime(DateTime.Today.AddDays(8))
                },
                SortOptions =
                [
                    new(VoiceWorkSortField.ScheduledReleaseDate, Application.Common.Search.SortDirection.Ascending),
                    new(VoiceWorkSortField.WishlistCount, Application.Common.Search.SortDirection.Descending)
                ]
            }
        );

        var result = await Client.SearchAsync(request);

        upcomingVoiceWorks = result.Results.Items;

        await InvokeAsync(StateHasChanged);
    }

    private async Task LoadAnnouncedVoiceWorksAsync()
    {
        SearchVoiceWorksRequest request = new(
            Options: new()
            {
                Criteria = new()
                {
                    Status = Domain.Enums.VoiceWorkStatus.NewAndUpcoming
                },
                SortOptions =
                [
                    new(VoiceWorkSortField.FavoriteCircle, Application.Common.Search.SortDirection.Ascending),
                    new(VoiceWorkSortField.WishlistCount, Application.Common.Search.SortDirection.Descending)
                ]
            }
        );

        var result = await Client.SearchAsync(request);

        announcedVoiceWorks = result.Results.Items;

        await InvokeAsync(StateHasChanged);
    }
}