1 files changed, 32 insertions, 9 deletions
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index f8314bfc..4b7a591d 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,25 +1,39 @@
 import Notification from '../notification/notification.vue'
+import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 
-import { sortBy, take, filter } from 'lodash'
+import { sortBy, filter } from 'lodash'
 
 const Notifications = {
-  data () {
-    return {
-      visibleNotificationCount: 20
-    }
+  props: [ 'activatePanel' ],
+  created () {
+    const store = this.$store
+    const credentials = store.state.users.currentUser.credentials
+
+    notificationsFetcher.startFetching({ store, credentials })
   },
   computed: {
+    visibleTypes () {
+      return [
+        this.$store.state.config.notificationVisibility.likes && 'like',
+        this.$store.state.config.notificationVisibility.mentions && 'mention',
+        this.$store.state.config.notificationVisibility.repeats && 'repeat',
+        this.$store.state.config.notificationVisibility.follows && 'follow'
+      ].filter(_ => _)
+    },
     notifications () {
-      return this.$store.state.statuses.notifications
+      return this.$store.state.statuses.notifications.data
+    },
+    error () {
+      return this.$store.state.statuses.notifications.error
     },
     unseenNotifications () {
-      return filter(this.notifications, ({seen}) => !seen)
+      return filter(this.visibleNotifications, ({seen}) => !seen)
     },
     visibleNotifications () {
       // Don't know why, but sortBy([seen, -action.id]) doesn't work.
       let sortedNotifications = sortBy(this.notifications, ({action}) => -action.id)
       sortedNotifications = sortBy(sortedNotifications, 'seen')
-      return take(sortedNotifications, this.visibleNotificationCount)
+      return sortedNotifications.filter((notification) => this.visibleTypes.includes(notification.type))
     },
     unseenCount () {
       return this.unseenNotifications.length
@@ -39,7 +53,16 @@ const Notifications = {
   },
   methods: {
     markAsSeen () {
-      this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
+      this.$store.dispatch('markNotificationsAsSeen', this.visibleNotifications)
+    },
+    fetchOlderNotifications () {
+      const store = this.$store
+      const credentials = store.state.users.currentUser.credentials
+      notificationsFetcher.fetchAndUpdate({
+        store,
+        credentials,
+        older: true
+      })
     }
   }
 }