pinafore/src/routes/_pages/requests.html

<DynamicPageBanner title="Follow requests" icon="#fa-user-plus" />
{#if $isUserLoggedIn }
  <AccountsListPage {accountsFetcher} {accountActions} />
{/if}
<script>
  import AccountsListPage from '../_components/AccountsListPage.html'
  import { store } from '../_store/store'
  import { getFollowRequests } from '../_api/followRequests'
  import DynamicPageBanner from '../_components/DynamicPageBanner.html'
  import { setFollowRequestApprovedOrRejected } from '../_actions/requests'
  import { database } from '../_database/database'

  // sneakily update the follow reqs count in the cache, since we just fetched it
  function updateFollowReqsCount ($currentInstance, followReqs) {
    /* no await */ database.setFollowRequestCount($currentInstance, followReqs.length)
    const { followRequestCounts } = store.get()
    followRequestCounts[$currentInstance] = followReqs.length
    store.set({ followRequestCounts })
  }

  export default {
    data: () => ({
      accountActions: [
        {
          icon: '#fa-check',
          label: 'Approve',
          onclick: (accountId) => setFollowRequestApprovedOrRejected(accountId, true, true)
        },
        {
          icon: '#fa-times',
          label: 'Reject',
          onclick: (accountId) => setFollowRequestApprovedOrRejected(accountId, false, true)
        }
      ]
    }),
    computed: {
      accountsFetcher: ({ $currentInstance, $accessToken }) => async () => {
        const followReqs = await getFollowRequests($currentInstance, $accessToken)
        updateFollowReqsCount($currentInstance, followReqs)
        return followReqs
      }
    },
    store: () => store,
    components: {
      AccountsListPage,
      DynamicPageBanner
    }
  }
</script>