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

@page "/directory"
@using System.Text.RegularExpressions
@using System.Globalization
@implements IDisposable
@inject IJSRuntime JS
@inject State State

<RefreshButton></RefreshButton>

<PageHeading title="Address Directory" icon="fa-duotone fa-address-book">
  <Description>Welcome to the <a href="https://home.omg.lol/directory">omg.lol member directory</a>! Everyone here is awesome. <i class="fa-solid fa-sparkles"></i></Description>
</PageHeading>

@if (groupedAddresses != null) {
  IdnMapping idn = new IdnMapping();
  <article id="directoryIndex" class="responsive">
    <nav class="wrap">
      @foreach (var group in groupedAddresses) {
        <a @onclick='()=>{JS.InvokeVoidAsync("scrollToId", $"index-{group.Key}");}' class="button circle transparent address">@group.Key</a>
      }
    </nav>
  </article>
  <article id="directory" class="responsive">
    @foreach(var group in groupedAddresses) {
      <h3 class="address" id="index-@group.Key">— @group.Key —</h3>
      <ul>
        @foreach(string address in group) {
          string displayAddress = address;
          string linkAddress = address;
          if (group.Key == "😀") {
            try {
              linkAddress = idn.GetAscii(address);
              displayAddress = $"{address} {linkAddress}";
            }
            catch (Exception) { }
          }
          <li>
            <a class="chip medium no-border no-margin" href="/person/@address">
              <img class="circle avatar responsive" src="https://profiles.cache.lol/@linkAddress/picture">
              <span>@displayAddress</span>
            </a>
          </li>
        }
      </ul>
    }
  </article>
}
else {
  <LoadingCard id="address-loading" icon="fa-duotone fa-address-book"></LoadingCard>
}
@code {
  private List<string>? addresses;
  private IOrderedEnumerable<IGrouping<string, string>>? groupedAddresses;

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    if (addresses == null || addresses.Count == 0){
      addresses = await State.GetDirectory();
      GroupAddresses();
    }
    State.PropertyChanged += StateChanged;
    State.CanRefresh = true;
    await InvokeAsync(StateHasChanged);
  }

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

  private void GroupAddresses() {
    groupedAddresses = addresses?.GroupBy(s => {
      if (Regex.IsMatch(s, "^[0-9]", RegexOptions.IgnoreCase)) return "#";
      else if (Regex.IsMatch(s, "^[a-z]", RegexOptions.IgnoreCase)) return s.First().ToString().ToUpper();
      else return "😀";
    }).OrderBy(g => g.Key);
  }

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