autoload older notifications when scrolled to the bottom

This commit is contained in:
taehoon 2019-05-03 07:52:22 -04:00
parent b4122c1003
commit 6ae3c1cfcf
3 changed files with 10 additions and 1 deletions

View file

@ -63,6 +63,11 @@ const MobileNav = {
}, },
markNotificationsAsSeen () { markNotificationsAsSeen () {
this.$refs.notifications.markAsSeen() this.$refs.notifications.markAsSeen()
},
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
if (this.$store.state.config.autoLoad && scrollTop + clientHeight >= scrollHeight) {
this.$refs.notifications.fetchOlderNotifications()
}
} }
}, },
watch: { watch: {

View file

@ -28,7 +28,7 @@
<i class="button-icon icon-cancel"/> <i class="button-icon icon-cancel"/>
</a> </a>
</div> </div>
<div v-if="currentUser" class="mobile-notifications"> <div class="mobile-notifications" @scroll="onScroll">
<Notifications ref="notifications" noHeading="true"/> <Notifications ref="notifications" noHeading="true"/>
</div> </div>
</div> </div>

View file

@ -52,6 +52,10 @@ const Notifications = {
this.$store.dispatch('markNotificationsAsSeen') this.$store.dispatch('markNotificationsAsSeen')
}, },
fetchOlderNotifications () { fetchOlderNotifications () {
if (this.loading) {
return
}
const store = this.$store const store = this.$store
const credentials = store.state.users.currentUser.credentials const credentials = store.state.users.currentUser.credentials
store.commit('setNotificationsLoading', { value: true }) store.commit('setNotificationsLoading', { value: true })