Neighbourhood.omg.lol/Components/EditBioDialog.razor

@inject IJSRuntime JS
@inject State State
@inject ApiService api

<div class="overlay" data-ui="#@id"></div>
<dialog id="@id">
  <h5>Edit your statuslog bio</h5>
  <div class="row">
    <div class="max markdown-editor">
      @if (Bio != null) {
        <MarkdownEditor @ref="Editor"
                        @bind-Value="@Bio"
                        Theme="material-darker"
                        MaxHeight="100%"
                        AutoDownloadFontAwesome="false"
        >
          <Toolbar>
            <MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa-solid fa-bold" Title="Bold" />
            <MarkdownToolbarButton Action="MarkdownAction.Italic" Icon="fa-solid fa-italic" Title="Italic" />
            <MarkdownToolbarButton Action="MarkdownAction.Heading" Icon="fa-solid fa-heading" Title="Heading" />
            <MarkdownToolbarButton Action="MarkdownAction.Code" Icon="fa-solid fa-code" Title="Code" Separator="true" />
            <MarkdownToolbarButton Action="MarkdownAction.Quote" Icon="fa-solid fa-quote-left" Title="Quote" />
            <MarkdownToolbarButton Action="MarkdownAction.UnorderedList" Icon="fa-solid fa-list-ul" Title="Unordered List" />
            <MarkdownToolbarButton Action="MarkdownAction.OrderedList" Icon="fa-solid fa-list-ol" Title="Ordered List" />
            <MarkdownToolbarButton Action="MarkdownAction.Link" Icon="fa-solid fa-link" Title="Link" Separator="true" />
            <MarkdownToolbarButton Action="MarkdownAction.Image" Icon="fa-solid fa-image" Title="Image" />
            <MarkdownToolbarButton Action="MarkdownAction.HorizontalRule" Icon="fa-solid fa-horizontal-rule" Title="Horizontal Rule" />
            <MarkdownToolbarButton Action="MarkdownAction.Guide" Icon="fa-solid fa-circle-question" Title="Guide" Separator="true" />
          </Toolbar>
        </MarkdownEditor>
      }
    </div>
  </div>
  <nav class="no-space">
    <div class="max"></div>
    <button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
    <button @onclick="PostBio" disabled="@loading">
      @if (loading) {
        <span>Saving...</span>
      }
      else {
        <i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
      }
    </button>
  </nav>
</dialog>

@code {
  private MarkdownEditor? Editor;
  public string? Bio { get; set; }
  [Parameter]
  public string? Address { get; set; }
  private bool loading = true;
  [Parameter]
  public string? id { get; set; }

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    Bio = await api.StatuslogBio(Address ?? State.SelectedAddressName!);
    await InvokeAsync(StateHasChanged);
    await Editor!.SetValueAsync(Bio);
    loading = false;
    await InvokeAsync(StateHasChanged);
  }

  public async Task PostBio() {
    loading = true;
    await InvokeAsync(StateHasChanged);

    // Post the bio
    await api.PostStatuslogBio(Address!, Bio ?? string.Empty);
    State.CachedAddressBio = Utilities.MdToHtmlMarkup(Bio ?? string.Empty);

    await JS.InvokeVoidAsync("ui", "#" + id);
    // reset input
    await OnInitializedAsync();
    loading = false;
    await InvokeAsync(StateHasChanged);
    State.SendRefresh();
  }
}