feat(webapp): mark messages as seen

webapp/components/Chat/Chat.vue

@@ -59,7 +59,7 @@
 
 <script>
 import { roomQuery, createRoom } from '~/graphql/Rooms'
-import { messageQuery, createMessageMutation } from '~/graphql/Messages'
+import { messageQuery, createMessageMutation, markMessagesAsSeen } from '~/graphql/Messages'
 import chatStyle from '~/constants/chat.js'
 import { mapGetters } from 'vuex'
 
@@ -208,8 +208,19 @@ export default {
           fetchPolicy: 'no-cache',
         })
 
+        const newMsgIds = Message.filter((m) => m.seen === false).map((m) => m.id)
+        if (newMsgIds.length) {
+          this.$apollo.mutate({
+            mutation: markMessagesAsSeen(),
+            variables: {
+              messageIds: newMsgIds,
+            },
+          })
+        }
+
         const msgs = []
         ;[...this.messages, ...Message].forEach((m) => {
+          m.seen = true
           msgs[m.indexId] = m
         })
         this.messages = msgs.filter(Boolean)

webapp/graphql/Messages.js

@@ -27,3 +27,11 @@ export const createMessageMutation = () => {
     }
   `
 }
+
+export const markMessagesAsSeen = () => {
+  return gql`
+    mutation ($messageIds: [String!]) {
+      MarkMessagesAsSeen(messageIds: $messageIds)
+    }
+  `
+}