Added support for qvitter api fetching of notifications

src/components/notification/notification.vue

@@ -11,7 +11,7 @@
       <span class="notification-details">
         <div class="name-and-action">
           <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-          <span v-if="notification.type === 'favorite'">
+          <span v-if="notification.type === 'like'">
             <i class="fa icon-star lit"></i>
             <small>{{$t('notifications.favorited_you')}}</small>
           </span>

src/components/notifications/notifications.js

@@ -1,16 +1,18 @@
 import Notification from '../notification/notification.vue'
+import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 
 import { sortBy, take, filter } from 'lodash'
 
 const Notifications = {
-  data () {
+  created () {
-    return {
+    const store = this.$store
-      visibleNotificationCount: 20
+    const credentials = store.state.users.currentUser.credentials
-    }
+
+    notificationsFetcher.startFetching({ store, credentials })
   },
   computed: {
     notifications () {
-      return this.$store.state.statuses.notifications
+      return this.$store.state.statuses.notifications.data
     },
     unseenNotifications () {
       return filter(this.notifications, ({seen}) => !seen)
@@ -19,7 +21,7 @@ const Notifications = {
       // 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
     },
     unseenCount () {
       return this.unseenNotifications.length
@@ -40,6 +42,15 @@ const Notifications = {
   methods: {
     markAsSeen () {
       this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
+    },
+    fetchOlderNotifications () {
+      const store = this.$store
+      const credentials = store.state.users.currentUser.credentials
+      notificationsFetcher.fetchAndUpdate({
+        store,
+        credentials,
+        older: true
+      })
     }
   }
 }

src/components/notifications/notifications.vue

@@ -11,6 +11,12 @@
           <notification :notification="notification"></notification>
         </div>
       </div>
+      <div class="panel-footer">
+        <a href="#" v-on:click.prevent='fetchOlderNotifications()' v-if="!notifications.loading">
+          <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
+        </a>
+        <div class="new-status-notification text-center panel-footer" v-else>...</div>
+      </div>
     </div>
   </div>
 </template>

src/main.js

@@ -53,7 +53,8 @@ const persistedStateOptions = {
     'config.streaming',
     'config.muteWords',
     'config.customTheme',
-    'users.lastLoginName'
+    'users.lastLoginName',
+    'statuses.notifications.maxSavedId'
   ]
 }
 

src/modules/statuses.js

@@ -1,4 +1,5 @@
 import { includes, remove, slice, sortBy, toInteger, each, find, flatten, maxBy, minBy, merge, last, isArray } from 'lodash'
+import { set } from 'vue'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
 
@@ -22,7 +23,12 @@ export const defaultState = {
   allStatuses: [],
   allStatusesObject: {},
   maxId: 0,
-  notifications: [],
+  notifications: {
+    maxId: 0,
+    maxSavedId: 0,
+    minId: Number.POSITIVE_INFINITY,
+    data: []
+  },
   favorites: new Set(),
   error: false,
   timelines: {
@@ -135,10 +141,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
     status = result.item
 
     if (result.new) {
-      if (statusType(status) === 'retweet' && status.retweeted_status.user.id === user.id) {
-        addNotification({ type: 'repeat', status: status, action: status })
-      }
-
       // We are mentioned in a post
       if (statusType(status) === 'status' && find(status.attentions, { id: user.id })) {
         const mentions = state.timelines.mentions
@@ -150,10 +152,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 
           sortTimeline(mentions)
         }
-        // Don't add notification for self-mention
-        if (status.user.id !== user.id) {
-          addNotification({ type: 'mention', status, action: status })
-        }
       }
     }
 
@@ -176,32 +174,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
     return status
   }
 
-  const addNotification = ({type, status, action}) => {
-    // Only add a new notification if we don't have one for the same action
-    if (!find(state.notifications, (oldNotification) => oldNotification.action.id === action.id)) {
-      state.notifications.push({ type, status, action, seen: false })
-
-      if ('Notification' in window && window.Notification.permission === 'granted') {
-        const title = action.user.name
-        const result = {}
-        result.icon = action.user.profile_image_url
-        result.body = action.text // there's a problem that it doesn't put a space before links tho
-
-        // Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
-        if (action.attachments && action.attachments.length > 0 && !action.nsfw &&
-            action.attachments[0].mimetype.startsWith('image/')) {
-          result.image = action.attachments[0].url
-        }
-
-        let notification = new window.Notification(title, result)
-
-        // Chrome is known for not closing notifications automatically
-        // according to MDN, anyway.
-        setTimeout(notification.close.bind(notification), 5000)
-      }
-    }
-  }
-
   const favoriteStatus = (favorite) => {
     const status = find(allStatuses, { id: toInteger(favorite.in_reply_to_status_id) })
     if (status) {
@@ -211,11 +183,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
       if (favorite.user.id === user.id) {
         status.favorited = true
       }
-
-      // Add a notification if the user's status is favorited
-      if (status.user.id === user.id) {
-        addNotification({type: 'favorite', status, action: favorite})
-      }
     }
     return status
   }
@@ -253,13 +220,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
         favoriteStatus(favorite)
       }
     },
-    'follow': (status) => {
-      let re = new RegExp(`started following ${user.name} \\(${user.statusnet_profile_url}\\)`)
-      let repleroma = new RegExp(`started following ${user.screen_name}$`)
-      if (status.text.match(re) || status.text.match(repleroma)) {
-        addNotification({ type: 'follow', status: status, action: status })
-      }
-    },
     'deletion': (deletion) => {
       const uri = deletion.uri
 
@@ -269,7 +229,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
         return
       }
 
-      remove(state.notifications, ({action: {id}}) => id === status.id)
+      remove(state.notifications.data, ({action: {id}}) => id === status.id)
 
       remove(allStatuses, { uri })
       if (timeline) {
@@ -298,8 +258,54 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   }
 }
 
+const addNewNotifications = (state, { notifications, older }) => {
+  const allStatuses = state.allStatuses
+  each(notifications, (notification) => {
+    const action = notification.notice
+    // Only add a new notification if we don't have one for the same action
+    if (!find(state.notifications.data, (oldNotification) => oldNotification.action.id === action.id)) {
+      state.notifications.maxId = Math.max(notification.id, state.notifications.maxId)
+      state.notifications.minId = Math.min(notification.id, state.notifications.minId)
+
+      console.log(notification)
+      const fresh = !older && !notification.is_seen && notification.id >= state.notifications.maxSavedId
+      const status = notification.ntype === 'like'
+            ? find(allStatuses, { id: action.in_reply_to_status_id })
+            : action
+      state.notifications.data.push({
+        type: notification.ntype,
+        status,
+        action,
+        // Always assume older notifications as seen
+        seen: !fresh
+      })
+
+      if ('Notification' in window && window.Notification.permission === 'granted') {
+        const title = action.user.name
+        const result = {}
+        result.icon = action.user.profile_image_url
+        result.body = action.text // there's a problem that it doesn't put a space before links tho
+
+        // Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
+        if (action.attachments && action.attachments.length > 0 && !action.nsfw &&
+            action.attachments[0].mimetype.startsWith('image/')) {
+          result.image = action.attachments[0].url
+        }
+
+        if (fresh) {
+          let notification = new window.Notification(title, result)
+          // Chrome is known for not closing notifications automatically
+          // according to MDN, anyway.
+          setTimeout(notification.close.bind(notification), 5000)
+        }
+      }
+    }
+  })
+}
+
 export const mutations = {
   addNewStatuses,
+  addNewNotifications,
   showNewStatuses (state, { timeline }) {
     const oldTimeline = (state.timelines[timeline])
 
@@ -334,6 +340,9 @@ export const mutations = {
   setError (state, { value }) {
     state.error = value
   },
+  setNotificationsError (state, { value }) {
+    state.notificationsError = value
+  },
   setProfileView (state, { v }) {
     // load followers / friends only when needed
     state.timelines['user'].viewing = v
@@ -345,6 +354,7 @@ export const mutations = {
     state.timelines['user'].followers = followers
   },
   markNotificationsAsSeen (state, notifications) {
+    set(state.notifications, 'maxSavedId', state.notifications.maxId)
     each(notifications, (notification) => {
       notification.seen = true
     })
@@ -360,9 +370,15 @@ const statuses = {
     addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false }) {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser })
     },
+    addNewNotifications ({ rootState, commit }, { notifications, older }) {
+      commit('addNewNotifications', { notifications, older })
+    },
     setError ({ rootState, commit }, { value }) {
       commit('setError', { value })
     },
+    setNotificationsError ({ rootState, commit }, { value }) {
+      commit('setNotificationsError', { value })
+    },
     addFriends ({ rootState, commit }, { friends }) {
       commit('addFriends', { friends })
     },

src/services/api/api.service.js

@@ -27,6 +27,7 @@ const BANNER_UPDATE_URL = '/api/account/update_profile_banner.json'
 const PROFILE_UPDATE_URL = '/api/account/update_profile.json'
 const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
 const QVITTER_USER_TIMELINE_URL = '/api/qvitter/statuses/user_timeline.json'
+const QVITTER_USER_NOTIFICATIONS_URL = '/api/qvitter/statuses/notifications.json'
 const BLOCKING_URL = '/api/blocks/create.json'
 const UNBLOCKING_URL = '/api/blocks/destroy.json'
 const USER_URL = '/api/users/show.json'
@@ -301,6 +302,7 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
     public: PUBLIC_TIMELINE_URL,
     friends: FRIENDS_TIMELINE_URL,
     mentions: MENTIONS_URL,
+    notifications: QVITTER_USER_NOTIFICATIONS_URL,
     'publicAndExternal': PUBLIC_AND_EXTERNAL_TIMELINE_URL,
     user: QVITTER_USER_TIMELINE_URL,
     tag: TAG_TIMELINE_URL

test/unit/specs/modules/statuses.spec.js

@@ -296,10 +296,10 @@ describe('The Statuses module', () => {
 
       mutations.addNewStatuses(state, { statuses: [retweet], user })
 
-      expect(state.notifications.length).to.eql(1)
+      expect(state.notifications.data.length).to.eql(1)
-      expect(state.notifications[0].status).to.eql(retweet)
+      expect(state.notifications.data[0].status).to.eql(retweet)
-      expect(state.notifications[0].action).to.eql(retweet)
+      expect(state.notifications.data[0].action).to.eql(retweet)
-      expect(state.notifications[0].type).to.eql('repeat')
+      expect(state.notifications.data[0].type).to.eql('repeat')
     })
 
     it('adds a notification when you are mentioned', () => {
@@ -311,13 +311,13 @@ describe('The Statuses module', () => {
 
       mutations.addNewStatuses(state, { statuses: [status], user })
 
-      expect(state.notifications.length).to.eql(0)
+      expect(state.notifications.data.length).to.eql(0)
 
       mutations.addNewStatuses(state, { statuses: [mentionedStatus], user })
-      expect(state.notifications.length).to.eql(1)
+      expect(state.notifications.data.length).to.eql(1)
-      expect(state.notifications[0].status).to.eql(mentionedStatus)
+      expect(state.notifications.data[0].status).to.eql(mentionedStatus)
-      expect(state.notifications[0].action).to.eql(mentionedStatus)
+      expect(state.notifications.data[0].action).to.eql(mentionedStatus)
-      expect(state.notifications[0].type).to.eql('mention')
+      expect(state.notifications.data[0].type).to.eql('mention')
     })
 
     it('removes a notification when the notice gets removed', () => {
@@ -336,18 +336,18 @@ describe('The Statuses module', () => {
 
       mutations.addNewStatuses(state, { statuses: [status, otherStatus], user })
 
-      expect(state.notifications.length).to.eql(1)
+      expect(state.notifications.data.length).to.eql(1)
 
       mutations.addNewStatuses(state, { statuses: [mentionedStatus], user })
       expect(state.allStatuses.length).to.eql(3)
-      expect(state.notifications.length).to.eql(2)
+      expect(state.notifications.data.length).to.eql(2)
-      expect(state.notifications[1].status).to.eql(mentionedStatus)
+      expect(state.notifications.data[1].status).to.eql(mentionedStatus)
-      expect(state.notifications[1].action).to.eql(mentionedStatus)
+      expect(state.notifications.data[1].action).to.eql(mentionedStatus)
-      expect(state.notifications[1].type).to.eql('mention')
+      expect(state.notifications.data[1].type).to.eql('mention')
 
       mutations.addNewStatuses(state, { statuses: [deletion], user })
       expect(state.allStatuses.length).to.eql(2)
-      expect(state.notifications.length).to.eql(1)
+      expect(state.notifications.data.length).to.eql(1)
     })
 
     it('adds the message to mentions when you are mentioned', () => {
@@ -384,7 +384,7 @@ describe('The Statuses module', () => {
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public', user })
       mutations.addNewStatuses(state, { statuses: [favorite], showImmediately: true, timeline: 'public', user })
 
-      expect(state.notifications).to.have.length(1)
+      expect(state.notifications.data).to.have.length(1)
     })
 
     it('adds a notification when the user is followed', () => {
@@ -402,7 +402,7 @@ describe('The Statuses module', () => {
 
       mutations.addNewStatuses(state, { statuses: [follow], showImmediately: true, timeline: 'public', user })
 
-      expect(state.notifications).to.have.length(1)
+      expect(state.notifications.data).to.have.length(1)
     })
 
     it('does not add a notification when an other user is followed', () => {
@@ -420,7 +420,7 @@ describe('The Statuses module', () => {
 
       mutations.addNewStatuses(state, { statuses: [follow], showImmediately: true, timeline: 'public', user })
 
-      expect(state.notifications).to.have.length(0)
+      expect(state.notifications.data).to.have.length(0)
     })
   })
 })