BlazorStart/Start/Client/Pages/Index.razor

@page "/"
@using System.Collections.Generic
@using System.Linq
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Start.Client.Components
@using Start.Shared
@using Start.Shared.Api
@using Refit

@* Distinguish from Refit.Authorize *@
@attribute [Microsoft.AspNetCore.Authorization.Authorize]
@inject Blazored.LocalStorage.ILocalStorageService localStorage
@inject IBookmarkContainersApi bookmarkContainersApi

@if (bookmarkContainers == null)
{
    <div class="empty">
        <div class="empty-icon">
            <div class="loading loading-lg"></div>
        </div>
        <p class="empty-title h5">Loading Containers</p>
    </div>
}
else
{
    <ul class="containerList tab">
        @foreach (BookmarkContainerDto container in this.bookmarkContainers)
        {
            string itemClasses = "tab-item";
            if (container.BookmarkContainerId == this.selectedBookmarkContainer?.BookmarkContainerId)
                itemClasses += " active";

            <li class="@itemClasses">
                <a @onclick="() => OnContainerSelected(container.BookmarkContainerId)">
                    @container.Title
                    <button class="btn btn-clear"
                            @onclick="() => this.OnDeleteContainerClicked(container.BookmarkContainerId)">
                    </button>
                </a>
            </li>
        }
        <li class="tab-item tab-action">
            <button @onclick="OnCreateContainerClicked" class="btn btn-link"
                    title="Create New Container" aria-label="Create New Container">
                +
            </button>
        </li>
    </ul>

    <div class="activeBookmarkContainer">
        @if (this.selectedBookmarkContainer == null)
        {
            <div class="empty">
                <div class="empty-icon">
                    <div class="loading loading-icon"></div>
                </div>
                <p class="empty-title h5">Loading Bookmarks</p>
            </div>
            <p class="text-center">Loading Bookmarks</p>
        }
        else if (!this.selectedBookmarkContainer.BookmarkGroups?.Any() ?? true)
        {
            <div class="empty">
                <div class="empty-icon">
                    <i class="icon icon-3x icon-bookmark"></i>
                </div>
                <p class="empty-title h5">No Bookmark Groups</p>
            </div>
        }
        else
        {
            @foreach (BookmarkGroupDto group in this.selectedBookmarkContainer.BookmarkGroups!)
            {
                <BookmarkGroup Group="group" />
            }
        }
    </div>

    <CreateContainer IsOpen="showCreateContainerForm" OnClose="this.OnCloseCreateContainer"
                     OnCreated="this.OnContainerCreated" />
    <DeleteContainer Active="this.showDeleteContainerForm" OnClose="this.OnCloseDeleteContainer"
                     BookmarkContainerId="this.bookmarkContainerToDelete?.BookmarkContainerId ?? 0"
                     ContainerTitle="@(this.bookmarkContainerToDelete?.Title ?? "")"
                     OnDeleted="this.OnContainerDeleted" />
}

@code
{
    private IList<BookmarkContainerDto>? bookmarkContainers;
    private BookmarkContainerDto? selectedBookmarkContainer;

    private bool showCreateContainerForm = false;

    private bool showDeleteContainerForm = false;
    private BookmarkContainerDto? bookmarkContainerToDelete;

    private bool showCreateGroupForm = false;
    private bool showCreateBookmarkForm = false;

    protected override async Task OnInitializedAsync()
    {
        await LoadContainers();
    }

    protected async Task LoadContainers()
    {
        try
        {
            ApiResponse<IEnumerable<BookmarkContainerDto>> response = await bookmarkContainersApi
                .GetAllBookmarkContainers();

            this.bookmarkContainers = response.Content?.ToList();

            if (this.bookmarkContainers == null || !this.bookmarkContainers.Any())
            {
                await this.CreateDefaultContainer();
            }

            await this.OnContainerSelected(await this.GetSelectedContainerId());
        }
        catch (AccessTokenNotAvailableException e)
        {
            e.Redirect();
        }
    }

    protected async Task CreateDefaultContainer()
    {
        ApiResponse<BookmarkContainerDto?> response = await bookmarkContainersApi
            .CreateBookmarkContainer("Default");

        BookmarkContainerDto? container = response.Content;

        if (container != null)
            await this.OnContainerSelected(container.BookmarkContainerId);
    }

    protected async Task OnContainerSelected(int bookmarkContainerId)
    {
        try
        {
            if (!this.bookmarkContainers?.Any(bc => bc.BookmarkContainerId == bookmarkContainerId) ?? false)
                bookmarkContainerId = this.bookmarkContainers?.First().BookmarkContainerId ?? bookmarkContainerId;

            ApiResponse<BookmarkContainerDto?> response = await bookmarkContainersApi
                .GetBookmarkContainer(bookmarkContainerId);

            BookmarkContainerDto? container = response.Content;

            await this.SetSelectedContainer(bookmarkContainerId);
            this.selectedBookmarkContainer = container;
        }
        catch (AccessTokenNotAvailableException e)
        {
            e.Redirect();
        }
    }

    protected void OnDeleteContainerClicked(int bookmarkContainerId)
    {
        this.bookmarkContainerToDelete = this.bookmarkContainers
            ?.First(bc => bc.BookmarkContainerId == bookmarkContainerId);
        this.showDeleteContainerForm = true;
    }

    protected void OnCreateContainerClicked()
    {
        this.showCreateContainerForm = true;
    }

    protected void OnCloseCreateContainer()
    {
        this.showCreateContainerForm = false;
    }

    protected async Task OnContainerCreated(BookmarkContainerDto newContainer)
    {
        if (this.bookmarkContainers == null)
            return;

        this.bookmarkContainers.Add(newContainer);
        this.showCreateContainerForm = false;
        await OnContainerSelected(newContainer.BookmarkContainerId);
    }

    protected void OnCloseDeleteContainer()
    {
        this.showDeleteContainerForm = false;
    }

    protected async Task OnContainerDeleted(int bookmarkContainerId)
    {
        if (!this.bookmarkContainers?.Any(bc => bc.BookmarkContainerId != bookmarkContainerId) ?? false)
            await this.CreateDefaultContainer();

        if (await this.GetSelectedContainerId() == bookmarkContainerId)
            await this.OnContainerSelected(
                this.bookmarkContainers?.First().BookmarkContainerId ?? bookmarkContainerId);

        this.bookmarkContainers = this.bookmarkContainers
            ?.Where(bc => bc.BookmarkContainerId != bookmarkContainerId)
            .ToList();
    }

    // Save the currently selected container in LocalStorage so that the same container remains
    // selected between new tabs

    protected async Task<int> GetSelectedContainerId()
    {
        bool hasValue = await localStorage.ContainKeyAsync("SelectedContainer");

        if (hasValue)
            return await localStorage.GetItemAsync<int>("SelectedContainer");

        // Default to the first container
        int firstContainer = this.bookmarkContainers!.First().BookmarkContainerId;
        await this.SetSelectedContainer(firstContainer);
        return firstContainer;
    }

    protected async Task SetSelectedContainer(int selectedContainerId)
    {
        await localStorage.SetItemAsync<int>("SelectedContainer", selectedContainerId);
    }
}