Neighbourhood.omg.lol/Components/EditPicDialog.razor

@inject IJSRuntime JS
@inject State State
@inject RestService 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="right-align no-space">
    <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; }

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

  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();
      await InvokeAsync(StateHasChanged);
    }

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

  }
}