Neighbourhood.omg.lol/Components/PicList.razor

@inject IJSRuntime JS
@inject State State

@if (Editable) {
  <PicCardEditableTemplate></PicCardEditableTemplate>
}
else {
  <PicCardTemplate></PicCardTemplate>
}

<article id="pics-loading" class="middle-align center-align">
  <div>
    <i class="extra fa-solid fa-images"></i>
    <div class="space"></div>
    <progress class="circle"></progress>
  </div>
</article>


<script>
  async function renderPics(somePics) {
    const template = document.getElementById("PicCard")
    if(template) for (const pic of somePics) {
      const clone = template.content.cloneNode(true)
      let html = clone.children[0].innerHTML

      html = html.replaceAll("{{Pic.Id}}", pic.id)
      html = html.replaceAll("{{Pic.Url}}", pic.url ?? `https://cdn.some.pics/${pic.address}/${pic.id}.${JSON.parse(pic.exif)["File Type Extension"]}`) //TODO: temporary fix
      html = html.replaceAll("{{Pic.Address}}", pic.address)
      html = html.replaceAll("{{Pic.RelativeTime}}", pic.relativeTime)
      html = html.replaceAll("{{Pic.Description}}", pic.description)
      html = html.replaceAll("{{Pic.DescriptionHtml}}", pic.descriptionHtml)

      clone.children[0].innerHTML = html

      clone.querySelector('.share-button').addEventListener('click', shareClick)
      clone.querySelector('.edit-button')?.addEventListener('click', editClick)
      document.getElementById("pics").insertBefore(clone, document.getElementById("pics-loading"))
    }
  }
  async function clearLoading() {
    document.getElementById("pics-loading").remove()
  }

  async function shareClick(e) {
    const url = this.querySelector('input[name="url"]')?.value
    const desc = this.querySelector('input[name="description"]')?.value
    if (CSHARP) CSHARP.invokeMethodAsync('ShareClick', url, desc)
  }

  async function editClick(e) {
    const id = this.querySelector('input[name="id"]')?.value
    if (CSHARP) CSHARP.invokeMethodAsync('EditClick', id)
  }
</script>

@code {
  [Parameter]
  public Func<Task<List<Pic>?>> PicsFunc { get; set; }
  [Parameter]
  public bool Editable { get; set; } = false;
  [Parameter]
  public EditPicDialog? Dialog { get; set; }

  private List<Pic> pics;
  private DotNetObjectReference<PicList>? objRef;

  protected override void OnInitialized() {
    base.OnInitialized();
    objRef = DotNetObjectReference.Create(this);
    State.CurrentPage = Page.Pics;
  }

  protected override async Task OnAfterRenderAsync(bool firstRender) {
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender) {
      await JS.InvokeVoidAsync("injectCSharp", objRef);
      if (State.CurrentPage != Page.Pics) return;
      if (pics == null || pics.Count == 0) pics = await PicsFunc();
      if (State.CurrentPage != Page.Pics) return;

      int page_size = 1;
      for (int i = 0; i < pics.Count; i += page_size) {
        if (State.CurrentPage != Page.Pics) return;
        await JS.InvokeVoidAsync("renderPics", pics.Skip(i * page_size).Take(page_size));
        if (State.CurrentPage != Page.Pics) return;
      }
        if (State.CurrentPage != Page.Pics) return;
      await JS.InvokeVoidAsync("clearLoading");
    }
  }

  [JSInvokable]
  public async Task EditClick(string? id) {
    if (Editable && Dialog != null)
    {
      Pic? pic = pics.FirstOrDefault(p => p.Id == id);
      Dialog.Pic = pic;
      // await InvokeAsync(StateHasChanged);
      await JS.InvokeVoidAsync("ui", "#" + Dialog?.id);
    }
  }

  [JSInvokable]
  public async Task ShareClick(string? url, string? description) {
    await Share.Default.RequestAsync(new ShareTextRequest {
        Uri = url,
        Text = description,
        Title = "I saw this on some.pics",
        Subject = "I saw this on some.pics"
      });
  }
}