From 6ae3c1cfcf896839f799888e53fc751db952b0f1 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 3 May 2019 07:52:22 -0400
Subject: [PATCH] autoload older notifications when scrolled to the bottom

---
 src/components/mobile_nav/mobile_nav.js       | 5 +++++
 src/components/mobile_nav/mobile_nav.vue      | 2 +-
 src/components/notifications/notifications.js | 4 ++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index bc63d2ba..9b341a3b 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -63,6 +63,11 @@ const MobileNav = {
     },
     markNotificationsAsSeen () {
       this.$refs.notifications.markAsSeen()
+    },
+    onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
+      if (this.$store.state.config.autoLoad && scrollTop + clientHeight >= scrollHeight) {
+        this.$refs.notifications.fetchOlderNotifications()
+      }
     }
   },
   watch: {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 30b1715f..90707ce7 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -28,7 +28,7 @@
           <i class="button-icon icon-cancel"/>
         </a>
       </div>
-      <div v-if="currentUser" class="mobile-notifications">
+      <div class="mobile-notifications" @scroll="onScroll">
         <Notifications ref="notifications" noHeading="true"/>
       </div>
     </div>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index e341212e..5b13b98e 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -52,6 +52,10 @@ const Notifications = {
       this.$store.dispatch('markNotificationsAsSeen')
     },
     fetchOlderNotifications () {
+      if (this.loading) {
+        return
+      }
+
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
       store.commit('setNotificationsLoading', { value: true })