Add: button to load all remaining connections

webapp/components/features/FollowList.spec.js

@@ -8,7 +8,7 @@ config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['ds-space'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 
-let user
+let user, additionalConnections
 
 describe('FollowList.vue', () => {
   let store, mocks, getters, propsData
@@ -34,24 +34,43 @@ describe('FollowList.vue', () => {
     })
 
     describe('given a user with connections', () => {
-      it('shows the users following', () => {
-        const wrapper = mount(FollowList, {
+      ;['following', 'followedBy'].forEach(type =>
+        describe(`and type=${type}`, () => {
+          let wrapper
+          let queryMock
+
+          beforeAll(() => {
+            queryMock = jest.fn().mockResolvedValue({
+              data: { User: [{ [type]: additionalConnections[type] }] },
+            })
+
+            wrapper = mount(FollowList, {
               store,
-          propsData: { ...propsData, type: 'following' },
-          mocks,
+              propsData: { ...propsData, type: type },
+              mocks: {
+                ...mocks,
+                $apollo: {
+                  query: queryMock,
+                },
+              },
               localVue,
             })
-        expect(wrapper.findAll('.user-teaser').length).toEqual(user.following.length)
           })
-      it('shows the users being followed', () => {
-        const wrapper = mount(FollowList, {
-          store,
-          propsData: { ...propsData, type: 'followedBy' },
-          mocks,
-          localVue,
+
+          it(`shows the users ${type}`, () => {
+            expect(wrapper.findAll('.user-teaser').length).toEqual(user[type].length)
           })
-        expect(wrapper.findAll('.user-teaser').length).toEqual(user.followedBy.length)
+          it(`has a button to load all remaining users ${type}`, async () => {
+            wrapper.find('button').trigger('click')
+            await wrapper.vm.$nextTick()
+            expect(queryMock).toHaveBeenCalledWith({
+              query: wrapper.vm.queries[type],
+              variables: { id: user.id },
             })
+            expect(wrapper.vm.connections.length).toBe(user[`${type}Count`])
+          })
+        }),
+      )
     })
   })
 })
@@ -137,7 +156,8 @@ user = {
   ],
 }
 
-const additionalFollowedBy = [
+additionalConnections = {
+  followedBy: [
     {
       id: '9f305e7a-ae5a-4e22-8269-8b6899af674f',
       name: 'Hugh Harris Sr.',
@@ -263,9 +283,9 @@ const additionalFollowedBy = [
       name: 'Dolores Wilkinson V',
       slug: 'dolores-wilkinson-v',
     },
-]
+  ],
 
-const additionalFollowing = [
+  following: [
     {
       id: '9011b4fd-feec-4b74-b6d0-e0a41b6658e6',
       name: 'Lela Kautzer',
@@ -386,4 +406,5 @@ const additionalFollowing = [
       name: 'Isaac Purdy MD',
       slug: 'isaac-purdy-md',
     },
-]
+  ],
+}

webapp/components/features/FollowList.vue

@@ -12,14 +12,14 @@
           <user-teaser :user="follow" />
         </client-only>
       </ds-space>
-      <ds-space v-if="this.user.followedByCount - this.connections.length" margin="small">
-        <ds-text size="small" color="soft">
+      <ds-space v-if="this.counts[this.type] - this.connections.length" margin="small">
+        <base-button @click="fetchConnections" size="small" color="softer">
           {{
             $t('profile.network.andMore', {
-            number: this.user.followedByCount - this.connections.length,
+              number: this.counts[this.type] - this.connections.length,
             })
           }}
-        </ds-text>
+        </base-button>
       </ds-space>
     </template>
     <template v-else>
@@ -34,8 +34,7 @@
 import uniqBy from 'lodash/uniqBy'
 import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
-
-let expanded = false
+import { followedByQuery, followingQuery } from '~/graphql/User'
 
 export default {
   name: 'FollowerList',
@@ -50,6 +49,14 @@ export default {
   data() {
     return {
       connections: this.user[this.type],
+      queries: {
+        followedBy: followedByQuery,
+        following: followingQuery,
+      },
+      counts: {
+        followedBy: this.user.followedByCount,
+        following: this.user.followingCount,
+      },
     }
   },
   computed: {
@@ -62,6 +69,16 @@ export default {
     uniq(items, field = 'id') {
       return uniqBy(items, field)
     },
+    async fetchConnections() {
+      const query = this.queries[this.type]
+      const { data } = await this.$apollo.query({
+        query: this.queries[this.type],
+        variables: { id: this.user.id },
+        // neither result nor update are being called when defined here (?)
+      })
+      const connections = data.User[0][this.type]
+      this.connections = this.connections.concat(connections)
+    },
   },
 }
 </script>

webapp/graphql/User.js

@@ -283,3 +283,28 @@ export const currentUserQuery = gql`
     }
   }
 `
+
+export const followedByQuery = gql`
+  query($id: ID!) {
+    User(id: $id) {
+      followedBy(offset: 7) {
+        id
+        slug
+        name
+      }
+    }
+  }
+`
+
+export const followingQuery = gql`
+  query($id: ID!) {
+    User(id: $id) {
+      following(offset: 7) {
+        id
+        slug
+        name
+      }
+    }
+  }
+`
+