add lists of follows and followers

routes/_api/followsAndFollowers.js

@@ -0,0 +1,14 @@
+import { getWithTimeout, paramsString } from '../_utils/ajax'
+import { auth, basename } from './utils'
+
+export async function getFollows (instanceName, accessToken, accountId, limit = 80) {
+  let url = `${basename(instanceName)}/api/v1/accounts/${accountId}/following`
+  url += '?' + paramsString({ limit })
+  return getWithTimeout(url, auth(accessToken))
+}
+
+export async function getFollowers (instanceName, accessToken, accountId, limit = 80) {
+  let url = `${basename(instanceName)}/api/v1/accounts/${accountId}/followers`
+  url += '?' + paramsString({ limit })
+  return getWithTimeout(url, auth(accessToken))
+}

routes/_components/profile/AccountProfileDetails.html

@@ -8,20 +8,24 @@
     </span>
   </div>
   <div class="account-profile-details-item">
-    <span class="account-profile-details-item-title">
-      Follows
-    </span>
-    <span class="account-profile-details-item-datum">
-      {{numFollowingDisplay}}
-    </span>
+    <a href='/accounts/{{account.id}}/follows'>
+      <span class="account-profile-details-item-title">
+        Follows
+      </span>
+      <span class="account-profile-details-item-datum">
+        {{numFollowingDisplay}}
+      </span>
+    </a>
   </div>
   <div class="account-profile-details-item">
-    <span class="account-profile-details-item-title">
-      Followers
-    </span>
-    <span class="account-profile-details-item-datum">
-      {{numFollowersDisplay}}
-    </span>
+    <a href='/accounts/{{account.id}}/followers'>
+      <span class="account-profile-details-item-title">
+        Followers
+      </span>
+      <span class="account-profile-details-item-datum">
+        {{numFollowersDisplay}}
+      </span>
+    </a>
   </div>
   <!-- TODO: re-enable this when we support profile editing -->
   {{#if account && verifyCredentials && account.id !== verifyCredentials.id}}

routes/_pages/accounts/[accountId]/followers.html

@@ -0,0 +1,20 @@
+<DynamicPageBanner title="Followers" />
+<AccountsListPage :accountsFetcher />
+<script>
+  import { getFollowers } from '../../../_api/followsAndFollowers'
+  import AccountsListPage from '../../../_components/AccountsListPage.html'
+  import { store } from '../../../_store/store'
+  import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
+
+  export default {
+    computed: {
+      accountId: params => params.accountId,
+      accountsFetcher: ($currentInstance, $accessToken, accountId) => () => getFollowers($currentInstance, $accessToken, accountId)
+    },
+    store: () => store,
+    components: {
+      AccountsListPage,
+      DynamicPageBanner
+    }
+  }
+</script>

routes/_pages/accounts/[accountId]/follows.html

@@ -0,0 +1,20 @@
+<DynamicPageBanner title="Follows" />
+<AccountsListPage :accountsFetcher />
+<script>
+  import { getFollows } from '../../../_api/followsAndFollowers'
+  import AccountsListPage from '../../../_components/AccountsListPage.html'
+  import { store } from '../../../_store/store'
+  import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
+
+  export default {
+    computed: {
+      accountId: params => params.accountId,
+      accountsFetcher: ($currentInstance, $accessToken, accountId) => () => getFollows($currentInstance, $accessToken, accountId)
+    },
+    store: () => store,
+    components: {
+      AccountsListPage,
+      DynamicPageBanner
+    }
+  }
+</script>

routes/accounts/[accountId]/followers.html

@@ -0,0 +1,21 @@
+<:Head>
+  <title>Pinafore – Followers</title>
+</:Head>
+<Layout page='tags'>
+  <LazyPage :pageComponent :params />
+</Layout>
+<script>
+  import Layout from '../../_components/Layout.html'
+  import LazyPage from '../../_components/LazyPage.html'
+  import pageComponent from '../../_pages/accounts/[accountId]/followers.html'
+
+  export default {
+    components: {
+      Layout,
+      LazyPage
+    },
+    data: () => ({
+      pageComponent
+    })
+  }
+</script>

routes/accounts/[accountId]/follows.html

@@ -0,0 +1,21 @@
+<:Head>
+  <title>Pinafore – Follows</title>
+</:Head>
+<Layout page='tags'>
+  <LazyPage :pageComponent :params />
+</Layout>
+<script>
+  import Layout from '../../_components/Layout.html'
+  import LazyPage from '../../_components/LazyPage.html'
+  import pageComponent from '../../_pages/accounts/[accountId]/follows.html'
+
+  export default {
+    components: {
+      Layout,
+      LazyPage
+    },
+    data: () => ({
+      pageComponent
+    })
+  }
+</script>