Neighbourhood.omg.lol/Components/NewEphemeral.razor

@inject IJSRuntime JS
@inject State State
@inject ApiService api
@inject NavigationManager navigationManager

<div class="overlay @(Active ? "active" : string.Empty)" data-ui="#@id"></div>
<dialog id="@id" class="@(Active ? "active" : string.Empty)" open="@Active">
  <h5>Share a fleeting thought</h5>
  <div class="row">
    <div class="field textarea border max">
      <InputTextArea @bind-Value="Content"></InputTextArea>
    </div>
  </div>
  <div class="row">
    <p>Your anonymous post will be shared for a while, and then it will disappear forever. It can’t be edited, so take care before submitting.</p>
  </div>
  <div class="row">
    <p><strong>If you need help, don’t suffer in silence. <a href="https://www.helpguide.org/find-help.htm">Talk to someone right now</a>.</strong></p>
  </div>
  <nav class="right-align no-space">
    <button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
    <button @onclick="PostEphemeral" disabled="@loading">
      @if (loading) {
        <span>Saving...</span>
      }
      else {
        <i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
      }
    </button>
  </nav>
</dialog>

@code {
  [Parameter]
  public string? id { get; set; }
  [Parameter]
  public bool Active { get; set; }
  [Parameter]
  public string Content { get; set; } = string.Empty;

  private bool loading = false;

  public async Task PostEphemeral() {
    loading = true;
    await InvokeAsync(StateHasChanged);
    var result = await api.PostEphemeral(Content);
    if (result != null) {
      await State.RefreshStatuses();
      State.SendRefresh();
      await InvokeAsync(StateHasChanged);
    }

    this.Active = false;
    await JS.InvokeVoidAsync("ui", "#" + id);
    Content = string.Empty;
    loading = false;
  }
}