From f339ed2c7fed2c9c2fc881978909cb05879c49c9 Mon Sep 17 00:00:00 2001
From: Raphael Beer <raphael.beer@protonmail.com>
Date: Wed, 18 Mar 2020 23:49:30 +0100
Subject: [PATCH] Add: button to load all remaining connections

---
 webapp/components/features/FollowList.spec.js | 557 +++++++++---------
 webapp/components/features/FollowList.vue     |  37 +-
 webapp/graphql/User.js                        |  25 +
 3 files changed, 341 insertions(+), 278 deletions(-)

diff --git a/webapp/components/features/FollowList.spec.js b/webapp/components/features/FollowList.spec.js
index a922c63c7..43778cf77 100644
--- a/webapp/components/features/FollowList.spec.js
+++ b/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, {
-          store,
-          propsData: { ...propsData, type: 'following' },
-          mocks,
-          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,
-        })
-        expect(wrapper.findAll('.user-teaser').length).toEqual(user.followedBy.length)
-      })
+      ;['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: type },
+              mocks: {
+                ...mocks,
+                $apollo: {
+                  query: queryMock,
+                },
+              },
+              localVue,
+            })
+          })
+
+          it(`shows the users ${type}`, () => {
+            expect(wrapper.findAll('.user-teaser').length).toEqual(user[type].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,253 +156,255 @@ user = {
   ],
 }
 
-const additionalFollowedBy = [
-  {
-    id: '9f305e7a-ae5a-4e22-8269-8b6899af674f',
-    name: 'Hugh Harris Sr.',
-    slug: 'hugh-harris-sr',
-  },
-  {
-    id: '69dbad2b-5749-4697-9976-221992439086',
-    name: 'Ashley Fisher',
-    slug: 'ashley-fisher',
-  },
-  {
-    id: 'eec8ee9e-ee4e-4b83-b655-a106eb857611',
-    name: 'Devin Reynolds',
-    slug: 'devin-reynolds',
-  },
-  {
-    id: 'f638fad4-73c2-4bc9-ae4e-2e53035397e9',
-    name: 'Sophia Jaskolski',
-    slug: 'sophia-jaskolski',
-  },
-  {
-    id: '61040fdf-da6a-489e-b79c-45f58d33386f',
-    name: 'Rodolfo Lind',
-    slug: 'rodolfo-lind',
-  },
-  {
-    id: 'a09a2341-0575-4235-96c6-2ebc7d77de3f',
-    name: 'Phil Dare',
-    slug: 'phil-dare',
-  },
-  {
-    id: 'c5f7eea9-ee4b-4384-91cd-b6c7d128f122',
-    name: 'Omar Turcotte',
-    slug: 'omar-turcotte',
-  },
-  {
-    id: '036cae06-5c8f-4ffb-923e-73b2baba1a00',
-    name: 'Rosemary Wiegand',
-    slug: 'rosemary-wiegand',
-  },
-  {
-    id: '9011b4fd-feec-4b74-b6d0-e0a41b6658e6',
-    name: 'Lela Kautzer',
-    slug: 'lela-kautzer',
-  },
-  {
-    id: '019a48f6-5785-4c5c-a2ac-7cb80007aa41',
-    name: 'Roosevelt Lindgren III',
-    slug: 'roosevelt-lindgren-iii',
-  },
-  {
-    id: '3a089655-19c8-478f-97c1-345b3dfc95a3',
-    name: 'Lee Erdman',
-    slug: 'lee-erdman',
-  },
-  {
-    id: '8af5df96-8c09-4fe4-a9cd-572840c94529',
-    name: 'Mamie Conn',
-    slug: 'mamie-conn',
-  },
-  {
-    id: 'ca1b7bcb-1254-43ff-90a1-b0e6d49c31bc',
-    name: 'Sergio Casper',
-    slug: 'sergio-casper',
-  },
-  {
-    id: '4c11e030-0419-43a0-8d7a-dc198b57efd7',
-    name: 'Charles Ruecker',
-    slug: 'charles-ruecker',
-  },
-  {
-    id: '25983fa2-a861-46f3-9c71-124286de7367',
-    name: 'Caroline Pollich',
-    slug: 'caroline-pollich',
-  },
-  {
-    id: '687a0fcb-531d-42c1-8854-a47dc59f61e7',
-    name: 'Dr. Darryl Rath',
-    slug: 'dr-darryl-rath',
-  },
-  {
-    id: 'd0ecaa07-0ba1-4deb-ac6f-1dc01cdd6174',
-    name: 'Isaac Purdy MD',
-    slug: 'isaac-purdy-md',
-  },
-  {
-    id: 'c0846aa5-7f3e-44d9-89db-bef675cac431',
-    name: 'Nichole Schamberger',
-    slug: 'nichole-schamberger',
-  },
-  {
-    id: 'u6',
-    name: 'Louie',
-    slug: 'louie',
-  },
-  {
-    id: 'u1',
-    name: 'Peter Lustig',
-    slug: 'peter-lustig',
-  },
-  {
-    id: '6de37964-e79b-4be4-b384-ed571c37a31e',
-    name: 'Mr. Oliver Quitzon',
-    slug: 'mr-oliver-quitzon',
-  },
-  {
-    id: '96446bee-ce95-47d6-acc1-742c70d21518',
-    name: 'Myrtle Williamson',
-    slug: 'myrtle-williamson',
-  },
-  {
-    id: '9e58bc8d-d63a-4b03-92df-fb540ff8b2ce',
-    name: 'Andy Stracke',
-    slug: 'andy-stracke',
-  },
-  {
-    id: 'd808b58b-b097-4614-a2c5-81187e9884ca',
-    name: 'Warren Crist',
-    slug: 'warren-crist',
-  },
-  {
-    id: 'ff800e3a-ceba-44e9-904b-458c20e518ff',
-    name: 'Dolores Wilkinson V',
-    slug: 'dolores-wilkinson-v',
-  },
-]
+additionalConnections = {
+  followedBy: [
+    {
+      id: '9f305e7a-ae5a-4e22-8269-8b6899af674f',
+      name: 'Hugh Harris Sr.',
+      slug: 'hugh-harris-sr',
+    },
+    {
+      id: '69dbad2b-5749-4697-9976-221992439086',
+      name: 'Ashley Fisher',
+      slug: 'ashley-fisher',
+    },
+    {
+      id: 'eec8ee9e-ee4e-4b83-b655-a106eb857611',
+      name: 'Devin Reynolds',
+      slug: 'devin-reynolds',
+    },
+    {
+      id: 'f638fad4-73c2-4bc9-ae4e-2e53035397e9',
+      name: 'Sophia Jaskolski',
+      slug: 'sophia-jaskolski',
+    },
+    {
+      id: '61040fdf-da6a-489e-b79c-45f58d33386f',
+      name: 'Rodolfo Lind',
+      slug: 'rodolfo-lind',
+    },
+    {
+      id: 'a09a2341-0575-4235-96c6-2ebc7d77de3f',
+      name: 'Phil Dare',
+      slug: 'phil-dare',
+    },
+    {
+      id: 'c5f7eea9-ee4b-4384-91cd-b6c7d128f122',
+      name: 'Omar Turcotte',
+      slug: 'omar-turcotte',
+    },
+    {
+      id: '036cae06-5c8f-4ffb-923e-73b2baba1a00',
+      name: 'Rosemary Wiegand',
+      slug: 'rosemary-wiegand',
+    },
+    {
+      id: '9011b4fd-feec-4b74-b6d0-e0a41b6658e6',
+      name: 'Lela Kautzer',
+      slug: 'lela-kautzer',
+    },
+    {
+      id: '019a48f6-5785-4c5c-a2ac-7cb80007aa41',
+      name: 'Roosevelt Lindgren III',
+      slug: 'roosevelt-lindgren-iii',
+    },
+    {
+      id: '3a089655-19c8-478f-97c1-345b3dfc95a3',
+      name: 'Lee Erdman',
+      slug: 'lee-erdman',
+    },
+    {
+      id: '8af5df96-8c09-4fe4-a9cd-572840c94529',
+      name: 'Mamie Conn',
+      slug: 'mamie-conn',
+    },
+    {
+      id: 'ca1b7bcb-1254-43ff-90a1-b0e6d49c31bc',
+      name: 'Sergio Casper',
+      slug: 'sergio-casper',
+    },
+    {
+      id: '4c11e030-0419-43a0-8d7a-dc198b57efd7',
+      name: 'Charles Ruecker',
+      slug: 'charles-ruecker',
+    },
+    {
+      id: '25983fa2-a861-46f3-9c71-124286de7367',
+      name: 'Caroline Pollich',
+      slug: 'caroline-pollich',
+    },
+    {
+      id: '687a0fcb-531d-42c1-8854-a47dc59f61e7',
+      name: 'Dr. Darryl Rath',
+      slug: 'dr-darryl-rath',
+    },
+    {
+      id: 'd0ecaa07-0ba1-4deb-ac6f-1dc01cdd6174',
+      name: 'Isaac Purdy MD',
+      slug: 'isaac-purdy-md',
+    },
+    {
+      id: 'c0846aa5-7f3e-44d9-89db-bef675cac431',
+      name: 'Nichole Schamberger',
+      slug: 'nichole-schamberger',
+    },
+    {
+      id: 'u6',
+      name: 'Louie',
+      slug: 'louie',
+    },
+    {
+      id: 'u1',
+      name: 'Peter Lustig',
+      slug: 'peter-lustig',
+    },
+    {
+      id: '6de37964-e79b-4be4-b384-ed571c37a31e',
+      name: 'Mr. Oliver Quitzon',
+      slug: 'mr-oliver-quitzon',
+    },
+    {
+      id: '96446bee-ce95-47d6-acc1-742c70d21518',
+      name: 'Myrtle Williamson',
+      slug: 'myrtle-williamson',
+    },
+    {
+      id: '9e58bc8d-d63a-4b03-92df-fb540ff8b2ce',
+      name: 'Andy Stracke',
+      slug: 'andy-stracke',
+    },
+    {
+      id: 'd808b58b-b097-4614-a2c5-81187e9884ca',
+      name: 'Warren Crist',
+      slug: 'warren-crist',
+    },
+    {
+      id: 'ff800e3a-ceba-44e9-904b-458c20e518ff',
+      name: 'Dolores Wilkinson V',
+      slug: 'dolores-wilkinson-v',
+    },
+  ],
 
-const additionalFollowing = [
-  {
-    id: '9011b4fd-feec-4b74-b6d0-e0a41b6658e6',
-    name: 'Lela Kautzer',
-    slug: 'lela-kautzer',
-  },
-  {
-    id: '61040fdf-da6a-489e-b79c-45f58d33386f',
-    name: 'Rodolfo Lind',
-    slug: 'rodolfo-lind',
-  },
-  {
-    id: '3a089655-19c8-478f-97c1-345b3dfc95a3',
-    name: 'Lee Erdman',
-    slug: 'lee-erdman',
-  },
-  {
-    id: 'c5f7eea9-ee4b-4384-91cd-b6c7d128f122',
-    name: 'Omar Turcotte',
-    slug: 'omar-turcotte',
-  },
-  {
-    id: 'f638fad4-73c2-4bc9-ae4e-2e53035397e9',
-    name: 'Sophia Jaskolski',
-    slug: 'sophia-jaskolski',
-  },
-  {
-    id: 'u4',
-    name: 'Huey',
-    slug: 'huey',
-  },
-  {
-    id: '6de37964-e79b-4be4-b384-ed571c37a31e',
-    name: 'Mr. Oliver Quitzon',
-    slug: 'mr-oliver-quitzon',
-  },
-  {
-    id: 'd3d43b17-e7bb-4778-a373-798df58a9a5f',
-    name: 'Ms. Rita Thompson',
-    slug: 'ms-rita-thompson',
-  },
-  {
-    id: '036cae06-5c8f-4ffb-923e-73b2baba1a00',
-    name: 'Rosemary Wiegand',
-    slug: 'rosemary-wiegand',
-  },
-  {
-    id: 'eec8ee9e-ee4e-4b83-b655-a106eb857611',
-    name: 'Devin Reynolds',
-    slug: 'devin-reynolds',
-  },
-  {
-    id: '96446bee-ce95-47d6-acc1-742c70d21518',
-    name: 'Myrtle Williamson',
-    slug: 'myrtle-williamson',
-  },
-  {
-    id: '9f305e7a-ae5a-4e22-8269-8b6899af674f',
-    name: 'Hugh Harris Sr.',
-    slug: 'hugh-harris-sr',
-  },
-  {
-    id: 'c0846aa5-7f3e-44d9-89db-bef675cac431',
-    name: 'Nichole Schamberger',
-    slug: 'nichole-schamberger',
-  },
-  {
-    id: '019a48f6-5785-4c5c-a2ac-7cb80007aa41',
-    name: 'Roosevelt Lindgren III',
-    slug: 'roosevelt-lindgren-iii',
-  },
-  {
-    id: 'ff800e3a-ceba-44e9-904b-458c20e518ff',
-    name: 'Dolores Wilkinson V',
-    slug: 'dolores-wilkinson-v',
-  },
-  {
-    id: '9e58bc8d-d63a-4b03-92df-fb540ff8b2ce',
-    name: 'Andy Stracke',
-    slug: 'andy-stracke',
-  },
-  {
-    id: 'd808b58b-b097-4614-a2c5-81187e9884ca',
-    name: 'Warren Crist',
-    slug: 'warren-crist',
-  },
-  {
-    id: '45313bea-9152-4c8d-9c6e-1eca029979f8',
-    name: 'Jeremiah Breitenberg',
-    slug: 'jeremiah-breitenberg',
-  },
-  {
-    id: '8af5df96-8c09-4fe4-a9cd-572840c94529',
-    name: 'Mamie Conn',
-    slug: 'mamie-conn',
-  },
-  {
-    id: '4c11e030-0419-43a0-8d7a-dc198b57efd7',
-    name: 'Charles Ruecker',
-    slug: 'charles-ruecker',
-  },
-  {
-    id: '687a0fcb-531d-42c1-8854-a47dc59f61e7',
-    name: 'Dr. Darryl Rath',
-    slug: 'dr-darryl-rath',
-  },
-  {
-    id: 'ca1b7bcb-1254-43ff-90a1-b0e6d49c31bc',
-    name: 'Sergio Casper',
-    slug: 'sergio-casper',
-  },
-  {
-    id: '25983fa2-a861-46f3-9c71-124286de7367',
-    name: 'Caroline Pollich',
-    slug: 'caroline-pollich',
-  },
-  {
-    id: 'd0ecaa07-0ba1-4deb-ac6f-1dc01cdd6174',
-    name: 'Isaac Purdy MD',
-    slug: 'isaac-purdy-md',
-  },
-]
+  following: [
+    {
+      id: '9011b4fd-feec-4b74-b6d0-e0a41b6658e6',
+      name: 'Lela Kautzer',
+      slug: 'lela-kautzer',
+    },
+    {
+      id: '61040fdf-da6a-489e-b79c-45f58d33386f',
+      name: 'Rodolfo Lind',
+      slug: 'rodolfo-lind',
+    },
+    {
+      id: '3a089655-19c8-478f-97c1-345b3dfc95a3',
+      name: 'Lee Erdman',
+      slug: 'lee-erdman',
+    },
+    {
+      id: 'c5f7eea9-ee4b-4384-91cd-b6c7d128f122',
+      name: 'Omar Turcotte',
+      slug: 'omar-turcotte',
+    },
+    {
+      id: 'f638fad4-73c2-4bc9-ae4e-2e53035397e9',
+      name: 'Sophia Jaskolski',
+      slug: 'sophia-jaskolski',
+    },
+    {
+      id: 'u4',
+      name: 'Huey',
+      slug: 'huey',
+    },
+    {
+      id: '6de37964-e79b-4be4-b384-ed571c37a31e',
+      name: 'Mr. Oliver Quitzon',
+      slug: 'mr-oliver-quitzon',
+    },
+    {
+      id: 'd3d43b17-e7bb-4778-a373-798df58a9a5f',
+      name: 'Ms. Rita Thompson',
+      slug: 'ms-rita-thompson',
+    },
+    {
+      id: '036cae06-5c8f-4ffb-923e-73b2baba1a00',
+      name: 'Rosemary Wiegand',
+      slug: 'rosemary-wiegand',
+    },
+    {
+      id: 'eec8ee9e-ee4e-4b83-b655-a106eb857611',
+      name: 'Devin Reynolds',
+      slug: 'devin-reynolds',
+    },
+    {
+      id: '96446bee-ce95-47d6-acc1-742c70d21518',
+      name: 'Myrtle Williamson',
+      slug: 'myrtle-williamson',
+    },
+    {
+      id: '9f305e7a-ae5a-4e22-8269-8b6899af674f',
+      name: 'Hugh Harris Sr.',
+      slug: 'hugh-harris-sr',
+    },
+    {
+      id: 'c0846aa5-7f3e-44d9-89db-bef675cac431',
+      name: 'Nichole Schamberger',
+      slug: 'nichole-schamberger',
+    },
+    {
+      id: '019a48f6-5785-4c5c-a2ac-7cb80007aa41',
+      name: 'Roosevelt Lindgren III',
+      slug: 'roosevelt-lindgren-iii',
+    },
+    {
+      id: 'ff800e3a-ceba-44e9-904b-458c20e518ff',
+      name: 'Dolores Wilkinson V',
+      slug: 'dolores-wilkinson-v',
+    },
+    {
+      id: '9e58bc8d-d63a-4b03-92df-fb540ff8b2ce',
+      name: 'Andy Stracke',
+      slug: 'andy-stracke',
+    },
+    {
+      id: 'd808b58b-b097-4614-a2c5-81187e9884ca',
+      name: 'Warren Crist',
+      slug: 'warren-crist',
+    },
+    {
+      id: '45313bea-9152-4c8d-9c6e-1eca029979f8',
+      name: 'Jeremiah Breitenberg',
+      slug: 'jeremiah-breitenberg',
+    },
+    {
+      id: '8af5df96-8c09-4fe4-a9cd-572840c94529',
+      name: 'Mamie Conn',
+      slug: 'mamie-conn',
+    },
+    {
+      id: '4c11e030-0419-43a0-8d7a-dc198b57efd7',
+      name: 'Charles Ruecker',
+      slug: 'charles-ruecker',
+    },
+    {
+      id: '687a0fcb-531d-42c1-8854-a47dc59f61e7',
+      name: 'Dr. Darryl Rath',
+      slug: 'dr-darryl-rath',
+    },
+    {
+      id: 'ca1b7bcb-1254-43ff-90a1-b0e6d49c31bc',
+      name: 'Sergio Casper',
+      slug: 'sergio-casper',
+    },
+    {
+      id: '25983fa2-a861-46f3-9c71-124286de7367',
+      name: 'Caroline Pollich',
+      slug: 'caroline-pollich',
+    },
+    {
+      id: 'd0ecaa07-0ba1-4deb-ac6f-1dc01cdd6174',
+      name: 'Isaac Purdy MD',
+      slug: 'isaac-purdy-md',
+    },
+  ],
+}
diff --git a/webapp/components/features/FollowList.vue b/webapp/components/features/FollowList.vue
index e06b7108a..0c21c6058 100644
--- a/webapp/components/features/FollowList.vue
+++ b/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">
-        {{
-          $t('profile.network.andMore', {
-            number: this.user.followedByCount - this.connections.length,
-          })
-        }}
-        </ds-text>
+      <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.counts[this.type] - this.connections.length,
+            })
+          }}
+        </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>
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index aeb6ae729..e1f119f5c 100644
--- a/webapp/graphql/User.js
+++ b/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
+      }
+    }
+  }
+`
+