From d3fb67bec3a00c0c743f9d3796c3ee000f444308 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 16 Sep 2019 22:36:24 -0700
Subject: [PATCH] feat: show unread follow requests on community page (#1493)

* feat: show unread follow requests on community page

fixes #477

* fixup

* fixup
---
 src/routes/_actions/followRequests.js         | 34 ++++++----
 src/routes/_api/followRequests.js             | 17 +++++
 src/routes/_components/NavItem.html           | 12 +++-
 src/routes/_database/meta.js                  |  8 +++
 src/routes/_pages/community/index.html        | 13 +++-
 src/routes/_pages/requests.html               | 17 ++++-
 .../computations/timelineComputations.js      | 10 +++
 .../_store/observers/instanceObservers.js     |  6 +-
 src/routes/_store/store.js                    |  1 +
 tests/serverActions.js                        |  2 +-
 tests/spec/116-follow-requests.js             | 66 ++++++++++++++++---
 11 files changed, 153 insertions(+), 33 deletions(-)
 create mode 100644 src/routes/_api/followRequests.js

diff --git a/src/routes/_actions/followRequests.js b/src/routes/_actions/followRequests.js
index 0099644b..6d078e5e 100644
--- a/src/routes/_actions/followRequests.js
+++ b/src/routes/_actions/followRequests.js
@@ -1,17 +1,25 @@
-import { DEFAULT_TIMEOUT, get, post, WRITE_TIMEOUT } from '../_utils/ajax'
-import { auth, basename } from '../_api/utils'
+import { store } from '../_store/store'
+import { cacheFirstUpdateAfter } from '../_utils/sync'
+import { database } from '../_database/database'
+import { getFollowRequests } from '../_api/followRequests'
 
-export async function getFollowRequests (instanceName, accessToken) {
-  const url = `${basename(instanceName)}/api/v1/follow_requests`
-  return get(url, auth(accessToken), { timeout: DEFAULT_TIMEOUT })
-}
+export async function updateFollowRequestCountIfLockedAccount (instanceName) {
+  const { verifyCredentials, loggedInInstances } = store.get()
 
-export async function authorizeFollowRequest (instanceName, accessToken, id) {
-  const url = `${basename(instanceName)}/api/v1/follow_requests/${id}/authorize`
-  return post(url, null, auth(accessToken), { timeout: WRITE_TIMEOUT })
-}
+  if (!verifyCredentials[instanceName].locked) {
+    return
+  }
 
-export async function rejectFollowRequest (instanceName, accessToken, id) {
-  const url = `${basename(instanceName)}/api/v1/follow_requests/${id}/reject`
-  return post(url, null, auth(accessToken), { timeout: WRITE_TIMEOUT })
+  const accessToken = loggedInInstances[instanceName].access_token
+
+  await cacheFirstUpdateAfter(
+    async () => (await getFollowRequests(instanceName, accessToken)).length,
+    () => database.getFollowRequestCount(instanceName),
+    followReqsCount => database.setFollowRequestCount(instanceName, followReqsCount),
+    followReqsCount => {
+      const { followRequestCounts } = store.get()
+      followRequestCounts[instanceName] = followReqsCount
+      store.set({ followRequestCounts })
+    }
+  )
 }
diff --git a/src/routes/_api/followRequests.js b/src/routes/_api/followRequests.js
new file mode 100644
index 00000000..7f6c87c5
--- /dev/null
+++ b/src/routes/_api/followRequests.js
@@ -0,0 +1,17 @@
+import { DEFAULT_TIMEOUT, get, post, WRITE_TIMEOUT } from '../_utils/ajax'
+import { auth, basename } from './utils'
+
+export async function getFollowRequests (instanceName, accessToken) {
+  const url = `${basename(instanceName)}/api/v1/follow_requests`
+  return get(url, auth(accessToken), { timeout: DEFAULT_TIMEOUT })
+}
+
+export async function authorizeFollowRequest (instanceName, accessToken, id) {
+  const url = `${basename(instanceName)}/api/v1/follow_requests/${id}/authorize`
+  return post(url, null, auth(accessToken), { timeout: WRITE_TIMEOUT })
+}
+
+export async function rejectFollowRequest (instanceName, accessToken, id) {
+  const url = `${basename(instanceName)}/api/v1/follow_requests/${id}/reject`
+  return post(url, null, auth(accessToken), { timeout: WRITE_TIMEOUT })
+}
diff --git a/src/routes/_components/NavItem.html b/src/routes/_components/NavItem.html
index ed3e33dd..39ec22af 100644
--- a/src/routes/_components/NavItem.html
+++ b/src/routes/_components/NavItem.html
@@ -148,18 +148,24 @@
           // special case – these should both highlight the notifications tab icon
           (name === 'notifications' && page === 'notifications/mentions')
       },
-      ariaLabel: ({ selected, name, label, $numberOfNotifications }) => {
+      ariaLabel: ({ selected, name, label, $numberOfNotifications, $numberOfFollowRequests }) => {
         let res = label
         if (selected) {
           res += ' (current page)'
         }
         if (name === 'notifications' && $numberOfNotifications) {
           res += ` (${$numberOfNotifications} notification${$numberOfNotifications === 1 ? '' : 's'})`
+        } else if (name === 'community' && $numberOfFollowRequests) {
+          res += ` (${$numberOfFollowRequests} follow request${$numberOfFollowRequests === 1 ? '' : 's'})`
         }
         return res
       },
-      showBadge: ({ name, $hasNotifications }) => name === 'notifications' && $hasNotifications,
-      badgeNumber: ({ name, $numberOfNotifications }) => name === 'notifications' && $numberOfNotifications
+      showBadge: ({ name, $hasNotifications, $hasFollowRequests }) => (
+        (name === 'notifications' && $hasNotifications) || (name === 'community' && $hasFollowRequests)
+      ),
+      badgeNumber: ({ name, $numberOfNotifications, $numberOfFollowRequests }) => (
+        (name === 'notifications' && $numberOfNotifications) || (name === 'community' && $numberOfFollowRequests)
+      )
     },
     methods: {
       onClick (e) {
diff --git a/src/routes/_database/meta.js b/src/routes/_database/meta.js
index 868db0f6..526ea3ef 100644
--- a/src/routes/_database/meta.js
+++ b/src/routes/_database/meta.js
@@ -55,3 +55,11 @@ export async function getCustomEmoji (instanceName) {
 export async function setCustomEmoji (instanceName, value) {
   return setMetaProperty(instanceName, 'customEmoji', value)
 }
+
+export async function getFollowRequestCount (instanceName) {
+  return getMetaProperty(instanceName, 'followRequestCount')
+}
+
+export async function setFollowRequestCount (instanceName, value) {
+  return setMetaProperty(instanceName, 'followRequestCount', value)
+}
diff --git a/src/routes/_pages/community/index.html b/src/routes/_pages/community/index.html
index e0e77cb8..237c01e0 100644
--- a/src/routes/_pages/community/index.html
+++ b/src/routes/_pages/community/index.html
@@ -53,7 +53,7 @@
   <PageList label="Instance settings">
     {#if isLockedAccount}
     <PageListItem href="/requests"
-                  label="Follow requests"
+                  label={followRequestsLabel}
                   icon="#fa-user-plus"
      />
     {/if}
@@ -109,12 +109,16 @@
   import PageList from '../../_components/community/PageList.html'
   import PageListItem from '../../_components/community/PageListItem.html'
   import { updateListsForInstance } from '../../_actions/lists'
+  import { updateFollowRequestCountIfLockedAccount } from '../../_actions/followRequests'
 
   export default {
     async oncreate () {
       const { currentInstance } = this.store.get()
       if (currentInstance) {
-        await updateListsForInstance(currentInstance)
+        await Promise.all([
+          updateListsForInstance(currentInstance),
+          updateFollowRequestCountIfLockedAccount(currentInstance)
+        ])
       }
     },
     store: () => store,
@@ -125,7 +129,10 @@
       PageListItem
     },
     computed: {
-      isLockedAccount: ({ $currentVerifyCredentials }) => $currentVerifyCredentials && $currentVerifyCredentials.locked
+      isLockedAccount: ({ $currentVerifyCredentials }) => $currentVerifyCredentials && $currentVerifyCredentials.locked,
+      followRequestsLabel: ({ $hasFollowRequests, $numberOfFollowRequests }) => (
+        `Follow requests${$hasFollowRequests ? ` (${$numberOfFollowRequests})` : ''}`
+      )
     }
   }
 </script>
diff --git a/src/routes/_pages/requests.html b/src/routes/_pages/requests.html
index 5134160a..55655e8b 100644
--- a/src/routes/_pages/requests.html
+++ b/src/routes/_pages/requests.html
@@ -5,9 +5,18 @@
 <script>
   import AccountsListPage from '../_components/AccountsListPage.html'
   import { store } from '../_store/store'
-  import { getFollowRequests } from '../_actions/followRequests'
+  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: () => ({
@@ -25,7 +34,11 @@
       ]
     }),
     computed: {
-      accountsFetcher: ({ $currentInstance, $accessToken }) => () => getFollowRequests($currentInstance, $accessToken)
+      accountsFetcher: ({ $currentInstance, $accessToken }) => async () => {
+        const followReqs = await getFollowRequests($currentInstance, $accessToken)
+        updateFollowReqsCount($currentInstance, followReqs)
+        return followReqs
+      }
     },
     store: () => store,
     components: {
diff --git a/src/routes/_store/computations/timelineComputations.js b/src/routes/_store/computations/timelineComputations.js
index c5b23af3..8496d01a 100644
--- a/src/routes/_store/computations/timelineComputations.js
+++ b/src/routes/_store/computations/timelineComputations.js
@@ -181,4 +181,14 @@ export function timelineComputations (store) {
       currentPage !== 'notifications' && !!numberOfNotifications
     )
   )
+
+  store.compute('numberOfFollowRequests',
+    ['followRequestCounts', 'currentInstance'],
+    (followRequestCounts, currentInstance) => get(followRequestCounts, [currentInstance], 0)
+  )
+
+  store.compute('hasFollowRequests',
+    ['numberOfFollowRequests'],
+    (numberOfFollowRequests) => !!numberOfFollowRequests
+  )
 }
diff --git a/src/routes/_store/observers/instanceObservers.js b/src/routes/_store/observers/instanceObservers.js
index 728a2522..9af4104f 100644
--- a/src/routes/_store/observers/instanceObservers.js
+++ b/src/routes/_store/observers/instanceObservers.js
@@ -6,6 +6,7 @@ import { setupCustomEmojiForInstance } from '../../_actions/emoji'
 import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
 import { mark, stop } from '../../_utils/marks'
 import { store } from '../store'
+import { updateFollowRequestCountIfLockedAccount } from '../../_actions/followRequests'
 
 // stream to watch for home timeline updates and notifications
 let currentInstanceStream
@@ -48,7 +49,10 @@ async function refreshInstanceData (instanceName) {
   // these are the only critical ones
   await Promise.all([
     updateInstanceInfo(instanceName),
-    updateVerifyCredentialsForInstance(instanceName)
+    updateVerifyCredentialsForInstance(instanceName).then(() => {
+      // Once we have the verifyCredentials (so we know if the account is locked), lazily update the follow requests
+      scheduleIdleTask(() => updateFollowRequestCountIfLockedAccount(instanceName))
+    })
   ])
 }
 
diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js
index f8e0ecfc..e8e0d375 100644
--- a/src/routes/_store/store.js
+++ b/src/routes/_store/store.js
@@ -42,6 +42,7 @@ const persistedState = {
 
 const nonPersistedState = {
   customEmoji: {},
+  followRequestCounts: {},
   instanceInfos: {},
   instanceLists: {},
   online: !process.browser || navigator.onLine,
diff --git a/tests/serverActions.js b/tests/serverActions.js
index 72e68020..18724c1d 100644
--- a/tests/serverActions.js
+++ b/tests/serverActions.js
@@ -4,7 +4,7 @@ import FileApi from 'file-api'
 import { users } from './users'
 import { postStatus } from '../src/routes/_api/statuses'
 import { deleteStatus } from '../src/routes/_api/delete'
-import { authorizeFollowRequest, getFollowRequests } from '../src/routes/_actions/followRequests'
+import { authorizeFollowRequest, getFollowRequests } from '../src/routes/_api/followRequests'
 import { followAccount, unfollowAccount } from '../src/routes/_api/follow'
 import { updateCredentials } from '../src/routes/_api/updateCredentials'
 import { reblogStatus } from '../src/routes/_api/reblog'
diff --git a/tests/spec/116-follow-requests.js b/tests/spec/116-follow-requests.js
index 09ae6c3d..ee1c377a 100644
--- a/tests/spec/116-follow-requests.js
+++ b/tests/spec/116-follow-requests.js
@@ -13,15 +13,23 @@ fixture`116-follow-requests.js`
 
 const timeout = 30000
 
-test('Can approve and reject follow requests', async t => {
-  await loginAsLockedAccount(t)
+const requestsButton = $('a[href="/requests"]')
+const approveAdminButton = () => getSearchResultByHref(`/accounts/${users.admin.id}`).find('button:nth-child(1)')
+const rejectBazButton = () => getSearchResultByHref(`/accounts/${users.baz.id}`).find('button:nth-child(2)')
+const approveQuuxButton = () => getSearchResultByHref(`/accounts/${users.quux.id}`).find('button:nth-child(1)')
 
+async function resetFollows () {
   // necessary for re-running this test in local testing
   await Promise.all([
     unfollowAs('admin', 'LockedAccount'),
     unfollowAs('baz', 'LockedAccount'),
     unfollowAs('quux', 'LockedAccount')
   ])
+}
+
+test('Can approve and reject follow requests', async t => {
+  await loginAsLockedAccount(t)
+  await resetFollows()
 
   await Promise.all([
     followAs('admin', 'LockedAccount'),
@@ -31,12 +39,10 @@ test('Can approve and reject follow requests', async t => {
 
   await sleep(2000)
 
-  const approveAdminButton = () => getSearchResultByHref(`/accounts/${users.admin.id}`).find('button:nth-child(1)')
-  const rejectBazButton = () => getSearchResultByHref(`/accounts/${users.baz.id}`).find('button:nth-child(2)')
-  const approveQuuxButton = () => getSearchResultByHref(`/accounts/${users.quux.id}`).find('button:nth-child(1)')
-
-  await t.click(communityNavButton)
-    .click($('a[href="/requests"]'))
+  await t
+    .expect(communityNavButton.getAttribute('aria-label')).eql('Community (3 follow requests)')
+    .click(communityNavButton)
+    .click(requestsButton)
     // no guaranteed order on these
     .expect(getNthSearchResult(1).innerText).match(/(@admin|@baz|@quux)/)
     .expect(getNthSearchResult(2).innerText).match(/(@admin|@baz|@quux)/)
@@ -51,7 +57,7 @@ test('Can approve and reject follow requests', async t => {
     .expect(getNthSearchResult(3).exists).notOk()
   await goBack()
   await t
-    .click($('a[href="/requests"]'))
+    .click(requestsButton)
     // reject baz
     .expect(rejectBazButton().getAttribute('aria-label')).eql('Reject')
     .hover(rejectBazButton())
@@ -60,7 +66,7 @@ test('Can approve and reject follow requests', async t => {
     .expect(getNthSearchResult(2).exists).notOk()
   await goBack()
   await t
-    .click($('a[href="/requests"]'))
+    .click(requestsButton)
     // approve quux
     .expect(approveQuuxButton().getAttribute('aria-label')).eql('Approve')
     .hover(approveQuuxButton())
@@ -75,3 +81,43 @@ test('Can approve and reject follow requests', async t => {
     .expect(getNthSearchResult(2).innerText).match(/(@admin|@quux)/)
     .expect(getNthSearchResult(3).exists).notOk()
 })
+
+test('Shows unresolved follow requests', async t => {
+  await resetFollows()
+  await sleep(2000)
+  await Promise.all([
+    followAs('admin', 'LockedAccount'),
+    followAs('baz', 'LockedAccount')
+  ])
+  await sleep(2000)
+  await loginAsLockedAccount(t)
+
+  await t
+    .expect(communityNavButton.getAttribute('aria-label')).eql('Community (2 follow requests)')
+    .click(communityNavButton)
+    .expect(requestsButton.innerText).contains('Follow requests (2)')
+    .click(requestsButton)
+    .expect(getUrl()).contains('/requests')
+    .expect(communityNavButton.getAttribute('aria-label')).eql('Community (2 follow requests)')
+    .click(approveAdminButton())
+    .expect(communityNavButton.getAttribute('aria-label')).eql('Community (1 follow request)')
+    .click(rejectBazButton())
+    .expect(communityNavButton.getAttribute('aria-label')).eql('Community')
+  await goBack()
+  await t
+    .expect(requestsButton.innerText).contains('Follow requests')
+})
+
+test('Shows unresolved follow requests immediately upon opening community page', async t => {
+  await resetFollows()
+  await sleep(2000)
+  await loginAsLockedAccount(t)
+  await sleep(2000)
+  await followAs('admin', 'LockedAccount')
+  await sleep(2000)
+  await t
+    .expect(communityNavButton.getAttribute('aria-label')).eql('Community')
+    .click(communityNavButton)
+    .expect(communityNavButton.getAttribute('aria-label')).eql('Community (current page) (1 follow request)')
+    .expect(requestsButton.innerText).contains('Follow requests (1)')
+})