unread room count in store

webapp/components/Chat/Chat.vue

@@ -60,10 +60,10 @@
 </template>
 
 <script>
-import { roomQuery, createRoom } from '~/graphql/Rooms'
+import { roomQuery, createRoom, unreadRoomsQuery } from '~/graphql/Rooms'
 import { messageQuery, createMessageMutation, markMessagesAsSeen } from '~/graphql/Messages'
 import chatStyle from '~/constants/chat.js'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 
 export default {
   name: 'Chat',
@@ -85,19 +85,19 @@ export default {
           title: 'Just a dummy item',
         },
         /*
-        {
-          name: 'inviteUser',
-          title: 'Invite User',
-        },
-        {
-          name: 'removeUser',
-          title: 'Remove User',
-        },
-        {
-          name: 'deleteRoom',
-          title: 'Delete Room',
-        },
-        */
+            {
+            name: 'inviteUser',
+            title: 'Invite User',
+            },
+            {
+            name: 'removeUser',
+            title: 'Remove User',
+            },
+            {
+            name: 'deleteRoom',
+            title: 'Delete Room',
+            },
+          */
       ],
       messageActions: [
         /*
@@ -195,6 +195,9 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({
+      commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT',
+    }),
     async fetchRooms({ room } = {}) {
       this.roomsLoaded = false
       const offset = this.roomPage * this.roomPageSize
@@ -257,12 +260,20 @@ export default {
 
         const newMsgIds = Message.filter((m) => m.seen === false).map((m) => m.id)
         if (newMsgIds.length) {
-          this.$apollo.mutate({
+          await this.$apollo.mutate({
             mutation: markMessagesAsSeen(),
             variables: {
               messageIds: newMsgIds,
             },
           })
+          this.$apollo
+            .query({
+              query: unreadRoomsQuery(),
+              fetchPolicy: 'network-only',
+            })
+            .then(({ data: { UnreadRooms } }) => {
+              this.commitUnreadRoomCount(UnreadRooms)
+            })
         }
 
         const msgs = []

webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue

@@ -8,13 +8,13 @@
         placement: 'bottom-start',
       }"
     >
-      <counter-icon icon="chat-bubble" :count="count" danger />
+      <counter-icon icon="chat-bubble" :count="unreadRoomCount" danger />
     </base-button>
   </nuxt-link>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import { unreadRoomsQuery, roomCountUpdated } from '~/graphql/Rooms'
 
@@ -23,14 +23,15 @@ export default {
   components: {
     CounterIcon,
   },
-  data() {
-    return {
-      count: 0,
-    }
-  },
   computed: {
     ...mapGetters({
       user: 'auth/user',
+      unreadRoomCount: 'chat/unreadRoomCount',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT',
     }),
   },
   apollo: {
@@ -39,7 +40,7 @@ export default {
         return unreadRoomsQuery()
       },
       update({ UnreadRooms }) {
-        this.count = UnreadRooms
+        this.commitUnreadRoomCount(UnreadRooms)
       },
       subscribeToMore: {
         document: roomCountUpdated(),

webapp/store/chat.js

@@ -2,6 +2,7 @@ export const state = () => {
   return {
     showChat: false,
     roomID: null,
+    unreadRoomCount: 0,
   }
 }
 
@@ -10,6 +11,9 @@ export const mutations = {
     state.showChat = ctx.showChat || false
     state.roomID = ctx.roomID || null
   },
+  UPDATE_ROOM_COUNT(state, count) {
+    state.unreadRoomCount = count
+  },
 }
 
 export const getters = {
@@ -19,4 +23,7 @@ export const getters = {
   roomID(state) {
     return state
   },
+  unreadRoomCount(state) {
+    return state.unreadRoomCount
+  },
 }