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

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

<RefreshButton></RefreshButton>

<PageHeading title="Eph.emer.al" icon="fa-light fa-comment-dots">
  <Description><a href="https://eph.emer.al">Eph.emer.al</a> is a place for fleeting thoughts. Everything on this page will disappear after a while.</Description>
</PageHeading>

<AuthorizeView>
  <Authorized>
    <button class="fab circle extra large-elevate" data-ui="#ephemeral-modal">
      <i class="fa-light fa-comment-plus"></i>
    </button>
    <NewEphemeral id="ephemeral-modal"></NewEphemeral>
  </Authorized>
</AuthorizeView>

<div id="ephemeral" class="responsive">

  @if (messages != null) {
    foreach (MarkupString message in messages) {
      <article class="ephemeral center">
        @message
      </article>
    }
  }

  <LoadingCard id="ephemeral-loading" icon="fa-light fa-comment-dots"></LoadingCard>
</div>

@code {
  private List<MarkupString>? messages;

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

  private async void StateChanged(object? sender, PropertyChangedEventArgs e) {
    if (e.PropertyName == nameof(State.IsRefreshing) && State.IsRefreshing) {
      using (State.GetRefreshToken()) {
        messages = await State.GetEphemeralMessages(true);
        await InvokeAsync(StateHasChanged);
      }
    }
  }

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