Neighbourhood.omg.lol/Components/EditStatusDialog.razor

@inject IJSRuntime JS
@inject State State
@inject RestService api

<div class="overlay" data-ui="#@id"></div>
<dialog id="@id">
  <div class="row">
    <div class="min square extra">
      <button class="transparent square extra no-margin">
        <object id="status-emoji" class="large emoji @(Emoji == null ? "animated" : string.Empty)" data-emoji="@(Emoji ?? "🫥")">@(Emoji ?? "🫥")</object>
        <menu class="no-wrap">
          <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@@^1/index.js"></script>
          <emoji-picker emoji-version="15.1"></emoji-picker>
          <script>
            document.querySelector('emoji-picker')
              .addEventListener('emoji-click', event => {
                document.getElementById('status-emoji').setAttribute('data-emoji', event.detail.unicode)
                const input = document.getElementById('status-emoji-input')
                input.value = event.detail.unicode
                var event = new Event('change');
                input.dispatchEvent(event);
              })
          </script>
        </menu>
      </button>
    </div>
    <div class="field textarea label border max">
      <InputTextArea @bind-Value="Content"></InputTextArea>
      <label>Status</label>
    </div>
  </div>
  <nav class="no-space">
    @if (confirmDelete) {
      <button @onclick="ConfirmDeleteStatus" disabled="@loading" class="red-7-bg white-fg">
        <i class="fa-solid fa-exclamation-triangle"></i> <span>Are you sure?</span>
      </button>
    }
    else {
      <button @onclick="DeleteStatus" disabled="@loading" class="red-7-bg white-fg">
        <i class="fa-solid fa-trash"></i> <span>Delete</span>
      </button>
    }
    <div class="max"></div>
    <InputText id="status-emoji-input" class="invisible" @bind-Value="Emoji"></InputText>
    <button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
    <button @onclick="PatchStatus" disabled="@loading">
      @if (loading) {
        <span>Saving...</span>
      }
      else {
        <i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
      }
    </button>
  </nav>
</dialog>

@code {
  private Status? _status;

  public Status? Status {
    get => _status;
    set {
      _status = value;
      Content = _status?.Content;
      Emoji = _status?.Emoji;
      InvokeAsync(StateHasChanged);
    }
  }
  public string? Content { get; set; }
  public string? Emoji { get; set; }
  private bool loading = false;
  [Parameter]
  public string id { get; set; }
  private bool confirmDelete { get; set; }

  protected override async Task OnInitializedAsync() {
    Content = Status?.Content;
    Emoji = Status?.Emoji;
  }

  public async Task DeleteStatus() {
    if (!confirmDelete) confirmDelete = true;
    await InvokeAsync(StateHasChanged);
  }

  public async Task ConfirmDeleteStatus() {
    if(confirmDelete) {
      loading = true;
      await InvokeAsync(StateHasChanged);

      if (!string.IsNullOrEmpty(Status?.Id)) {
        await api.DeleteStatus(State.SelectedAddressName, Status.Id);
        await State.RefreshStatuses();
        await InvokeAsync(StateHasChanged);
      }

      await JS.InvokeVoidAsync("ui", "#" + id);
      // clear input
      Content = string.Empty;
      Emoji = string.Empty;
      Status = null;
      loading = false;
      confirmDelete = false;
      await InvokeAsync(StateHasChanged);
    }
  }

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

    if (!string.IsNullOrEmpty(Status?.Id)) {
      await api.PatchStatus(State.SelectedAddressName, Status.Id, Content, Emoji);
      await State.RefreshStatuses();
      await InvokeAsync(StateHasChanged);
    }

    await JS.InvokeVoidAsync("ui", "#" + id);
    // clear input
    Content = string.Empty;
    Emoji = string.Empty;
    Status = null;
    loading = false;
    confirmDelete = false;
    await InvokeAsync(StateHasChanged);

  }
}