From 0c25b013db2f9d0f06ba6e73ddebb519dcaa54a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 26 Sep 2019 11:43:48 +0200
Subject: [PATCH] Followed in big parts Roberts suggestions

---
 .../NotificationMenu/NotificationMenu.vue     | 39 ++++++++-----------
 webapp/constants/notifications.js             |  2 +-
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 0291ae1c8..5413d8edd 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,10 +1,12 @@
 <template>
   <div
-    v-if="totalNotifications <= 0"
+    v-if="totalNotificationsCount === 0"
     class="notifications-menu-pointer"
     @click.prevent="updateNotifications"
   >
-    <ds-button class="notifications-menu" disabled icon="bell">{{ unreadNotifications }}</ds-button>
+    <ds-button class="notifications-menu" disabled icon="bell">
+      {{ unreadNotificationsCount }}
+    </ds-button>
   </div>
   <dropdown v-else class="notifications-menu" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
@@ -12,11 +14,11 @@
         primary
         icon="bell"
         @click.prevent="
-          toggleMenu()
           updateNotifications()
+          toggleMenu()
         "
       >
-        {{ unreadNotifications }}
+        {{ unreadNotificationsCount }}
       </ds-button>
     </template>
     <template slot="popover">
@@ -29,7 +31,7 @@
 
 <script>
 import Dropdown from '~/components/Dropdown'
-import { REFRESH_MILLISEC } from '~/constants/notifications'
+import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 import NotificationList from '../NotificationList/NotificationList'
 
@@ -48,22 +50,6 @@ export default {
   props: {
     placement: { type: String },
   },
-  watch: {
-    notifications: {
-      immediate: true,
-      handler(lastQueriedNotifications) {
-        if (lastQueriedNotifications && lastQueriedNotifications.length > 0) {
-          lastQueriedNotifications.forEach(updatedListNotification => {
-            const sameNotification = this.displayedNotifications.find(oldListNotification => {
-              return this.equalNotification(oldListNotification, updatedListNotification)
-            })
-            if (!sameNotification) this.displayedNotifications.unshift(updatedListNotification)
-          })
-        }
-      },
-    },
-  },
-
   methods: {
     async updateNotifications() {
       try {
@@ -94,10 +80,10 @@ export default {
     },
   },
   computed: {
-    totalNotifications() {
+    totalNotificationsCount() {
       return (this.displayedNotifications || []).length
     },
-    unreadNotifications() {
+    unreadNotificationsCount() {
       let countUnread = 0
       if (this.displayedNotifications) {
         this.displayedNotifications.forEach(notification => {
@@ -115,6 +101,13 @@ export default {
       pollInterval() {
         return NOTIFICATIONS_POLL_INTERVAL
       },
+      update(data) {
+        const newNotifications = data.notifications.filter(newN => {
+          return !this.displayedNotifications.find(oldN => this.equalNotification(newN, oldN))
+        })
+        this.displayedNotifications = newNotifications.concat(this.displayedNotifications)
+        return data.notifications
+      },
     },
   },
 }
diff --git a/webapp/constants/notifications.js b/webapp/constants/notifications.js
index d72f11993..3e88e7b92 100644
--- a/webapp/constants/notifications.js
+++ b/webapp/constants/notifications.js
@@ -1 +1 @@
-export const REFRESH_MILLISEC = '60000'
+export const NOTIFICATIONS_POLL_INTERVAL = '60000'