Merge branch 'notifications-thru-sw' into 'develop'

Notifications improvements.

See merge request pleroma/pleroma-fe!1873

7 files changed, 193 insertions, 167 deletions

diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index 3df3647f..ef28f6e0 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -105,7 +105,6 @@ const adminSettingsStorage = {
         }
         set(config, path, convert(c.value))
       })
-      console.log(config[':pleroma'])
       commit('updateAdminSettings', { config, modifiedPaths })
       commit('resetAdminDraft')
     },
@@ -123,7 +122,6 @@ const adminSettingsStorage = {
 
       const descriptions = {}
       backendDescriptions.forEach(d => convert(d, '', descriptions))
-      console.log(descriptions[':pleroma']['Pleroma.Captcha'])
       commit('updateAdminDescriptions', { descriptions })
     },
 
diff --git a/src/modules/config.js b/src/modules/config.js
index 49e9b2df..abb57272 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -66,7 +66,20 @@ export const defaultState = {
     chatMention: true,
     polls: true
   },
+  notificationNative: {
+    follows: true,
+    mentions: true,
+    likes: false,
+    repeats: false,
+    moves: false,
+    emojiReactions: false,
+    followRequest: true,
+    reports: true,
+    chatMention: true,
+    polls: true
+  },
   webPushNotifications: false,
+  webPushAlwaysShowNotifications: false,
   muteWords: [],
   highlight: {},
   interfaceLanguage: browserLocale,
