pinafore/routes/accounts/[accountId].html

<:Head>
  <title>{{'Pinafore – ' + profileName}}</title>
</:Head>

<Layout page='tags'
        dynamicPage="{{profileName}}"
        dynamicHref="/accounts/{{params.accountId}}"
        dynamicLabel="{{shortProfileName}}"
        dynamicIcon="#fa-user" >
  {{#if $isUserLoggedIn}}
  <DynamicPageBanner title="{{profileName}}" />
  <LazyTimeline timeline='account/{{params.accountId}}' />
  {{else}}
  <HiddenFromSSR>
    <FreeTextLayout>
      <h1>Profile</h1>

      <p>A user timeline will appear here when logged in.</p>
    </FreeTextLayout>
  </HiddenFromSSR>
  {{/if}}
</Layout>
<script>
  import Layout from '../_components/Layout.html'
  import LazyTimeline from '../_components/LazyTimeline.html'
  import FreeTextLayout from '../_components/FreeTextLayout.html'
  import { store } from '../_utils/store.js'
  import HiddenFromSSR from '../_components/HiddenFromSSR'
  import DynamicPageBanner from '../_components/DynamicPageBanner.html'
  import { getAccount } from '../_utils/mastodon/user'
  import { database } from '../_utils/database/database'

  export default {
    oncreate() {
      let currentInstance = this.store.get('currentInstance')
      let accessToken = this.store.get('accessToken')
      let accountId = this.get('params').accountId
      database.getAccount(currentInstance, accountId).then(account => {
        this.set({cachedAccount: account})
      })
      getAccount(currentInstance, accessToken, accountId).then(account => {
        this.set({account: account})
      })
    },
    store: () => store,
    computed: {
      remoteProfileName: (account) => {
        return account && ('@' + account.acct)
      },
      remoteShortProfileName: (account) => {
        return account && ('@' + account.username)
      },
      cachedProfileName: (cachedAccount) => {
        return cachedAccount && ('@' + cachedAccount.acct)
      },
      cachedShortProfileName: (cachedAccount) => {
        return cachedAccount && ('@' + cachedAccount.username)
      },
      profileName: (remoteProfileName, cachedProfileName) => {
        return remoteProfileName || cachedProfileName || ''
      },
      shortProfileName: (remoteShortProfileName, cachedShortProfileName) => {
        return remoteShortProfileName || cachedShortProfileName || ''
      }
    },
    components: {
      Layout,
      LazyTimeline,
      FreeTextLayout,
      HiddenFromSSR,
      DynamicPageBanner
    }
  }
</script>