Neighbourhood.omg.lol/Components/EditPicDialog.razor

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

<div class="overlay" data-ui="#@id"></div>
<dialog id="@id">
  <div class="padding center-align">
    <img src="@Pic?.Url" class="small-height square" />
  </div>
  <div class="row">
    <div class="field textarea label border max">
      <InputTextArea @bind-Value="Description"></InputTextArea>
      <label>Description</label>
    </div>
  </div>
  <nav class="no-space">
    @if (confirmDelete) {
      <button @onclick="ConfirmDeletePic" 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="DeletePic" disabled="@loading" class="red-7-bg white-fg">
        <i class="fa-solid fa-trash"></i> <span>Delete</span>
      </button>
    }
    <div class="max"></div>
    <button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
    <button @onclick="PostPic" disabled="@loading">
      @if (loading) {
        <span>Saving...</span>
      }
      else {
        <i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
      }
    </button>
  </nav>
</dialog>

@code {
  private Pic? _pic;

  public Pic? Pic { 
    get => _pic;
    set {
      _pic = value;
      Description = _pic?.Description;
      InvokeAsync(StateHasChanged);
    }
  }

  public string? Description { get; set; }
  private bool loading = false;
  [Parameter]
  public string? id { get; set; }
  private bool confirmDelete { get; set; }

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    Description = Pic?.Description;
  }

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

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

      if (!string.IsNullOrEmpty(Pic?.Id)) {
        await api.DeletePic(State.SelectedAddressName!, Pic.Id);
        await State.RefreshPics();
        State.SendRefresh();
        await InvokeAsync(StateHasChanged);
      }

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

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

    if(!string.IsNullOrEmpty(Pic?.Id)) {
      await api.PostPicDescription(State.SelectedAddressName!, Pic.Id, Description);
      await State.RefreshPics();
      State.SendRefresh();
      await InvokeAsync(StateHasChanged);
    }

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

  }
}