refs #146 Add lazy loading to notifications

src/renderer/components/TimelineSpace/Notifications.vue

@@ -3,6 +3,8 @@
     <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
       <notification :message="message"></notification>
     </div>
+    <div class="loading-card" v-loading="lazyLoading">
+    </div>
   </div>
 </template>
 
@@ -15,11 +17,13 @@ export default {
   components: { Notification },
   computed: {
     ...mapState({
-      notifications: state => state.TimelineSpace.notifications
+      notifications: state => state.TimelineSpace.notifications,
+      lazyLoading: state => state.TimelineSpace.Notifications.lazyLoading
     })
   },
   mounted () {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
+    window.addEventListener('scroll', this.onScroll)
   },
   beforeUpdate () {
     if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications) {
@@ -28,6 +32,25 @@ export default {
   },
   destroyed () {
     this.$store.commit('TimelineSpace/archiveNotifications')
+    window.removeEventListener('scroll', this.onScroll)
+  },
+  methods: {
+    onScroll (event) {
+      if (((document.documentElement.clientHeight + event.target.defaultView.scrollY) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) {
+        this.$store.dispatch('TimelineSpace/Notifications/lazyFetchNotifications', this.notifications[this.notifications.length - 1])
+      }
+    }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.loading-card {
+  background-color: #ffffff;
+  height: 60px;
+}
+
+.loading-card:empty {
+  height: 0;
+}
+</style>

src/renderer/store/TimelineSpace.js

@@ -1,6 +1,7 @@
 import { ipcRenderer } from 'electron'
 import Mastodon from 'mastodon-api'
 import SideMenu from './TimelineSpace/SideMenu'
+import Notifications from './TimelineSpace/Notifications'
 import Favourites from './TimelineSpace/Favourites'
 import Local from './TimelineSpace/Local'
 import Public from './TimelineSpace/Public'
@@ -13,6 +14,7 @@ const TimelineSpace = {
   namespaced: true,
   modules: {
     SideMenu,
+    Notifications,
     Favourites,
     Local,
     Public,
@@ -39,8 +41,8 @@ const TimelineSpace = {
     appendHomeTimeline (state, update) {
       state.homeTimeline = [update].concat(state.homeTimeline)
     },
-    appendNotifications (state, notifications) {
-      state.notifications = [notifications].concat(state.notifications)
+    appendNotifications (state, notification) {
+      state.notifications = [notification].concat(state.notifications)
     },
     updateHomeTimeline (state, messages) {
       state.homeTimeline = messages
@@ -48,6 +50,9 @@ const TimelineSpace = {
     updateNotifications (state, notifications) {
       state.notifications = notifications
     },
+    insertNotifications (state, notifications) {
+      state.notifications = state.notifications.concat(notifications)
+    },
     updateToot (state, message) {
       // Replace target message in homeTimeline and notifications
       state.homeTimeline = state.homeTimeline.map((toot) => {

src/renderer/store/TimelineSpace/Notifications.js

@@ -0,0 +1,35 @@
+import Mastodon from 'mastodon-api'
+
+const Notifications = {
+  namespaced: true,
+  state: {
+    lazyLoading: false
+  },
+  mutations: {
+    changeLazyLoading (state, value) {
+      state.lazyLoading = value
+    }
+  },
+  actions: {
+    lazyFetchNotifications ({ state, commit, rootState }, last) {
+      return new Promise((resolve, reject) => {
+        if (state.lazyLoading) {
+          return resolve()
+        }
+        commit('changeLazyLoading', true)
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          })
+        client.get('/notifications', { max_id: last.id, limit: 30 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('TimelineSpace/insertNotifications', data, { root: true })
+          commit('changeLazyLoading', false)
+        })
+      })
+    }
+  }
+}
+
+export default Notifications