From 73cc068469f0f2b61338b6b6d9547b80e633b6a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 19 Sep 2019 09:55:31 +0200
Subject: [PATCH 01/31] Fix lost translation

---
 .../Notification/Notification.spec.js              | 14 +++++++-------
 .../notifications/Notification/Notification.vue    |  6 ++++--
 webapp/locales/de.json                             |  5 +++--
 webapp/locales/en.json                             |  5 +++--
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/webapp/components/notifications/Notification/Notification.spec.js b/webapp/components/notifications/Notification/Notification.spec.js
index 9ca47e7a0..54e6b4ab3 100644
--- a/webapp/components/notifications/Notification/Notification.spec.js
+++ b/webapp/components/notifications/Notification/Notification.spec.js
@@ -69,16 +69,16 @@ describe('Notification', () => {
     it('renders reason', () => {
       wrapper = Wrapper()
       expect(wrapper.find('.reason-text-for-test').text()).toEqual(
-        'notifications.menu.commented_on_post',
+        'notifications.reason.commented_on_post',
       )
     })
     it('renders title', () => {
       wrapper = Wrapper()
       expect(wrapper.text()).toContain("It's a post title")
     })
-    it('renders the "Comment:"', () => {
+    it('renders the identifier "notifications.comment"', () => {
       wrapper = Wrapper()
-      expect(wrapper.text()).toContain('Comment:')
+      expect(wrapper.text()).toContain('notifications.comment')
     })
     it('renders the contentExcerpt', () => {
       wrapper = Wrapper()
@@ -119,7 +119,7 @@ describe('Notification', () => {
     it('renders reason', () => {
       wrapper = Wrapper()
       expect(wrapper.find('.reason-text-for-test').text()).toEqual(
-        'notifications.menu.mentioned_in_post',
+        'notifications.reason.mentioned_in_post',
       )
     })
     it('renders title', () => {
@@ -169,7 +169,7 @@ describe('Notification', () => {
     it('renders reason', () => {
       wrapper = Wrapper()
       expect(wrapper.find('.reason-text-for-test').text()).toEqual(
-        'notifications.menu.mentioned_in_comment',
+        'notifications.reason.mentioned_in_comment',
       )
     })
     it('renders title', () => {
@@ -177,9 +177,9 @@ describe('Notification', () => {
       expect(wrapper.text()).toContain("It's a post title")
     })
 
-    it('renders the "Comment:"', () => {
+    it('renders the identifier "notifications.comment"', () => {
       wrapper = Wrapper()
-      expect(wrapper.text()).toContain('Comment:')
+      expect(wrapper.text()).toContain('notifications.comment')
     })
 
     it('renders the contentExcerpt', () => {
diff --git a/webapp/components/notifications/Notification/Notification.vue b/webapp/components/notifications/Notification/Notification.vue
index 93ca42980..dc9383c85 100644
--- a/webapp/components/notifications/Notification/Notification.vue
+++ b/webapp/components/notifications/Notification/Notification.vue
@@ -5,7 +5,7 @@
         <hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
       </ds-space>
       <ds-text class="reason-text-for-test" color="soft">
-        {{ $t(`notifications.menu.${notification.reason}`) }}
+        {{ $t(`notifications.reason.${notification.reason}`) }}
       </ds-text>
     </client-only>
     <ds-space margin-bottom="x-small" />
@@ -23,7 +23,9 @@
         >
           <ds-space margin-bottom="x-small" />
           <div>
-            <span v-if="isComment" class="comment-notification-header">Comment:</span>
+            <span v-if="isComment" class="comment-notification-header">
+              {{ $t(`notifications.comment`) }}:
+            </span>
             {{ from.contentExcerpt | removeHtml }}
           </div>
         </ds-card>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index fa9d66860..7b7bc3ec1 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -135,11 +135,12 @@
     }
   },
   "notifications": {
-    "menu": {
+    "reason": {
       "mentioned_in_post": "Hat dich in einem Beitrag erwähnt …",
       "mentioned_in_comment": "Hat dich in einem Kommentar erwähnt …",
       "commented_on_post": "Hat deinen Beitrag kommentiert …"
-    }
+    },
+    "comment": "Kommentar"
   },
   "search": {
     "placeholder": "Suchen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 592fc57e4..8204d4741 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -136,11 +136,12 @@
     }
   },
   "notifications": {
-    "menu": {
+    "reason": {
       "mentioned_in_post": "Mentioned you in a post …",
       "mentioned_in_comment": "Mentioned you in a comment …",
       "commented_on_post": "Commented on your post …"
-    }
+    },
+    "comment": "Comment"
   },
   "search": {
     "placeholder": "Search",

From f968c12ccfa2c9c0b530e92fb62289da5b3d9f77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 19 Sep 2019 15:33:35 +0200
Subject: [PATCH 02/31] Implement updating by time and add new ones to the list

---
 .../NotificationMenu/NotificationMenu.vue     | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 51b90089f..af52d8395 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -35,7 +35,39 @@ export default {
   props: {
     placement: { type: String },
   },
+  created() {
+    setInterval(this.updateNotifications, 10000)
+  },
+  destroyed() {
+    clearInterval(this.updateNotifications)
+  },
   methods: {
+    async updateNotifications() {
+      try {
+        const {
+          data: { notifications },
+        } = await this.$apollo.mutate({
+          mutation: notificationQuery(this.$i18n),
+        })
+        // add all the new notifications to the notifications
+        if (notifications) {
+          notifications.forEach(updatedElement => {
+            const sameNotification = this.notifications.find(function(oldElement) {
+              return (
+                oldElement.from.id === updatedElement.from.id &&
+                oldElement.createdAt === updatedElement.createdAt &&
+                oldElement.reason === updatedElement.reason
+              )
+            })
+            if (sameNotification === undefined) {
+              this.notifications.unshift(updatedElement)
+            }
+          })
+        }
+      } catch (err) {
+        throw new Error(err)
+      }
+    },
     async markAsRead(notificationSourceId) {
       const variables = { id: notificationSourceId }
       try {

From ca8bb9e43448d8a4ea6b66a43c080787c72c052b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 20 Sep 2019 09:19:35 +0200
Subject: [PATCH 03/31] Added timing as constant

---
 .../notifications/NotificationMenu/NotificationMenu.vue        | 3 ++-
 webapp/constants/notifications.js                              | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 webapp/constants/notifications.js

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index af52d8395..1bff000ed 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -18,6 +18,7 @@
 
 <script>
 import Dropdown from '~/components/Dropdown'
+import { REFRECH_MILISEC } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 import NotificationList from '../NotificationList/NotificationList'
 
@@ -36,7 +37,7 @@ export default {
     placement: { type: String },
   },
   created() {
-    setInterval(this.updateNotifications, 10000)
+    setInterval(this.updateNotifications, REFRECH_MILISEC)
   },
   destroyed() {
     clearInterval(this.updateNotifications)
diff --git a/webapp/constants/notifications.js b/webapp/constants/notifications.js
new file mode 100644
index 000000000..d4c481149
--- /dev/null
+++ b/webapp/constants/notifications.js
@@ -0,0 +1 @@
+export const REFRECH_MILISEC = '60000'

From 433a555fd45b3b4aa0a966602b4bb1935fb48e3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 21 Sep 2019 07:51:20 +0200
Subject: [PATCH 04/31] Update
 webapp/components/notifications/NotificationMenu/NotificationMenu.vue

Co-Authored-By: mattwr18 <mattwr18@gmail.com>
---
 .../notifications/NotificationMenu/NotificationMenu.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 1bff000ed..515ed4a66 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -18,7 +18,7 @@
 
 <script>
 import Dropdown from '~/components/Dropdown'
-import { REFRECH_MILISEC } from '~/constants/notifications'
+import { REFRESH_MILLISEC } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 import NotificationList from '../NotificationList/NotificationList'
 

From fb41d0064de0b6ac4cbb8b541abe099c7477e3ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 21 Sep 2019 07:51:39 +0200
Subject: [PATCH 05/31] Update
 webapp/components/notifications/NotificationMenu/NotificationMenu.vue

Co-Authored-By: mattwr18 <mattwr18@gmail.com>
---
 .../notifications/NotificationMenu/NotificationMenu.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 515ed4a66..f15550d89 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -37,7 +37,7 @@ export default {
     placement: { type: String },
   },
   created() {
-    setInterval(this.updateNotifications, REFRECH_MILISEC)
+    setInterval(this.updateNotifications, REFRESH_MILLISEC)
   },
   destroyed() {
     clearInterval(this.updateNotifications)

From e3d650901079c47cceca1d398e2d0a78038b3108 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 21 Sep 2019 07:53:14 +0200
Subject: [PATCH 06/31] Update webapp/constants/notifications.js

Co-Authored-By: mattwr18 <mattwr18@gmail.com>
---
 webapp/constants/notifications.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/constants/notifications.js b/webapp/constants/notifications.js
index d4c481149..d72f11993 100644
--- a/webapp/constants/notifications.js
+++ b/webapp/constants/notifications.js
@@ -1 +1 @@
-export const REFRECH_MILISEC = '60000'
+export const REFRESH_MILLISEC = '60000'

From 92fcaea4526a32ebab6340f5b2c10ceac10deeb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 08:49:48 +0200
Subject: [PATCH 07/31] Distinguish between `totalNotifications` and
 `unreadNotifications`

---
 .../NotificationMenu/NotificationMenu.vue     | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index f15550d89..fb6dd41a3 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,11 +1,11 @@
 <template>
   <ds-button v-if="totalNotifications <= 0" class="notifications-menu" disabled icon="bell">
-    {{ totalNotifications }}
+    {{ unreadNotifications }}
   </ds-button>
   <dropdown v-else class="notifications-menu" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
       <ds-button primary icon="bell" @click.prevent="toggleMenu">
-        {{ totalNotifications }}
+        {{ unreadNotifications }}
       </ds-button>
     </template>
     <template slot="popover">
@@ -52,16 +52,16 @@ export default {
         })
         // add all the new notifications to the notifications
         if (notifications) {
-          notifications.forEach(updatedElement => {
-            const sameNotification = this.notifications.find(function(oldElement) {
+          notifications.forEach(udatedListNotification => {
+            const sameNotification = this.notifications.find(function(oldListNotification) {
               return (
-                oldElement.from.id === updatedElement.from.id &&
-                oldElement.createdAt === updatedElement.createdAt &&
-                oldElement.reason === updatedElement.reason
+                oldListNotification.from.id === udatedListNotification.from.id &&
+                oldListNotification.createdAt === udatedListNotification.createdAt &&
+                oldListNotification.reason === udatedListNotification.reason
               )
             })
             if (sameNotification === undefined) {
-              this.notifications.unshift(updatedElement)
+              this.notifications.unshift(udatedListNotification)
             }
           })
         }
@@ -91,6 +91,15 @@ export default {
     totalNotifications() {
       return (this.notifications || []).length
     },
+    unreadNotifications() {
+      let countUnread = 0
+      if (this.notifications) {
+        this.notifications.forEach(notification => {
+          if (!notification.read) countUnread++
+        })
+      }
+      return countUnread
+    },
   },
   apollo: {
     notifications: {

From 5b6f816ae1f30736b817335b096e00d915b2d317 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 09:10:26 +0200
Subject: [PATCH 08/31] Update notifications menu on click

---
 .../NotificationMenu/NotificationMenu.vue     | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index fb6dd41a3..eecbbcd68 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,10 +1,25 @@
 <template>
-  <ds-button v-if="totalNotifications <= 0" class="notifications-menu" disabled icon="bell">
-    {{ unreadNotifications }}
-  </ds-button>
+  <div
+    v-if="totalNotifications <= 0"
+    class="notifications-menu-pointer"
+    @click.prevent="updateNotifications"
+  >
+    <ds-button class="notifications-menu" disabled icon="bell">
+      {{ unreadNotifications }}
+    </ds-button>
+  </div>
   <dropdown v-else class="notifications-menu" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
-      <ds-button primary icon="bell" @click.prevent="toggleMenu">
+      <ds-button
+        primary
+        icon="bell"
+        @click.prevent="
+          () => {
+            toggleMenu()
+            updateNotifications()
+          }
+        "
+      >
         {{ unreadNotifications }}
       </ds-button>
     </template>
@@ -100,6 +115,9 @@ export default {
       }
       return countUnread
     },
+    clickMenuButton() {
+      toggleMenu()
+    },
   },
   apollo: {
     notifications: {
@@ -117,6 +135,10 @@ export default {
   align-items: center;
 }
 
+.notifications-menu-pointer {
+  cursor: pointer;
+}
+
 .notifications-menu-popover {
   max-width: 500px;
 }

From da5c63e97d9882ba17eb11f235fc2382ad10fa4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 12:08:06 +0200
Subject: [PATCH 09/31] Rewrite the `toggleMenu` call

---
 .../NotificationMenu/NotificationMenu.vue             | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index eecbbcd68..f96bd9e73 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -14,10 +14,8 @@
         primary
         icon="bell"
         @click.prevent="
-          () => {
-            toggleMenu()
-            updateNotifications()
-          }
+          toggleMenu()
+          updateNotifications()
         "
       >
         {{ unreadNotifications }}
@@ -65,7 +63,7 @@ export default {
         } = await this.$apollo.mutate({
           mutation: notificationQuery(this.$i18n),
         })
-        // add all the new notifications to the notifications
+        // add all the new notifications to the old notifications at top of the list
         if (notifications) {
           notifications.forEach(udatedListNotification => {
             const sameNotification = this.notifications.find(function(oldListNotification) {
@@ -115,9 +113,6 @@ export default {
       }
       return countUnread
     },
-    clickMenuButton() {
-      toggleMenu()
-    },
   },
   apollo: {
     notifications: {

From d1444619ab273387848b6849e774fc5fa852358b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 12:15:46 +0200
Subject: [PATCH 10/31] Give the test more sence

---
 .../NotificationMenu/NotificationMenu.spec.js    | 16 +++++++++++++++-
 .../NotificationMenu/NotificationMenu.vue        |  6 +++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
index b8d988b58..5805f475e 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
@@ -79,12 +79,26 @@ describe('NotificationMenu.vue', () => {
                   },
                 },
               },
+              {
+                id: 'notification-43',
+                read: true,
+                post: {
+                  id: 'post-3',
+                  title: 'red post title',
+                  contentExcerpt: 'this is yet another post content',
+                  author: {
+                    id: 'john-1',
+                    slug: 'john-doe',
+                    name: 'John Doe',
+                  },
+                },
+              },
             ],
           }
         }
       })
 
-      it('displays the total number of notifications', () => {
+      it('displays the unred number of notifications', () => {
         wrapper = Wrapper()
         expect(wrapper.find('ds-button-stub').text()).toEqual('2')
       })
diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index f96bd9e73..cbb351d8e 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -5,7 +5,7 @@
     @click.prevent="updateNotifications"
   >
     <ds-button class="notifications-menu" disabled icon="bell">
-      {{ unreadNotifications }}
+      {{ unredNotifications }}
     </ds-button>
   </div>
   <dropdown v-else class="notifications-menu" :placement="placement">
@@ -18,7 +18,7 @@
           updateNotifications()
         "
       >
-        {{ unreadNotifications }}
+        {{ unredNotifications }}
       </ds-button>
     </template>
     <template slot="popover">
@@ -104,7 +104,7 @@ export default {
     totalNotifications() {
       return (this.notifications || []).length
     },
-    unreadNotifications() {
+    unredNotifications() {
       let countUnread = 0
       if (this.notifications) {
         this.notifications.forEach(notification => {

From 597ec9d109869c7263b977a76be886b7f9aa8c83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 13:44:03 +0200
Subject: [PATCH 11/31] Update
 webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Robert Schäfer <git@roschaefer.de>
---
 .../notifications/NotificationMenu/NotificationMenu.spec.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
index 5805f475e..51b74b7f2 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
@@ -98,7 +98,7 @@ describe('NotificationMenu.vue', () => {
         }
       })
 
-      it('displays the unred number of notifications', () => {
+      it('displays the unread number of notifications', () => {
         wrapper = Wrapper()
         expect(wrapper.find('ds-button-stub').text()).toEqual('2')
       })

From 72011fbe276757bee72bb0edfdc913f0a6a2cfdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 13:44:35 +0200
Subject: [PATCH 12/31] Update
 webapp/components/notifications/NotificationMenu/NotificationMenu.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Robert Schäfer <git@roschaefer.de>
---
 .../notifications/NotificationMenu/NotificationMenu.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index cbb351d8e..8cfeef570 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -5,7 +5,7 @@
     @click.prevent="updateNotifications"
   >
     <ds-button class="notifications-menu" disabled icon="bell">
-      {{ unredNotifications }}
+      {{ unreadNotifications }}
     </ds-button>
   </div>
   <dropdown v-else class="notifications-menu" :placement="placement">

From 21cd33bcf7cf47db8b06567f54935908d3f38e6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 13:44:49 +0200
Subject: [PATCH 13/31] Update
 webapp/components/notifications/NotificationMenu/NotificationMenu.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Robert Schäfer <git@roschaefer.de>
---
 .../notifications/NotificationMenu/NotificationMenu.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 8cfeef570..680e64ee0 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -18,7 +18,7 @@
           updateNotifications()
         "
       >
-        {{ unredNotifications }}
+        {{ unreadNotifications }}
       </ds-button>
     </template>
     <template slot="popover">

From 9d884d6fdcc7a6a11d208d26f7edd50284d343fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 13:45:01 +0200
Subject: [PATCH 14/31] Update
 webapp/components/notifications/NotificationMenu/NotificationMenu.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Robert Schäfer <git@roschaefer.de>
---
 .../notifications/NotificationMenu/NotificationMenu.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 680e64ee0..f96bd9e73 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -104,7 +104,7 @@ export default {
     totalNotifications() {
       return (this.notifications || []).length
     },
-    unredNotifications() {
+    unreadNotifications() {
       let countUnread = 0
       if (this.notifications) {
         this.notifications.forEach(notification => {

From f4c8dec6d5b8134a2b84cecf70e26e14e81f385d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 13:46:08 +0200
Subject: [PATCH 15/31] Update
 webapp/components/notifications/NotificationMenu/NotificationMenu.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Robert Schäfer <git@roschaefer.de>
---
 .../notifications/NotificationMenu/NotificationMenu.vue       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index f96bd9e73..cada56bde 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -105,7 +105,9 @@ export default {
       return (this.notifications || []).length
     },
     unreadNotifications() {
-      let countUnread = 0
+      let countUnread = this.notifications.reduce((notification, counter) => {
+        return (notification.read) ? counter : counter +1
+      })
       if (this.notifications) {
         this.notifications.forEach(notification => {
           if (!notification.read) countUnread++

From 87abcf82378c26207aa639d0edf8580b09fe80db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 17:13:49 +0200
Subject: [PATCH 16/31] Implement
 `this.$apollo.queries.notifications.refetch()`

---
 .../NotificationMenu/NotificationMenu.vue     | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index cada56bde..f72658c15 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -4,9 +4,7 @@
     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">{{ unreadNotifications }}</ds-button>
   </div>
   <dropdown v-else class="notifications-menu" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
@@ -58,15 +56,14 @@ export default {
   methods: {
     async updateNotifications() {
       try {
-        const {
-          data: { notifications },
-        } = await this.$apollo.mutate({
-          mutation: notificationQuery(this.$i18n),
-        })
+        let oldNotifications = this.notifications
+        this.$apollo.queries.notifications.refetch()
+        const udatedNotifications = this.notifications
+
         // add all the new notifications to the old notifications at top of the list
-        if (notifications) {
-          notifications.forEach(udatedListNotification => {
-            const sameNotification = this.notifications.find(function(oldListNotification) {
+        if (udatedNotifications) {
+          udatedNotifications.forEach(udatedListNotification => {
+            const sameNotification = oldNotifications.find(function(oldListNotification) {
               return (
                 oldListNotification.from.id === udatedListNotification.from.id &&
                 oldListNotification.createdAt === udatedListNotification.createdAt &&
@@ -74,9 +71,11 @@ export default {
               )
             })
             if (sameNotification === undefined) {
-              this.notifications.unshift(udatedListNotification)
+              oldNotifications.unshift(udatedListNotification)
             }
           })
+
+          this.notifications = oldNotifications
         }
       } catch (err) {
         throw new Error(err)
@@ -105,9 +104,7 @@ export default {
       return (this.notifications || []).length
     },
     unreadNotifications() {
-      let countUnread = this.notifications.reduce((notification, counter) => {
-        return (notification.read) ? counter : counter +1
-      })
+      let countUnread = 0
       if (this.notifications) {
         this.notifications.forEach(notification => {
           if (!notification.read) countUnread++

From 7727707d4983c3b673241d6b2571c6ab318ac978 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 23 Sep 2019 18:00:35 +0200
Subject: [PATCH 17/31] Followed some of Roberts suggestions and a bit more

---
 .../NotificationMenu/NotificationMenu.spec.js |  2 +-
 .../NotificationMenu/NotificationMenu.vue     | 71 +++++++++++--------
 2 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
index 51b74b7f2..85384977e 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
@@ -50,7 +50,7 @@ describe('NotificationMenu.vue', () => {
       beforeEach(() => {
         data = () => {
           return {
-            notifications: [
+            displayedNotifications: [
               {
                 id: 'notification-41',
                 read: false,
diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index f72658c15..ecc89ff41 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -21,7 +21,7 @@
     </template>
     <template slot="popover">
       <div class="notifications-menu-popover">
-        <notification-list :notifications="notifications" @markAsRead="markAsRead" />
+        <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
       </div>
     </template>
   </dropdown>
@@ -41,42 +41,45 @@ export default {
   },
   data() {
     return {
+      displayedNotifications: [],
       notifications: [],
     }
   },
   props: {
     placement: { type: String },
   },
-  created() {
-    setInterval(this.updateNotifications, REFRESH_MILLISEC)
-  },
-  destroyed() {
-    clearInterval(this.updateNotifications)
+  watch: {
+    notifications: {
+      handler(lastQueriedNotifications) {
+        if (lastQueriedNotifications && lastQueriedNotifications.length > 0) {
+          // set this to be empty to get always called if a query comes with results from the backend
+          // has the sideeffect the handler is encouraged to be called again, but only once with no effect, because of the if above
+          this.notifications = []
+
+          let oldNotifications = this.displayedNotifications
+          const equalNotification = this.equalNotification // because we can not use 'this.equalNotification' in callback
+
+          // add all the new notifications to the oldNotifications at top of the list
+          lastQueriedNotifications.forEach(updatedListNotification => {
+            const sameNotification = oldNotifications.find(function(oldListNotification) {
+              return equalNotification(oldListNotification, updatedListNotification)
+            })
+            if (sameNotification === undefined) {
+              oldNotifications.unshift(updatedListNotification)
+            }
+          })
+
+          this.displayedNotifications = oldNotifications
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   methods: {
     async updateNotifications() {
       try {
-        let oldNotifications = this.notifications
         this.$apollo.queries.notifications.refetch()
-        const udatedNotifications = this.notifications
-
-        // add all the new notifications to the old notifications at top of the list
-        if (udatedNotifications) {
-          udatedNotifications.forEach(udatedListNotification => {
-            const sameNotification = oldNotifications.find(function(oldListNotification) {
-              return (
-                oldListNotification.from.id === udatedListNotification.from.id &&
-                oldListNotification.createdAt === udatedListNotification.createdAt &&
-                oldListNotification.reason === udatedListNotification.reason
-              )
-            })
-            if (sameNotification === undefined) {
-              oldNotifications.unshift(udatedListNotification)
-            }
-          })
-
-          this.notifications = oldNotifications
-        }
       } catch (err) {
         throw new Error(err)
       }
@@ -91,22 +94,25 @@ export default {
           variables,
         })
         if (!(markAsRead && markAsRead.read === true)) return
-        this.notifications = this.notifications.map(n => {
-          return n.from.id === markAsRead.from.id ? markAsRead : n
+        this.displayedNotifications = this.displayedNotifications.map(n => {
+          return this.equalNotification(n, markAsRead) ? markAsRead : n
         })
       } catch (err) {
         throw new Error(err)
       }
     },
+    equalNotification(a, b) {
+      return a.from.id === b.from.id && a.createdAt === b.createdAt && a.reason === b.reason
+    },
   },
   computed: {
     totalNotifications() {
-      return (this.notifications || []).length
+      return (this.displayedNotifications || []).length
     },
     unreadNotifications() {
       let countUnread = 0
-      if (this.notifications) {
-        this.notifications.forEach(notification => {
+      if (this.displayedNotifications) {
+        this.displayedNotifications.forEach(notification => {
           if (!notification.read) countUnread++
         })
       }
@@ -118,6 +124,9 @@ export default {
       query() {
         return notificationQuery(this.$i18n)
       },
+      pollInterval() {
+        return REFRESH_MILLISEC
+      },
     },
   },
 }

From 99dafcda64a401d8b089e0ed1e66515c450bdb72 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Tue, 24 Sep 2019 09:55:07 +0200
Subject: [PATCH 18/31] Reduce complexity of notifications watcher

- Co-authored-by: @Tirokk <wolle.huss@pjannto.com>
---
 .../NotificationMenu/NotificationMenu.spec.js |  4 ++--
 .../NotificationMenu/NotificationMenu.vue     | 22 +++++--------------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
index 85384977e..93b56b8a2 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
@@ -84,7 +84,7 @@ describe('NotificationMenu.vue', () => {
                 read: true,
                 post: {
                   id: 'post-3',
-                  title: 'red post title',
+                  title: 'read post title',
                   contentExcerpt: 'this is yet another post content',
                   author: {
                     id: 'john-1',
@@ -98,7 +98,7 @@ describe('NotificationMenu.vue', () => {
         }
       })
 
-      it('displays the unread number of notifications', () => {
+      it('displays the number of unread notifications', () => {
         wrapper = Wrapper()
         expect(wrapper.find('ds-button-stub').text()).toEqual('2')
       })
diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index ecc89ff41..366148885 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -50,32 +50,20 @@ export default {
   },
   watch: {
     notifications: {
+      immediate: true,
       handler(lastQueriedNotifications) {
         if (lastQueriedNotifications && lastQueriedNotifications.length > 0) {
-          // set this to be empty to get always called if a query comes with results from the backend
-          // has the sideeffect the handler is encouraged to be called again, but only once with no effect, because of the if above
-          this.notifications = []
-
-          let oldNotifications = this.displayedNotifications
-          const equalNotification = this.equalNotification // because we can not use 'this.equalNotification' in callback
-
-          // add all the new notifications to the oldNotifications at top of the list
           lastQueriedNotifications.forEach(updatedListNotification => {
-            const sameNotification = oldNotifications.find(function(oldListNotification) {
-              return equalNotification(oldListNotification, updatedListNotification)
+            const sameNotification = this.displayedNotifications.find(oldListNotification => {
+              return this.equalNotification(oldListNotification, updatedListNotification)
             })
-            if (sameNotification === undefined) {
-              oldNotifications.unshift(updatedListNotification)
-            }
+            if (!sameNotification) this.displayedNotifications.unshift(updatedListNotification)
           })
-
-          this.displayedNotifications = oldNotifications
         }
       },
-      deep: true,
-      immediate: true,
     },
   },
+
   methods: {
     async updateNotifications() {
       try {

From a667d5cd8557b21888ebfd8ce4b9733fb65a274c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 26 Sep 2019 09:47:50 +0200
Subject: [PATCH 19/31] Update
 webapp/components/notifications/NotificationMenu/NotificationMenu.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed to `NOTIFICATIONS_POLL_INTERVAL`

Co-Authored-By: Robert Schäfer <git@roschaefer.de>
---
 .../notifications/NotificationMenu/NotificationMenu.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 366148885..0291ae1c8 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -113,7 +113,7 @@ export default {
         return notificationQuery(this.$i18n)
       },
       pollInterval() {
-        return REFRESH_MILLISEC
+        return NOTIFICATIONS_POLL_INTERVAL
       },
     },
   },

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 20/31] 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'

From 01cf5d3e9d42317d027d3be09744a3f2058cb9a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 27 Sep 2019 09:11:08 +0200
Subject: [PATCH 21/31] Add logic for hover and little delay for open menu if
 not updated

---
 .../NotificationMenu/NotificationMenu.vue     | 87 +++++++++++++------
 webapp/constants/notifications.js             |  4 +-
 2 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 5413d8edd..cbf3c7a38 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,37 +1,37 @@
 <template>
-  <div
-    v-if="totalNotificationsCount === 0"
-    class="notifications-menu-pointer"
-    @click.prevent="updateNotifications"
-  >
-    <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 }">
-      <ds-button
-        primary
-        icon="bell"
-        @click.prevent="
-          updateNotifications()
-          toggleMenu()
-        "
-      >
+  <div class="notifications-menu-pointer" @mouseover="hoverActive" @mouseleave="hover = false">
+    <!-- Wolle <div
+      v-if="totalNotificationsCount === 0"
+      class="notifications-menu-pointer"
+      @click.prevent="updateNotifications"
+    > -->
+    <div v-if="totalNotificationsCount === 0" class="notifications-menu-pointer" @click.prevent="">
+      <ds-button class="notifications-menu" disabled icon="bell">
         {{ unreadNotificationsCount }}
       </ds-button>
-    </template>
-    <template slot="popover">
-      <div class="notifications-menu-popover">
-        <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
-      </div>
-    </template>
-  </dropdown>
+    </div>
+    <dropdown v-else class="notifications-menu" :placement="placement">
+      <template slot="default" slot-scope="{ toggleMenu }">
+        <ds-button primary icon="bell" @click.prevent="callToggleMenu(toggleMenu)">
+          {{ unreadNotificationsCount }}
+        </ds-button>
+      </template>
+      <template slot="popover">
+        <div class="notifications-menu-popover">
+          <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
+        </div>
+      </template>
+    </dropdown>
+  </div>
 </template>
 
 <script>
 import Dropdown from '~/components/Dropdown'
-import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications'
+import {
+  NOTIFICATIONS_POLL_INTERVAL,
+  NOTIFICATIONS_UPDATE_CHECK_INTERVAL,
+  NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL,
+} from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 import NotificationList from '../NotificationList/NotificationList'
 
@@ -45,13 +45,21 @@ export default {
     return {
       displayedNotifications: [],
       notifications: [],
+      updateOn: false,
+      updateTicks: 0,
+      updateMenuReference: null,
+      hover: false,
     }
   },
   props: {
     placement: { type: String },
   },
   methods: {
-    async updateNotifications() {
+    updateNotifications() {
+      if (this.updateOn) return
+
+      console.log('hover updateNotifications')
+      this.updateOn = true
       try {
         this.$apollo.queries.notifications.refetch()
       } catch (err) {
@@ -75,6 +83,28 @@ export default {
         throw new Error(err)
       }
     },
+    hoverActive() {
+      if (this.hover) return
+
+      this.hover = true
+      this.updateNotifications()
+    },
+    callToggleMenu(toggleMenu) {
+      // Wolle this.updateNotifications()
+      if (this.updateMenuReference) return
+
+      this.updateTicks = 0
+      this.updateMenuReference = setInterval(() => {
+        console.log('check for update: ', this.updateOn, this.updateTicks)
+
+        if (!this.updateOn || NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL <= this.updateTicks) {
+          console.log('toggleMenu')
+          toggleMenu()
+          clearInterval(this.updateMenuReference)
+          this.updateMenuReference = null
+        } else this.updateTicks += NOTIFICATIONS_UPDATE_CHECK_INTERVAL
+      }, NOTIFICATIONS_UPDATE_CHECK_INTERVAL)
+    },
     equalNotification(a, b) {
       return a.from.id === b.from.id && a.createdAt === b.createdAt && a.reason === b.reason
     },
@@ -106,6 +136,7 @@ export default {
           return !this.displayedNotifications.find(oldN => this.equalNotification(newN, oldN))
         })
         this.displayedNotifications = newNotifications.concat(this.displayedNotifications)
+        this.updateOn = false
         return data.notifications
       },
     },
diff --git a/webapp/constants/notifications.js b/webapp/constants/notifications.js
index 3e88e7b92..8e9974ce0 100644
--- a/webapp/constants/notifications.js
+++ b/webapp/constants/notifications.js
@@ -1 +1,3 @@
-export const NOTIFICATIONS_POLL_INTERVAL = '60000'
+export const NOTIFICATIONS_POLL_INTERVAL = 60000
+export const NOTIFICATIONS_UPDATE_CHECK_INTERVAL = 100
+export const NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL = 2000

From a57d228c40b942cdfb8dc38d75f3af5520804153 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 27 Sep 2019 09:37:53 +0200
Subject: [PATCH 22/31] Remove update on click

---
 .../NotificationMenu/NotificationMenu.vue     | 50 +++++++------------
 webapp/constants/notifications.js             |  2 +-
 2 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index cbf3c7a38..0b600a701 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,15 +1,8 @@
 <template>
-  <div class="notifications-menu-pointer" @mouseover="hoverActive" @mouseleave="hover = false">
-    <!-- Wolle <div
-      v-if="totalNotificationsCount === 0"
-      class="notifications-menu-pointer"
-      @click.prevent="updateNotifications"
-    > -->
-    <div v-if="totalNotificationsCount === 0" class="notifications-menu-pointer" @click.prevent="">
-      <ds-button class="notifications-menu" disabled icon="bell">
-        {{ unreadNotificationsCount }}
-      </ds-button>
-    </div>
+  <div @mouseover="hoverUpdate" @mouseleave="hover = false">
+    <ds-button v-if="totalNotificationsCount === 0" class="notifications-menu" disabled icon="bell">
+      {{ unreadNotificationsCount }}
+    </ds-button>
     <dropdown v-else class="notifications-menu" :placement="placement">
       <template slot="default" slot-scope="{ toggleMenu }">
         <ds-button primary icon="bell" @click.prevent="callToggleMenu(toggleMenu)">
@@ -29,7 +22,7 @@
 import Dropdown from '~/components/Dropdown'
 import {
   NOTIFICATIONS_POLL_INTERVAL,
-  NOTIFICATIONS_UPDATE_CHECK_INTERVAL,
+  NOTIFICATIONS_CHECK_UPDATED_INTERVAL,
   NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL,
 } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
@@ -46,8 +39,8 @@ export default {
       displayedNotifications: [],
       notifications: [],
       updateOn: false,
-      updateTicks: 0,
-      updateMenuReference: null,
+      menuDelayTicks: 0,
+      menuTimerId: null,
       hover: false,
     }
   },
@@ -58,7 +51,6 @@ export default {
     updateNotifications() {
       if (this.updateOn) return
 
-      console.log('hover updateNotifications')
       this.updateOn = true
       try {
         this.$apollo.queries.notifications.refetch()
@@ -83,27 +75,25 @@ export default {
         throw new Error(err)
       }
     },
-    hoverActive() {
+    hoverUpdate() {
       if (this.hover) return
 
+      // update is triggered kind of one second before the user clicks
       this.hover = true
       this.updateNotifications()
     },
     callToggleMenu(toggleMenu) {
-      // Wolle this.updateNotifications()
-      if (this.updateMenuReference) return
+      if (this.menuTimerId) return
 
-      this.updateTicks = 0
-      this.updateMenuReference = setInterval(() => {
-        console.log('check for update: ', this.updateOn, this.updateTicks)
-
-        if (!this.updateOn || NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL <= this.updateTicks) {
-          console.log('toggleMenu')
+      // open menu after update is done, but latest after delay of "NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL"
+      this.menuDelayTicks = 0
+      this.menuTimerId = setInterval(() => {
+        if (!this.updateOn || NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL <= this.menuDelayTicks) {
           toggleMenu()
-          clearInterval(this.updateMenuReference)
-          this.updateMenuReference = null
-        } else this.updateTicks += NOTIFICATIONS_UPDATE_CHECK_INTERVAL
-      }, NOTIFICATIONS_UPDATE_CHECK_INTERVAL)
+          clearInterval(this.menuTimerId)
+          this.menuTimerId = null
+        } else this.menuDelayTicks += NOTIFICATIONS_CHECK_UPDATED_INTERVAL
+      }, NOTIFICATIONS_CHECK_UPDATED_INTERVAL)
     },
     equalNotification(a, b) {
       return a.from.id === b.from.id && a.createdAt === b.createdAt && a.reason === b.reason
@@ -150,10 +140,6 @@ export default {
   align-items: center;
 }
 
-.notifications-menu-pointer {
-  cursor: pointer;
-}
-
 .notifications-menu-popover {
   max-width: 500px;
 }
diff --git a/webapp/constants/notifications.js b/webapp/constants/notifications.js
index 8e9974ce0..771abd9e1 100644
--- a/webapp/constants/notifications.js
+++ b/webapp/constants/notifications.js
@@ -1,3 +1,3 @@
 export const NOTIFICATIONS_POLL_INTERVAL = 60000
-export const NOTIFICATIONS_UPDATE_CHECK_INTERVAL = 100
+export const NOTIFICATIONS_CHECK_UPDATED_INTERVAL = 100
 export const NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL = 2000

From 1f8cc9ef15a48c0709a8a268cb5fc7c9c1f5b2b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 27 Sep 2019 09:56:48 +0200
Subject: [PATCH 23/31] Sorted notifications after concatenation by Roberts
 suggestion

---
 .../NotificationMenu/NotificationMenu.vue              | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 0b600a701..cf9cd4514 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -125,7 +125,15 @@ export default {
         const newNotifications = data.notifications.filter(newN => {
           return !this.displayedNotifications.find(oldN => this.equalNotification(newN, oldN))
         })
-        this.displayedNotifications = newNotifications.concat(this.displayedNotifications)
+        this.displayedNotifications = newNotifications
+          .concat(this.displayedNotifications)
+          .sort((a, b) => {
+            return a.createdAt === b.createdAt
+              ? 0
+              : new Date(a.createdAt) < new Date(b.createdAt)
+              ? 1
+              : -1
+          })
         this.updateOn = false
         return data.notifications
       },

From 1543aa451078ef0fb4bb4f9572883ff1a3f864c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 27 Sep 2019 10:05:54 +0200
Subject: [PATCH 24/31] Refactored error reporting

---
 .../NotificationMenu/NotificationMenu.vue             | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index cf9cd4514..4708a687a 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -52,11 +52,7 @@ export default {
       if (this.updateOn) return
 
       this.updateOn = true
-      try {
-        this.$apollo.queries.notifications.refetch()
-      } catch (err) {
-        throw new Error(err)
-      }
+      this.$apollo.queries.notifications.refetch()
     },
     async markAsRead(notificationSourceId) {
       const variables = { id: notificationSourceId }
@@ -72,7 +68,7 @@ export default {
           return this.equalNotification(n, markAsRead) ? markAsRead : n
         })
       } catch (err) {
-        throw new Error(err)
+        this.$toast.error(err.message)
       }
     },
     hoverUpdate() {
@@ -137,6 +133,9 @@ export default {
         this.updateOn = false
         return data.notifications
       },
+      error(error) {
+        this.$toast.error(error)
+      },
     },
   },
 }

From cee0a27b14b5b5260d477de4bc9909dd58daa47d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 27 Sep 2019 13:10:23 +0200
Subject: [PATCH 25/31] Try to fix intermitent failing Cypress test for
 notification

---
 cypress/integration/common/steps.js                | 6 ++++--
 cypress/integration/notifications/Mentions.feature | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index d712ee9b1..a25200667 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -351,10 +351,12 @@ When("I log in with the following credentials:", table => {
 });
 
 When("open the notification menu and click on the first item", () => {
-  cy.get(".notifications-menu").click();
+  cy.get(".notifications-menu").invoke('show').click(); // "invoke('show')" because of the delay for show the menu
   cy.get(".notification-mention-post")
     .first()
-    .click();
+    .click({
+      force: true
+    });
 });
 
 Then("see {int} unread notifications in the top menu", count => {
diff --git a/cypress/integration/notifications/Mentions.feature b/cypress/integration/notifications/Mentions.feature
index d3c123863..7523e3d05 100644
--- a/cypress/integration/notifications/Mentions.feature
+++ b/cypress/integration/notifications/Mentions.feature
@@ -1,4 +1,4 @@
-Feature: Notifications for a mentions
+Feature: Notification for a mention
   As a user
   I want to be notified if sb. mentions me in a post or comment
   In order join conversations about or related to me

From 5cdd3587315e4c1e3667082b8b5d9dae9eaa7a10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 27 Sep 2019 16:53:48 +0200
Subject: [PATCH 26/31] Implement click update again, because of mobile has no
 hover

But I prevent multiple triggered updates for 10 seconds.
---
 .../NotificationMenu/NotificationMenu.vue     | 28 ++++++++++++++++---
 webapp/constants/notifications.js             |  1 +
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 4708a687a..5c24a82f3 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,8 +1,14 @@
 <template>
   <div @mouseover="hoverUpdate" @mouseleave="hover = false">
-    <ds-button v-if="totalNotificationsCount === 0" class="notifications-menu" disabled icon="bell">
-      {{ unreadNotificationsCount }}
-    </ds-button>
+    <div
+      v-if="totalNotificationsCount === 0"
+      class="notifications-menu-pointer"
+      @click.prevent="updateNotifications"
+    >
+      <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 }">
         <ds-button primary icon="bell" @click.prevent="callToggleMenu(toggleMenu)">
@@ -24,6 +30,7 @@ import {
   NOTIFICATIONS_POLL_INTERVAL,
   NOTIFICATIONS_CHECK_UPDATED_INTERVAL,
   NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL,
+  NOTIFICATIONS_UPDATE_PAUSE_INTERVAL,
 } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 import NotificationList from '../NotificationList/NotificationList'
@@ -39,6 +46,7 @@ export default {
       displayedNotifications: [],
       notifications: [],
       updateOn: false,
+      updatePause: false,
       menuDelayTicks: 0,
       menuTimerId: null,
       hover: false,
@@ -49,7 +57,7 @@ export default {
   },
   methods: {
     updateNotifications() {
-      if (this.updateOn) return
+      if (this.updateOn || this.updatePause) return
 
       this.updateOn = true
       this.$apollo.queries.notifications.refetch()
@@ -81,6 +89,7 @@ export default {
     callToggleMenu(toggleMenu) {
       if (this.menuTimerId) return
 
+      this.updateNotifications() // then the update works even on mobile by click and without hover
       // open menu after update is done, but latest after delay of "NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL"
       this.menuDelayTicks = 0
       this.menuTimerId = setInterval(() => {
@@ -131,6 +140,13 @@ export default {
               : -1
           })
         this.updateOn = false
+
+        // pause before next triggered update by "updateNotifications"
+        this.updatePause = true
+        setTimeout(() => {
+          this.updatePause = false
+        }, NOTIFICATIONS_UPDATE_PAUSE_INTERVAL)
+
         return data.notifications
       },
       error(error) {
@@ -147,6 +163,10 @@ export default {
   align-items: center;
 }
 
+.notifications-menu-pointer {
+  cursor: pointer;
+}
+
 .notifications-menu-popover {
   max-width: 500px;
 }
diff --git a/webapp/constants/notifications.js b/webapp/constants/notifications.js
index 771abd9e1..38c8bdf63 100644
--- a/webapp/constants/notifications.js
+++ b/webapp/constants/notifications.js
@@ -1,3 +1,4 @@
 export const NOTIFICATIONS_POLL_INTERVAL = 60000
 export const NOTIFICATIONS_CHECK_UPDATED_INTERVAL = 100
 export const NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL = 2000
+export const NOTIFICATIONS_UPDATE_PAUSE_INTERVAL = 10000

From e24d08f35bb90004635226ca6cce4d459039df03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 30 Sep 2019 10:06:51 +0200
Subject: [PATCH 27/31] Follow Roberts sorting suggestion

---
 .vscode/settings.json                                       | 2 +-
 .../notifications/NotificationMenu/NotificationMenu.vue     | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9acbf50bd..908252f41 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,6 @@
       "autoFix": true
     }
   ],
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "eslint.autoFixOnSave": true
 }
\ No newline at end of file
diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 5c24a82f3..1897688e1 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -133,11 +133,7 @@ export default {
         this.displayedNotifications = newNotifications
           .concat(this.displayedNotifications)
           .sort((a, b) => {
-            return a.createdAt === b.createdAt
-              ? 0
-              : new Date(a.createdAt) < new Date(b.createdAt)
-              ? 1
-              : -1
+            return new Date(b.createdAt) - new Date(a.createdAt)
           })
         this.updateOn = false
 

From 9a4187a6af72502a6cf4809d738e7c5e45a86aac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 30 Sep 2019 10:15:56 +0200
Subject: [PATCH 28/31] Remove update on hover and click by Roberts suggestion

---
 .../NotificationMenu/NotificationMenu.vue     | 85 +++----------------
 webapp/constants/notifications.js             |  3 -
 2 files changed, 14 insertions(+), 74 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 1897688e1..d32eb6c33 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,37 +1,24 @@
 <template>
-  <div @mouseover="hoverUpdate" @mouseleave="hover = false">
-    <div
-      v-if="totalNotificationsCount === 0"
-      class="notifications-menu-pointer"
-      @click.prevent="updateNotifications"
-    >
-      <ds-button class="notifications-menu" disabled icon="bell">
+  <ds-button v-if="totalNotificationsCount === 0" class="notifications-menu" disabled icon="bell">
+    {{ unreadNotificationsCount }}
+  </ds-button>
+  <dropdown v-else class="notifications-menu" :placement="placement">
+    <template slot="default" slot-scope="{ toggleMenu }">
+      <ds-button primary icon="bell" @click.prevent="toggleMenu">
         {{ unreadNotificationsCount }}
       </ds-button>
-    </div>
-    <dropdown v-else class="notifications-menu" :placement="placement">
-      <template slot="default" slot-scope="{ toggleMenu }">
-        <ds-button primary icon="bell" @click.prevent="callToggleMenu(toggleMenu)">
-          {{ unreadNotificationsCount }}
-        </ds-button>
-      </template>
-      <template slot="popover">
-        <div class="notifications-menu-popover">
-          <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
-        </div>
-      </template>
-    </dropdown>
-  </div>
+    </template>
+    <template slot="popover">
+      <div class="notifications-menu-popover">
+        <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
+      </div>
+    </template>
+  </dropdown>
 </template>
 
 <script>
 import Dropdown from '~/components/Dropdown'
-import {
-  NOTIFICATIONS_POLL_INTERVAL,
-  NOTIFICATIONS_CHECK_UPDATED_INTERVAL,
-  NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL,
-  NOTIFICATIONS_UPDATE_PAUSE_INTERVAL,
-} from '~/constants/notifications'
+import { NOTIFICATIONS_POLL_INTERVAL } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 import NotificationList from '../NotificationList/NotificationList'
 
@@ -45,23 +32,12 @@ export default {
     return {
       displayedNotifications: [],
       notifications: [],
-      updateOn: false,
-      updatePause: false,
-      menuDelayTicks: 0,
-      menuTimerId: null,
-      hover: false,
     }
   },
   props: {
     placement: { type: String },
   },
   methods: {
-    updateNotifications() {
-      if (this.updateOn || this.updatePause) return
-
-      this.updateOn = true
-      this.$apollo.queries.notifications.refetch()
-    },
     async markAsRead(notificationSourceId) {
       const variables = { id: notificationSourceId }
       try {
@@ -79,27 +55,6 @@ export default {
         this.$toast.error(err.message)
       }
     },
-    hoverUpdate() {
-      if (this.hover) return
-
-      // update is triggered kind of one second before the user clicks
-      this.hover = true
-      this.updateNotifications()
-    },
-    callToggleMenu(toggleMenu) {
-      if (this.menuTimerId) return
-
-      this.updateNotifications() // then the update works even on mobile by click and without hover
-      // open menu after update is done, but latest after delay of "NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL"
-      this.menuDelayTicks = 0
-      this.menuTimerId = setInterval(() => {
-        if (!this.updateOn || NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL <= this.menuDelayTicks) {
-          toggleMenu()
-          clearInterval(this.menuTimerId)
-          this.menuTimerId = null
-        } else this.menuDelayTicks += NOTIFICATIONS_CHECK_UPDATED_INTERVAL
-      }, NOTIFICATIONS_CHECK_UPDATED_INTERVAL)
-    },
     equalNotification(a, b) {
       return a.from.id === b.from.id && a.createdAt === b.createdAt && a.reason === b.reason
     },
@@ -135,14 +90,6 @@ export default {
           .sort((a, b) => {
             return new Date(b.createdAt) - new Date(a.createdAt)
           })
-        this.updateOn = false
-
-        // pause before next triggered update by "updateNotifications"
-        this.updatePause = true
-        setTimeout(() => {
-          this.updatePause = false
-        }, NOTIFICATIONS_UPDATE_PAUSE_INTERVAL)
-
         return data.notifications
       },
       error(error) {
@@ -159,10 +106,6 @@ export default {
   align-items: center;
 }
 
-.notifications-menu-pointer {
-  cursor: pointer;
-}
-
 .notifications-menu-popover {
   max-width: 500px;
 }
diff --git a/webapp/constants/notifications.js b/webapp/constants/notifications.js
index 38c8bdf63..190bb64f8 100644
--- a/webapp/constants/notifications.js
+++ b/webapp/constants/notifications.js
@@ -1,4 +1 @@
 export const NOTIFICATIONS_POLL_INTERVAL = 60000
-export const NOTIFICATIONS_CHECK_UPDATED_INTERVAL = 100
-export const NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL = 2000
-export const NOTIFICATIONS_UPDATE_PAUSE_INTERVAL = 10000

From ab3a5f0523ec15e22840853d8f4393d8bd112ae2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 30 Sep 2019 11:31:36 +0200
Subject: [PATCH 29/31] =?UTF-8?q?Haven=E2=80=99t=20seen=20this=20is=20alre?=
 =?UTF-8?q?ady=20in=20master?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 908252f41..2091e5e03 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,6 @@
       "autoFix": true
     }
   ],
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "eslint.autoFixOnSave": true
-}
\ No newline at end of file
+}

From 59b8a6ce5484d82931256bd35bba370a53e2b140 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 30 Sep 2019 11:33:21 +0200
Subject: [PATCH 30/31] Delete LF


From 0e2a0af7bf311785eae1545122de855c6dc9b847 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Mon, 30 Sep 2019 17:24:57 +0200
Subject: [PATCH 31/31] feat: no primary button for unread notifications

@Tirokk if find this better, because a primary button always wants to be
clicked.
---
 .../NotificationMenu/NotificationMenu.spec.js | 40 +++++++++++++++++++
 .../NotificationMenu/NotificationMenu.vue     |  6 +--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
index 93b56b8a2..2145b7d6e 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.spec.js
@@ -46,6 +46,41 @@ describe('NotificationMenu.vue', () => {
       expect(wrapper.contains('.dropdown')).toBe(false)
     })
 
+    describe('given only unread notifications', () => {
+      beforeEach(() => {
+        data = () => {
+          return {
+            displayedNotifications: [
+              {
+                id: 'notification-41',
+                read: true,
+                post: {
+                  id: 'post-1',
+                  title: 'some post title',
+                  contentExcerpt: 'this is a post content',
+                  author: {
+                    id: 'john-1',
+                    slug: 'john-doe',
+                    name: 'John Doe',
+                  },
+                },
+              },
+            ],
+          }
+        }
+      })
+
+      it('counter displays 0', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('ds-button-stub').text()).toEqual('0')
+      })
+
+      it('button is not primary', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('ds-button-stub').props('primary')).toBe(false)
+      })
+    })
+
     describe('given some notifications', () => {
       beforeEach(() => {
         data = () => {
@@ -102,6 +137,11 @@ describe('NotificationMenu.vue', () => {
         wrapper = Wrapper()
         expect(wrapper.find('ds-button-stub').text()).toEqual('2')
       })
+
+      it('renders primary button', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('ds-button-stub').props('primary')).toBe(true)
+      })
     })
   })
 })
diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index d32eb6c33..9c3ed0bd7 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,10 +1,10 @@
 <template>
-  <ds-button v-if="totalNotificationsCount === 0" class="notifications-menu" disabled icon="bell">
+  <ds-button v-if="!notificationsCount" class="notifications-menu" disabled icon="bell">
     {{ unreadNotificationsCount }}
   </ds-button>
   <dropdown v-else class="notifications-menu" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
-      <ds-button primary icon="bell" @click.prevent="toggleMenu">
+      <ds-button :primary="!!unreadNotificationsCount" icon="bell" @click.prevent="toggleMenu">
         {{ unreadNotificationsCount }}
       </ds-button>
     </template>
@@ -60,7 +60,7 @@ export default {
     },
   },
   computed: {
-    totalNotificationsCount() {
+    notificationsCount() {
       return (this.displayedNotifications || []).length
     },
     unreadNotificationsCount() {