diff --git a/src/components/follow_list/follow_list.js b/src/components/follow_list/follow_list.js new file mode 100644 index 00000000..6d00eb94 --- /dev/null +++ b/src/components/follow_list/follow_list.js @@ -0,0 +1,62 @@ +import UserCard from '../user_card/user_card.vue' + +const FollowList = { + data () { + return { + loading: false, + bottomedOut: false, + error: false + } + }, + props: ['userId', 'showFollowers'], + created () { + window.addEventListener('scroll', this.scrollLoad) + if (this.entries.length === 0) { + this.fetchEntries() + } + }, + destroyed () { + window.removeEventListener('scroll', this.scrollLoad) + this.$store.dispatch('clearFriendsAndFollowers', this.userId) + }, + computed: { + user () { + return this.$store.getters.userById(this.userId) + }, + entries () { + return this.showFollowers ? this.user.followers : this.user.friends + } + }, + methods: { + fetchEntries () { + if (!this.loading) { + const command = this.showFollowers ? 'addFollowers' : 'addFriends' + this.loading = true + this.$store.dispatch(command, this.userId).then(entries => { + this.error = false + this.loading = false + this.bottomedOut = entries.length === 0 + }).catch(() => { + this.error = true + this.loading = false + }) + } + }, + scrollLoad (e) { + const bodyBRect = document.body.getBoundingClientRect() + const height = Math.max(bodyBRect.height, -(bodyBRect.y)) + if (this.loading === false && + this.bottomedOut === false && + this.$el.offsetHeight > 0 && + (window.innerHeight + window.pageYOffset) >= (height - 750) + ) { + this.fetchEntries() + } + } + }, + components: { + UserCard + } +} + +export default FollowList diff --git a/src/components/follow_list/follow_list.vue b/src/components/follow_list/follow_list.vue new file mode 100644 index 00000000..24ab97d8 --- /dev/null +++ b/src/components/follow_list/follow_list.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 57a44dfb..35b27319 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -1,7 +1,7 @@