Add: button to load all remaining connections

This commit is contained in:
Raphael Beer 2020-03-18 23:49:30 +01:00
parent a873aac44d
commit f339ed2c7f
No known key found for this signature in database
GPG Key ID: C1AC5E018B25EF11
3 changed files with 341 additions and 278 deletions

View File

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

View File

@ -12,14 +12,14 @@
<user-teaser :user="follow" /> <user-teaser :user="follow" />
</client-only> </client-only>
</ds-space> </ds-space>
<ds-space v-if="this.user.followedByCount - this.connections.length" margin="small"> <ds-space v-if="this.counts[this.type] - this.connections.length" margin="small">
<ds-text size="small" color="soft"> <base-button @click="fetchConnections" size="small" color="softer">
{{ {{
$t('profile.network.andMore', { $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> </ds-space>
</template> </template>
<template v-else> <template v-else>
@ -34,8 +34,7 @@
import uniqBy from 'lodash/uniqBy' import uniqBy from 'lodash/uniqBy'
import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar' import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
import UserTeaser from '~/components/UserTeaser/UserTeaser' import UserTeaser from '~/components/UserTeaser/UserTeaser'
import { followedByQuery, followingQuery } from '~/graphql/User'
let expanded = false
export default { export default {
name: 'FollowerList', name: 'FollowerList',
@ -50,6 +49,14 @@ export default {
data() { data() {
return { return {
connections: this.user[this.type], connections: this.user[this.type],
queries: {
followedBy: followedByQuery,
following: followingQuery,
},
counts: {
followedBy: this.user.followedByCount,
following: this.user.followingCount,
},
} }
}, },
computed: { computed: {
@ -62,6 +69,16 @@ export default {
uniq(items, field = 'id') { uniq(items, field = 'id') {
return uniqBy(items, field) 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> </script>

View File

@ -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
}
}
}
`