Neighbourhood.omg.lol/Components/Pages/Now.razor

@page "/now"
@implements IDisposable
@inject IJSRuntime JS
@inject State State

<RefreshButton></RefreshButton>

<PageHeading title="Now.garden" icon="fa-duotone fa-seedling">
  <Description>Feel free to stroll through the <a href="now.garden">now.garden</a> and take a look at what people are up to.</Description>
</PageHeading>

<div id="now-garden" class="responsive card-grid">

  @if (garden != null) {
    foreach (NowData now in garden) {
      <article class="now">
        <nav>
          <a class="author" href="/person/@now.Address#now">
            <h6><i class="fa-duotone fa-seedling"></i> @now.Address</h6>
          </a>
        </nav>
        <nav>
          <small>@now.UpdatedRelative</small>
        </nav>
      </article>
    }
  }
  <LoadingCard id="now-loading" icon="fa-duotone fa-seedling" class="now"></LoadingCard>

</div>

@code {
  private List<NowData>? garden;

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    if (garden == null || garden.Count == 0) garden = await State.GetNowGarden();
    State.PropertyChanged += StateChanged;
    State.CanRefresh = true;
    await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("removeElementById", "now-loading");
  }

  private async void StateChanged(object? sender, PropertyChangedEventArgs e) {
    if (e.PropertyName == nameof(State.IsRefreshing) && State.IsRefreshing) {
      garden = await State.GetNowGarden(true);
      State.IsRefreshing = false;
    }
  }

  public void Dispose() {
    State.PropertyChanged -= StateChanged;
    State.CanRefresh = false;
  }
}