Implement NotificationList without store implement

backend/src/seed/seed-db.js

@@ -102,7 +102,7 @@ import Factory from './factories'
       asTick.create('Post',      { id: 'p9' }),
       asTrick.create('Post',     { id: 'p10' }),
       asTrack.create('Post',     { id: 'p11' }),
-      asAdmin.create('Post',     { id: 'p12' }),
+      asAdmin.create('Post',     { id: 'p12', content: `Hey @jenny-rostock, here is another notification for you! ${faker.lorem.paragraph()}` }),
       asModerator.create('Post', { id: 'p13' }),
       asUser.create('Post',      { id: 'p14' }),
       asTick.create('Post',      { id: 'p15' })

webapp/components/notifications/NotificationList.spec.js

@@ -118,21 +118,15 @@ describe('NotificationList.vue', () => {
     describe('click on a notification', () => {
       beforeEach(() => {
         wrapper
-          .findAll('a')
+          .findAll(Notification)
           .at(1)
           .trigger('click')
       })
 
       it('marks notification as read', () => {
-        expect(actions['notifications/markAsRead'].mock.calls[0][1]).toEqual(42)
+        expect(actions['notifications/markAsRead'].mock.calls[0][1]).toEqual(
-      })
+          'notification-42'
-
+        )
-      describe('given mutation resolves', () => {
-        it.skip('updates currentUser.notifications', () => {})
-      })
-
-      describe('given mutation rejects', () => {
-        it.skip('displays error warning', () => {})
       })
     })
   })

webapp/components/notifications/NotificationList.vue

@@ -4,7 +4,7 @@
       v-for="notification in notifications"
       :key="notification.id"
       :notification="notification"
-      @read="markAsRead(42)"
+      @read="markAsRead(notification.id)"
     />
   </div>
 </template>

webapp/store/notifications.js

@@ -1,5 +1,18 @@
+import gql from 'graphql-tag'
 export const actions = {
-  async markAsRead(_, notificationId) {
+  async markAsRead({ commit, rootGetters }, notificationId) {
-    console.log('notificationId', notificationId)
+    const client = this.app.apolloProvider.defaultClient
+    const mutation = gql(`
+      mutation($id: ID!, $read: Boolean!) {
+        UpdateNotification(id: $id, read: $read) {
+          id
+          read
+        }
+      }
+    `)
+    const variables = { id: notificationId, read: true }
+    const {
+      data: { UpdateNotification }
+    } = await client.mutate({ mutation, variables })
   }
 }