@@ -124,7 +137,10 @@ export const defaultState = {
   showAnnouncementsInExtraNotifications: undefined, // instance default
   showFollowRequestsInExtraNotifications: undefined, // instance default
   maxDepthInThread: undefined, // instance default
-  autocompleteSelect: undefined // instance default
+  autocompleteSelect: undefined, // instance default
+  closingDrawerMarksAsSeen: undefined, // instance default
+  unseenAtTop: undefined, // instance default
+  ignoreInactionableSeen: undefined // instance default
 }
 
 // caching the instance default properties
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 034348ff..3022a41a 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -110,6 +110,9 @@ const defaultState = {
   showFollowRequestsInExtraNotifications: true,
   maxDepthInThread: 6,
   autocompleteSelect: false,
+  closingDrawerMarksAsSeen: true,
+  unseenAtTop: false,
+  ignoreInactionableSeen: false,
 
   // Nasty stuff
   customEmoji: [],
diff --git a/src/modules/notifications.js b/src/modules/notifications.js
new file mode 100644
index 00000000..c1f5a63e
--- /dev/null
+++ b/src/modules/notifications.js
@@ -0,0 +1,169 @@
+import apiService from '../services/api/api.service.js'
+
+import {
+  isStatusNotification,
+  isValidNotification,
+  maybeShowNotification
+} from '../services/notification_utils/notification_utils.js'
+
+import {
+  closeDesktopNotification,
+  closeAllDesktopNotifications
+} from '../services/desktop_notification_utils/desktop_notification_utils.js'
+
+const emptyNotifications = () => ({
+  desktopNotificationSilence: true,
+  maxId: 0,
+  minId: Number.POSITIVE_INFINITY,
+  data: [],
+  idStore: {},
+  loading: false
+})
+
+export const defaultState = () => ({
+  ...emptyNotifications()
+})
+
+export const notifications = {
+  state: defaultState(),
+  mutations: {
+    addNewNotifications (state, { notifications }) {
+      notifications.forEach(notification => {
+        state.data.push(notification)
+        state.idStore[notification.id] = notification
+      })
+    },
+    clearNotifications (state) {
+      state = emptyNotifications()
+    },
+    updateNotificationsMinMaxId (state, id) {
+      state.maxId = id > state.maxId ? id : state.maxId
+      state.minId = id < state.minId ? id : state.minId
+    },
+    setNotificationsLoading (state, { value }) {
+      state.loading = value
+    },
+    setNotificationsSilence (state, { value }) {
+      state.desktopNotificationSilence = value
+    },
+    markNotificationsAsSeen (state) {
+      state.data.forEach((notification) => {
+        notification.seen = true
+      })
+    },
+    markSingleNotificationAsSeen (state, { id }) {
+      const notification = state.idStore[id]
+      if (notification) notification.seen = true
+    },
+    dismissNotification (state, { id }) {
+      state.data = state.data.filter(n => n.id !== id)
+      delete state.idStore[id]
+    },
+    updateNotification (state, { id, updater }) {
+      const notification = state.idStore[id]
+      notification && updater(notification)
+    }
+  },
+  actions: {
+    addNewNotifications (store, { notifications, older }) {
+      const { commit, dispatch, state, rootState } = store
+      const validNotifications = notifications.filter((notification) => {
+        // If invalid notification, update ids but don't add it to store
+        if (!isValidNotification(notification)) {
+          console.error('Invalid notification:', notification)
+          commit('updateNotificationsMinMaxId', notification.id)
+          return false
+        }
+        return true
+      })
+
+      const statusNotifications = validNotifications.filter(notification => isStatusNotification(notification.type) && notification.status)
+
+      // Synchronous commit to add all the statuses
+      commit('addNewStatuses', { statuses: statusNotifications.map(notification => notification.status) })
+
+      // Update references to statuses in notifications to ones in the store
+      statusNotifications.forEach(notification => {
+        const id = notification.status.id
+        const referenceStatus = rootState.statuses.allStatusesObject[id]
+
+        if (referenceStatus) {
+          notification.status = referenceStatus
+        }
+      })
+
+      validNotifications.forEach(notification => {
+        if (notification.type === 'pleroma:report') {
+          dispatch('addReport', notification.report)
+        }
+
+        if (notification.type === 'pleroma:emoji_reaction') {
+          dispatch('fetchEmojiReactionsBy', notification.status.id)
+        }
+
+        // Only add a new notification if we don't have one for the same action
+        // eslint-disable-next-line no-prototype-builtins
+        if (!state.idStore.hasOwnProperty(notification.id)) {
+          commit('updateNotificationsMinMaxId', notification.id)
+          commit('addNewNotifications', { notifications: [notification] })
+
+          maybeShowNotification(store, notification)
+        } else if (notification.seen) {
+          state.idStore[notification.id].seen = true
+        }
+      })
+    },
+    notificationClicked ({ state, dispatch }, { id }) {
+      const notification = state.idStore[id]
+      const { type, seen } = notification
+
+      if (!seen) {
+        switch (type) {
+          case 'mention':
+          case 'pleroma:report':
+          case 'follow_request':
+            break
+          default:
+            dispatch('markSingleNotificationAsSeen', { id })
+        }
+      }
+    },
+    setNotificationsLoading ({ rootState, commit }, { value }) {
+      commit('setNotificationsLoading', { value })
+    },
+    setNotificationsSilence ({ rootState, commit }, { value }) {
+      commit('setNotificationsSilence', { value })
+    },
+    markNotificationsAsSeen ({ rootState, state, commit }) {
+      commit('markNotificationsAsSeen')
+      apiService.markNotificationsAsSeen({
+        id: state.maxId,
+        credentials: rootState.users.currentUser.credentials
+      }).then(() => {
+        closeAllDesktopNotifications(rootState)
+      })
+    },
+    markSingleNotificationAsSeen ({ rootState, commit }, { id }) {
+      commit('markSingleNotificationAsSeen', { id })
+      apiService.markNotificationsAsSeen({
+        single: true,
+        id,
+        credentials: rootState.users.currentUser.credentials
+      }).then(() => {
+        closeDesktopNotification(rootState, { id })
+      })
+    },
+    dismissNotificationLocal ({ rootState, commit }, { id }) {
+      commit('dismissNotification', { id })
+    },
+    dismissNotification ({ rootState, commit }, { id }) {
+      commit('dismissNotification', { id })
+      rootState.api.backendInteractor.dismissNotification({ id })
+    },
+    updateNotification ({ rootState, commit }, { id, updater }) {
+      commit('updateNotification', { id, updater })
+    }
+  }
+}
+
+export default notifications
diff --git a/src/modules/serverSideStorage.js b/src/modules/serverSideStorage.js
index c933ce8d..c55f54fd 100644
--- a/src/modules/serverSideStorage.js
+++ b/src/modules/serverSideStorage.js
@@ -419,7 +419,6 @@ const serverSideStorage = {
   actions: {
     pushServerSideStorage ({ state, rootState, commit }, { force = false } = {}) {
       const needPush = state.dirty || force
-      console.log(needPush)
       if (!needPush) return
       commit('updateCache', { username: rootState.users.currentUser.fqn })
       const params = { pleroma_settings_store: { 'pleroma-fe': state.cache } }
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 9b4cd175..462def22 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -12,11 +12,6 @@ import {
   isArray,
   omitBy
 } from 'lodash'
-import {
-  isStatusNotification,
-  isValidNotification,
-  maybeShowNotification
-} from '../services/notification_utils/notification_utils.js'
 import apiService from '../services/api/api.service.js'
 
 const emptyTl = (userId = 0) => ({
@@ -36,22 +31,12 @@ const emptyTl = (userId = 0) => ({
   flushMarker: 0
 })
 
-const emptyNotifications = () => ({
-  desktopNotificationSilence: true,
-  maxId: 0,
-  minId: Number.POSITIVE_INFINITY,
-  data: [],
-  idStore: {},
-  loading: false
-})
-
 export const defaultState = () => ({
   allStatuses: [],
   scrobblesNextFetch: {},
   allStatusesObject: {},
   conversationsObject: {},
   maxId: 0,
-  notifications: emptyNotifications(),
   favorites: new Set(),
   timelines: {
     mentions: emptyTl(),
@@ -154,22 +139,6 @@ const addStatusToGlobalStorage = (state, data) => {
   return result
 }
 
-// Remove status from the global storages (arrays and objects maintaining statuses) except timelines
-const removeStatusFromGlobalStorage = (state, status) => {
-  remove(state.allStatuses, { id: status.id })
-
-  // TODO: Need to remove from allStatusesObject?
-
-  // Remove possible notification
-  remove(state.notifications.data, ({ action: { id } }) => id === status.id)
-
-  // Remove from conversation
-  const conversationId = status.statusnet_conversation_id
-  if (state.conversationsObject[conversationId]) {
-    remove(state.conversationsObject[conversationId], { id: status.id })
-  }
-}
-
 const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false, userId, pagination = {} }) => {
   // Sanity check
   if (!isArray(statuses)) {
@@ -303,20 +272,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
         favoriteStatus(favorite)
       }
     },
-    deletion: (deletion) => {
-      const uri = deletion.uri
-      const status = find(allStatuses, { uri })
-      if (!status) {
-        return
-      }
-
-      removeStatusFromGlobalStorage(state, status)
-
-      if (timeline) {
-        remove(timelineObject.statuses, { uri })
-        remove(timelineObject.visibleStatuses, { uri })
-      }
-    },
     follow: (follow) => {
       // NOOP, it is known status but we don't do anything about it for now
     },
@@ -338,52 +293,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   }
 }
 
-const updateNotificationsMinMaxId = (state, notification) => {
-  state.notifications.maxId = notification.id > state.notifications.maxId
-    ? notification.id
-    : state.notifications.maxId
-  state.notifications.minId = notification.id < state.notifications.minId
-    ? notification.id
-    : state.notifications.minId
-}
-
-const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters, newNotificationSideEffects }) => {
-  each(notifications, (notification) => {
-    // If invalid notification, update ids but don't add it to store
-    if (!isValidNotification(notification)) {
-      console.error('Invalid notification:', notification)
-      updateNotificationsMinMaxId(state, notification)
-      return
-    }
-
-    if (isStatusNotification(notification.type)) {
-      notification.action = addStatusToGlobalStorage(state, notification.action).item
-      notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
-    }
-
-    if (notification.type === 'pleroma:report') {
-      dispatch('addReport', notification.report)
-    }
-
-    if (notification.type === 'pleroma:emoji_reaction') {
-      dispatch('fetchEmojiReactionsBy', notification.status.id)
-    }
-
-    // Only add a new notification if we don't have one for the same action
-    // eslint-disable-next-line no-prototype-builtins
-    if (!state.notifications.idStore.hasOwnProperty(notification.id)) {
-      updateNotificationsMinMaxId(state, notification)
-
-      state.notifications.data.push(notification)
-      state.notifications.idStore[notification.id] = notification
-
-      newNotificationSideEffects(notification)
-    } else if (notification.seen) {
-      state.notifications.idStore[notification.id].seen = true
-    }
-  })
-}
-
 const removeStatus = (state, { timeline, userId }) => {
   const timelineObject = state.timelines[timeline]
   if (userId) {
@@ -396,7 +305,6 @@ const removeStatus = (state, { timeline, userId }) => {
 
 export const mutations = {
   addNewStatuses,
-  addNewNotifications,
   removeStatus,
   showNewStatuses (state, { timeline }) {
     const oldTimeline = (state.timelines[timeline])
@@ -418,9 +326,6 @@ export const mutations = {
     const userId = excludeUserId ? state.timelines[timeline].userId : undefined
     state.timelines[timeline] = emptyTl(userId)
   },
-  clearNotifications (state) {
-    state.notifications = emptyNotifications()
-  },
   setFavorited (state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]
 
@@ -503,31 +408,6 @@ export const mutations = {
     const newStatus = state.allStatusesObject[id]
     newStatus.nsfw = nsfw
   },
-  setNotificationsLoading (state, { value }) {
-    state.notifications.loading = value
-  },
-  setNotificationsSilence (state, { value }) {
-    state.notifications.desktopNotificationSilence = value
-  },
-  markNotificationsAsSeen (state) {
-    each(state.notifications.data, (notification) => {
-      notification.seen = true
-    })
-  },
-  markSingleNotificationAsSeen (state, { id }) {
-    const notification = find(state.notifications.data, n => n.id === id)
-    if (notification) notification.seen = true
-  },
-  dismissNotification (state, { id }) {
-    state.notifications.data = state.notifications.data.filter(n => n.id !== id)
-  },
-  dismissNotifications (state, { finder }) {
-    state.notifications.data = state.notifications.data.filter(n => finder)
-  },
-  updateNotification (state, { id, updater }) {
-    const notification = find(state.notifications.data, n => n.id === id)
-    notification && updater(notification)
-  },
   queueFlush (state, { timeline, id }) {
     state.timelines[timeline].flushMarker = id
   },
@@ -609,23 +489,9 @@ export const mutations = {
 const statuses = {
   state: defaultState(),
   actions: {
-    addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId, pagination }) {
+    addNewStatuses ({ rootState, commit, dispatch, state }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId, pagination }) {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId, pagination })
     },
-    addNewNotifications (store, { notifications, older }) {
-      const { commit, dispatch, rootGetters } = store
-
-      const newNotificationSideEffects = (notification) => {
-        maybeShowNotification(store, notification)
-      }
-      commit('addNewNotifications', { dispatch, notifications, older, rootGetters, newNotificationSideEffects })
-    },
-    setNotificationsLoading ({ rootState, commit }, { value }) {
-      commit('setNotificationsLoading', { value })
-    },
-    setNotificationsSilence ({ rootState, commit }, { value }) {
-      commit('setNotificationsSilence', { value })
-    },
     fetchStatus ({ rootState, dispatch }, id) {
       return rootState.api.backendInteractor.fetchStatus({ id })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
@@ -721,31 +587,6 @@ const statuses = {
     queueFlushAll ({ rootState, commit }) {
       commit('queueFlushAll')
     },
-    markNotificationsAsSeen ({ rootState, commit }) {
-      commit('markNotificationsAsSeen')
-      apiService.markNotificationsAsSeen({
-        id: rootState.statuses.notifications.maxId,
-        credentials: rootState.users.currentUser.credentials
-      })
-    },
-    markSingleNotificationAsSeen ({ rootState, commit }, { id }) {
-      commit('markSingleNotificationAsSeen', { id })
-      apiService.markNotificationsAsSeen({
-        single: true,
-        id,
-        credentials: rootState.users.currentUser.credentials
-      })
-    },
-    dismissNotificationLocal ({ rootState, commit }, { id }) {
-      commit('dismissNotification', { id })
-    },
-    dismissNotification ({ rootState, commit }, { id }) {
-      commit('dismissNotification', { id })
-      rootState.api.backendInteractor.dismissNotification({ id })
-    },
-    updateNotification ({ rootState, commit }, { id, updater }) {
-      commit('updateNotification', { id, updater })
-    },
     fetchFavsAndRepeats ({ rootState, commit }, id) {
       Promise.all([
         rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
diff --git a/src/modules/users.js b/src/modules/users.js
index 50b4cb84..6467d732 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -2,7 +2,7 @@ import backendInteractorService from '../services/backend_interactor_service/bac
 import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import oauthApi from '../services/new_api/oauth.js'
 import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
-import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
+import { registerPushNotifications, unregisterPushNotifications } from '../services/sw/sw.js'
 
 // TODO: Unify with mergeOrAdd in statuses.js
 export const mergeOrAdd = (arr, obj, item) => {
@@ -498,7 +498,7 @@ const users = {
       store.commit('addNewUsers', users)
       store.commit('addNewUsers', targetUsers)
 
-      const notificationsObject = store.rootState.statuses.notifications.idStore
+      const notificationsObject = store.rootState.notifications.idStore
       const relevantNotifications = Object.entries(notificationsObject)
         .filter(([k, val]) => notificationIds.includes(k))
         .map(([k, val]) => val)
@@ -667,7 +667,7 @@ const users = {
             resolve()
           })
           .catch((error) => {
-            console.log(error)
+            console.error(error)
             commit('endLogin')
             reject(new Error('Failed to connect to server, try again'))
           })