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

@page "/person/{Address}"
@inject State State
@inject IJSRuntime JS
@inject NavigationManager Nav

<RefreshButton></RefreshButton>

<div class="row center-align">
  <h3 class="page-heading"><i class="fa-solid fa-fw fa-at"></i>@Address</h3>
</div>
<div class="row center-align">
  <img class="profile avatar" src="https://profiles.cache.lol/@Address/picture" alt="@Address" />
</div>
@if (FeatureFlags.Following) {
  <div class="row center-align">
    @if (State.IsFollowing(Address)) {
      <button id="follow-button" @onclick="async() => {await State.Unfollow(Address);await InvokeAsync(StateHasChanged);}">
        <i class="fa-solid fa-minus"></i> Unfollow
      </button>
    }
    else {
      <button id="follow-button" @onclick="async() => {await State.Follow(Address);await InvokeAsync(StateHasChanged);}">
        <i class="fa-solid fa-plus"></i> Follow
      </button>
    }
  </div>
}
<div class="responsive">
  <div class="tabs scroll">
    <a data-ui="#profile" @onclick="ReloadProfile">
      <i class="fa-solid fa-id-card"></i>
      <span>@(Address).omg.lol</span>
    </a>
    <a data-ui="#statuses" class="active">
      <i class="fa-solid fa-message-smile"></i>
      <span>Status.lol</span>
    </a>
    <a data-ui="#pics">
      <i class="fa-solid fa-images"></i>
      <span>Some.pics</span>
    </a>
    @if(now != null || IsMe){
      <a data-ui="#now" @onclick="ReloadNow">
        <i class="fa-duotone fa-seedling"></i>
        <span>/Now</span>
      </a>
    }
  </div>
</div>

<div class="responsive page-container">
  <div id="profile" class="page no-padding">
    <a href="@ProfileUrl" target="_blank" class="hover absolute top right chip fill large-elevate">Open in browser <i class="fa-solid fa-arrow-up-right-from-square tiny"></i></a>
    <ExternalPageComponent id="profile_page" @ref="ProfilePage" Url="@ProfileUrl"></ExternalPageComponent>
    @if (IsMe) {
        <a href="/editProfile" class="button fab circle extra large-elevate center-align middle-align">
          <i class="square fa-solid fa-file-pen" style="line-height:56px;"></i>
          <span>Edit</span>
        </a>
      }
  </div>

  <div id="statuses" class="page padding active">
    @if(bio == null || !string.IsNullOrEmpty(bio.ToString())) {
      <div id="info" class="box basis transparent">
        <article id="bio" class="container shadowed blue-2-bg gray-9-fg">
          @if (bio == null) {
            <p><progress class="circle small"></progress></p>
          }
          else {
            @bio
          }
        </article>
      </div>
    }
    <StatusList @ref="StatusList" StatusFunc="@(async(refresh) => await State.GetStatuses(Address, refresh))" Editable="@IsMe"></StatusList>
    @if(IsMe) {
      <button class="fab circle extra large-elevate" data-ui="#post-modal">
        <i class="fa-solid fa-pen-to-square"></i>
      </button>
      <NewStatusDialog id="post-modal"></NewStatusDialog>
    }
  </div>
  
  <div id="pics" class="page padding">
    <PicList @ref="PicList" PicsFunc="@(async(refresh) => await State.GetPics(Address, refresh))" Editable="@IsMe"></PicList>
    @if (IsMe) {
      <button class="fab circle extra large-elevate" data-ui="#post-modal">
        <i class="fa-solid fa-camera-retro"></i>
      </button>
      <NewPicDialog id="post-modal"></NewPicDialog>
    }
  </div>
  @if(now != null || IsMe){
    <div id="now" class="page no-padding">
      <a href="@NowPageUrl" target="_blank" class="hover absolute top right chip fill large-elevate">Open in browser <i class="fa-solid fa-arrow-up-right-from-square tiny"></i></a>
      <ExternalPageComponent id="now_page" @ref="NowPage" Url="@NowPageUrl"></ExternalPageComponent>
      @if (IsMe) {
        <a href="/editNow" class="button fab circle extra large-elevate center-align middle-align">
          <i class="square fa-solid fa-file-pen" style="line-height:56px;"></i>
          <span>Edit</span>
        </a>
      }
    </div>
  }
</div>

@code {
  private string _address = string.Empty;
  [Parameter]
  public string Address { 
    get => _address;
    set {
      _address = value;
      if (StatusList != null) StatusList.StatusFunc = async (refresh) => await State.GetStatuses(_address, refresh);
      if (PicList != null) PicList.PicsFunc = async (refresh) => await State.GetPics(_address, refresh);
    }
  }
  public string ProfileUrl {
    get => $"https://{Address}.omg.lol/";
  }

  public string NowPageUrl {
    get => now?.Url ?? $"https://{Address}.omg.lol/now";
  }

  public ExternalPageComponent? NowPage { get; set; }
  public ExternalPageComponent? ProfilePage { get; set; }

  private StatusList? StatusList { get; set; }
  private PicList? PicList { get; set; }

  private bool IsMe { 
    get => Address == State.SelectedAddressName;
  }

  private MarkupString? bio;

  private NowData? now;

  protected override async Task OnInitializedAsync() {
    List<NowData>? garden = await State.GetNowGarden();
    now = garden?.FirstOrDefault(n => n.Address == Address);
    await InvokeAsync(StateHasChanged);
    string fragment = new Uri(Nav.Uri).Fragment;
    await JS.InvokeVoidAsync("ui", fragment);
    if (fragment.EndsWith("now")) await ReloadNow();
    else if (fragment.EndsWith("profile")) await ReloadProfile();
    bio = await State.GetBio(Address);
    State.PropertyChanged += StateChanged;
  }

  private async void StateChanged(object? sender, PropertyChangedEventArgs e) {
    if (e.PropertyName == nameof(State.IsRefreshing) && State.IsRefreshing) {
      using (State.GetRefreshToken()){
        await ReloadNow();
        await ReloadProfile();
        bio = await State.GetBio(Address);
        await InvokeAsync(StateHasChanged);
      }
    }
  }

  private async Task ReloadNow() {
    if(NowPage != null) {
      await NowPage.Reload();
      await ResizeIframes();
    }
  }

  private async Task ReloadProfile() {
    if (ProfilePage != null) {
      await ProfilePage.Reload();
      await ResizeIframes();
    }
  }

  private async Task ResizeIframes() {
    await JS.InvokeVoidAsync("iframeResize", new { license = "GPLv3" });
  }
}