underbbs/frontend/ts/profile-element.ts

import { Author } from "./message"
import util from "./util"
import { Fetcher } from "./fetcher"
import { AdapterState } from "./adapter"

export class ProfileElement extends HTMLElement {
  static observedAttributes = [ "data-latest", "data-adapter", "data-target" ];
  
  private _id: string | null = null;
  private _adapter: string = "";
  
  private _author: Author | null = null;
  
  private _authorFetcher: Fetcher | null = null; 
  
  
  constructor() {
    super();
    this.innerHTML = "<div class='author_pfp'></div><div class='author_id'></div><div class='author_name'></div><div class='author_description'></div>"
    
  }
  
  connectedCallback() {
    this._id = this.getAttribute("data-target");
    this._adapter = this.getAttribute("data-adapter") ?? "";
    const gateway = this.getAttribute("data-gateway") ?? "";
    this._authorFetcher = new Fetcher(gateway, this._adapter, "author");
  }
  
  attributeChangedCallback(attr: string, prev: string, next: string) {

    switch (attr) {
      case "data-target":
        if (!next) {
          return
        }
        this._id = next;
        if (this._authorFetcher) {
          this._authorFetcher.queue(next, 100);
        }
        break;
      case "data-latest":
        let datastore = AdapterState._instance.data.get(this._adapter);
        if (!datastore) {
          console.log("no data yet, wait for some to come in maybe...");
          return;
        }
        this._author = datastore.profileCache.get(next) ?? null;
        console.log(this._author);
        if (this._author == null) {
          return;
        }
        if (this._author.id == next) {
          let pfp = this.querySelector(".author_pfp");
          let handle = this.querySelector(".author_id");
          let prefName = this.querySelector(".author_name");
          let bio = this.querySelector(".author_description");
          
          if (pfp) {
            pfp.innerHTML = `<img src="${this._author.profilePic}">`
          }
          if (handle) {
            handle.innerHTML = `<a href="${this._author.uri}">${this._author.id}</a>`;
          }
          if (prefName) {
            prefName.innerHTML = this._author.name;
          }
          if (bio) {
            bio.innerHTML = this._author.profileData;
          }
        }
        break;
    }
  }
}