Merge pull request #6586 from Ocelot-Social-Community/chat-notifications2

feat(backend): chat message added subscription

backend/src/graphql/rooms.ts

@@ -25,7 +25,7 @@ export const createRoomMutation = () => {
 export const roomQuery = () => {
   return gql`
     query Room($first: Int, $offset: Int, $id: ID) {
-      Room(first: $first, offset: $offset, id: $id, orderBy: createdAt_desc) {
+      Room(first: $first, offset: $offset, id: $id, orderBy: lastMessageAt_desc) {
         id
         roomId
         roomName

backend/src/middleware/chatMiddleware.ts

@@ -54,4 +54,7 @@ export default {
   Mutation: {
     CreateRoom: roomProperties,
   },
+  Subscription: {
+    chatMessageAdded: messageProperties,
+  },
 }

backend/src/schema/resolvers/messages.spec.ts

@@ -117,7 +117,7 @@ describe('Message', () => {
         })
 
         describe('user chats in room', () => {
-          it('returns the message and publishes subscription', async () => {
+          it('returns the message and publishes subscriptions', async () => {
             await expect(
               mutate({
                 mutation: createMessageMutation(),
@@ -146,6 +146,20 @@ describe('Message', () => {
               roomCountUpdated: '1',
               userId: 'other-chatting-user',
             })
+            expect(pubsubSpy).toBeCalledWith('CHAT_MESSAGE_ADDED', {
+              chatMessageAdded: expect.objectContaining({
+                id: expect.any(String),
+                content: 'Some nice message to other chatting user',
+                senderId: 'chatting-user',
+                username: 'Chatting User',
+                avatar: expect.any(String),
+                date: expect.any(String),
+                saved: true,
+                distributed: false,
+                seen: false,
+              }),
+              userId: 'other-chatting-user',
+            })
           })
 
           describe('room is updated as well', () => {

backend/src/schema/resolvers/messages.ts

@@ -1,7 +1,9 @@
 import { neo4jgraphql } from 'neo4j-graphql-js'
 import Resolver from './helpers/Resolver'
+
 import { getUnreadRoomsCount } from './rooms'
-import { pubsub, ROOM_COUNT_UPDATED } from '../../server'
+import { pubsub, ROOM_COUNT_UPDATED, CHAT_MESSAGE_ADDED } from '../../server'
+import { withFilter } from 'graphql-subscriptions'
 
 const setMessagesAsDistributed = async (undistributedMessagesIds, session) => {
   return session.writeTransaction(async (transaction) => {
@@ -19,6 +21,16 @@ const setMessagesAsDistributed = async (undistributedMessagesIds, session) => {
 }
 
 export default {
+  Subscription: {
+    chatMessageAdded: {
+      subscribe: withFilter(
+        () => pubsub.asyncIterator(CHAT_MESSAGE_ADDED),
+        (payload, variables) => {
+          return payload.userId === variables.userId
+        },
+      ),
+    },
+  },
   Query: {
     Message: async (object, params, context, resolveInfo) => {
       const { roomId } = params
@@ -102,10 +114,14 @@ export default {
           const roomCountUpdated = await getUnreadRoomsCount(message.recipientId, session)
 
           // send subscriptions
-          await pubsub.publish(ROOM_COUNT_UPDATED, {
+          void pubsub.publish(ROOM_COUNT_UPDATED, {
             roomCountUpdated,
             userId: message.recipientId,
           })
+          void pubsub.publish(CHAT_MESSAGE_ADDED, {
+            chatMessageAdded: message,
+            userId: message.recipientId,
+          })
         }
 
         return message

backend/src/schema/resolvers/rooms.spec.ts

@@ -423,125 +423,147 @@ describe('Room', () => {
     })
 
     it('returns the rooms paginated', async () => {
-      expect(await query({ query: roomQuery(), variables: { first: 3, offset: 0 } })).toMatchObject(
+      await expect(
-        {
+        query({ query: roomQuery(), variables: { first: 3, offset: 0 } }),
-          errors: undefined,
+      ).resolves.toMatchObject({
-          data: {
+        errors: undefined,
-            Room: [
+        data: {
-              {
+          Room: expect.arrayContaining([
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Third Chatting User',
+              lastMessageAt: null,
+              unreadCount: 0,
+              lastMessage: null,
+              users: expect.arrayContaining([
+                expect.objectContaining({
+                  _id: 'chatting-user',
+                  id: 'chatting-user',
+                  name: 'Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+                expect.objectContaining({
+                  _id: 'third-chatting-user',
+                  id: 'third-chatting-user',
+                  name: 'Third Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+              ]),
+            }),
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Second Chatting User',
+              lastMessageAt: null,
+              unreadCount: 0,
+              lastMessage: null,
+              users: expect.arrayContaining([
+                expect.objectContaining({
+                  _id: 'chatting-user',
+                  id: 'chatting-user',
+                  name: 'Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+                expect.objectContaining({
+                  _id: 'second-chatting-user',
+                  id: 'second-chatting-user',
+                  name: 'Second Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+              ]),
+            }),
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Other Chatting User',
+              lastMessageAt: expect.any(String),
+              unreadCount: 0,
+              lastMessage: {
+                _id: expect.any(String),
                 id: expect.any(String),
-                roomId: expect.any(String),
+                content: '2nd message to other chatting user',
-                roomName: 'Third Chatting User',
+                senderId: 'chatting-user',
-                users: expect.arrayContaining([
+                username: 'Chatting User',
-                  {
+                avatar: expect.any(String),
-                    _id: 'chatting-user',
+                date: expect.any(String),
-                    id: 'chatting-user',
+                saved: true,
-                    name: 'Chatting User',
+                distributed: false,
-                    avatar: {
+                seen: false,
-                      url: expect.any(String),
-                    },
-                  },
-                  {
-                    _id: 'third-chatting-user',
-                    id: 'third-chatting-user',
-                    name: 'Third Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                ]),
               },
-              {
+              users: expect.arrayContaining([
-                id: expect.any(String),
+                expect.objectContaining({
-                roomId: expect.any(String),
+                  _id: 'chatting-user',
-                roomName: 'Second Chatting User',
+                  id: 'chatting-user',
-                users: expect.arrayContaining([
+                  name: 'Chatting User',
-                  {
+                  avatar: {
-                    _id: 'chatting-user',
+                    url: expect.any(String),
-                    id: 'chatting-user',
-                    name: 'Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
                   },
-                  {
+                }),
-                    _id: 'second-chatting-user',
+                expect.objectContaining({
-                    id: 'second-chatting-user',
+                  _id: 'other-chatting-user',
-                    name: 'Second Chatting User',
+                  id: 'other-chatting-user',
-                    avatar: {
+                  name: 'Other Chatting User',
-                      url: expect.any(String),
+                  avatar: {
-                    },
+                    url: expect.any(String),
                   },
-                ]),
+                }),
-              },
+              ]),
-              {
+            }),
-                id: expect.any(String),
+          ]),
-                roomId: expect.any(String),
-                roomName: 'Not Chatting User',
-                users: expect.arrayContaining([
-                  {
-                    _id: 'chatting-user',
-                    id: 'chatting-user',
-                    name: 'Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                  {
-                    _id: 'not-chatting-user',
-                    id: 'not-chatting-user',
-                    name: 'Not Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                ]),
-              },
-            ],
-          },
         },
-      )
+      })
-      expect(await query({ query: roomQuery(), variables: { first: 3, offset: 3 } })).toMatchObject(
+      await expect(
-        {
+        query({ query: roomQuery(), variables: { first: 3, offset: 3 } }),
-          errors: undefined,
+      ).resolves.toMatchObject({
-          data: {
+        errors: undefined,
-            Room: [
+        data: {
-              {
+          Room: [
-                id: expect.any(String),
+            expect.objectContaining({
-                roomId: expect.any(String),
+              id: expect.any(String),
-                roomName: 'Other Chatting User',
+              roomId: expect.any(String),
-                users: expect.arrayContaining([
+              roomName: 'Not Chatting User',
-                  {
+              users: expect.arrayContaining([
-                    _id: 'chatting-user',
+                {
-                    id: 'chatting-user',
+                  _id: 'chatting-user',
-                    name: 'Chatting User',
+                  id: 'chatting-user',
-                    avatar: {
+                  name: 'Chatting User',
-                      url: expect.any(String),
+                  avatar: {
-                    },
+                    url: expect.any(String),
                   },
-                  {
+                },
-                    _id: 'other-chatting-user',
+                {
-                    id: 'other-chatting-user',
+                  _id: 'not-chatting-user',
-                    name: 'Other Chatting User',
+                  id: 'not-chatting-user',
-                    avatar: {
+                  name: 'Not Chatting User',
-                      url: expect.any(String),
+                  avatar: {
-                    },
+                    url: expect.any(String),
                   },
-                ]),
+                },
-              },
+              ]),
-            ],
+            }),
-          },
+          ],
         },
-      )
+      })
     })
   })
 
   describe('query single room', () => {
     let result: any = null
+
     beforeAll(async () => {
       authenticatedUser = await chattingUser.toJson()
       result = await query({ query: roomQuery() })
     })
+
     describe('as chatter of room', () => {
       it('returns the room', async () => {
         expect(
@@ -556,34 +578,19 @@ describe('Room', () => {
               {
                 id: expect.any(String),
                 roomId: expect.any(String),
-                roomName: 'Third Chatting User',
+                roomName: result.data.Room[0].roomName,
-                users: expect.arrayContaining([
+                users: expect.any(Array),
-                  {
-                    _id: 'chatting-user',
-                    id: 'chatting-user',
-                    name: 'Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                  {
-                    _id: 'third-chatting-user',
-                    id: 'third-chatting-user',
-                    name: 'Third Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                ]),
               },
             ],
           },
         })
       })
+
       describe('as not chatter of room', () => {
         beforeAll(async () => {
           authenticatedUser = await notChattingUser.toJson()
         })
+
         it('returns no room', async () => {
           authenticatedUser = await notChattingUser.toJson()
           expect(

backend/src/schema/types/type/Message.gql

@@ -44,3 +44,7 @@ type Query {
     orderBy: [_MessageOrdering]
   ): [Message]
 }
+
+type Subscription {
+  chatMessageAdded(userId: ID!): Message
+}

backend/src/schema/types/type/Room.gql

@@ -7,7 +7,7 @@
 
 # TODO change this to last message date
 enum _RoomOrdering {
-  createdAt_desc
+  lastMessageAt_desc
 }
 
 type Room {

backend/src/server.ts

@@ -14,7 +14,7 @@ import bodyParser from 'body-parser'
 import { graphqlUploadExpress } from 'graphql-upload'
 
 export const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED'
-// export const CHAT_MESSAGE_ADDED = 'CHAT_MESSAGE_ADDED'
+export const CHAT_MESSAGE_ADDED = 'CHAT_MESSAGE_ADDED'
 export const ROOM_COUNT_UPDATED = 'ROOM_COUNT_UPDATED'
 const { REDIS_DOMAIN, REDIS_PORT, REDIS_PASSWORD } = CONFIG
 let prodPubsub, devPubsub

webapp/components/Chat/Chat.vue

@@ -61,7 +61,12 @@
 
 <script>
 import { roomQuery, createRoom, unreadRoomsQuery } from '~/graphql/Rooms'
-import { messageQuery, createMessageMutation, markMessagesAsSeen } from '~/graphql/Messages'
+import {
+  messageQuery,
+  createMessageMutation,
+  chatMessageAdded,
+  markMessagesAsSeen,
+} from '~/graphql/Messages'
 import chatStyle from '~/constants/chat.js'
 import { mapGetters, mapMutations } from 'vuex'
 
@@ -169,6 +174,21 @@ export default {
     } else {
       this.fetchRooms()
     }
+
+    // Subscriptions
+    const observer = this.$apollo.subscribe({
+      query: chatMessageAdded(),
+      variables: {
+        userId: this.currentUser.id,
+      },
+    })
+
+    observer.subscribe({
+      next: this.chatMessageAdded,
+      error(error) {
+        this.$toast.error(error)
+      },
+    })
   },
   computed: {
     ...mapGetters({
@@ -297,6 +317,18 @@ export default {
       }
     },
 
+    async chatMessageAdded({ data }) {
+      if (data.chatMessageAdded.room.id === this.selectedRoom?.id) {
+        this.fetchMessages({ room: this.selectedRoom, options: { refetch: true } })
+      } else {
+        // TODO this might be optimized selectively (first page vs rest)
+        this.rooms = []
+        this.roomPage = 0
+        this.roomsLoaded = false
+        this.fetchRooms()
+      }
+    },
+
     async sendMessage(message) {
       // check for usersTag and change userid to username
       message.usersTag.forEach((userTag) => {

webapp/graphql/Messages.js

@@ -34,6 +34,32 @@ export const createMessageMutation = () => {
   `
 }
 
+export const chatMessageAdded = () => {
+  return gql`
+    subscription chatMessageAdded($userId: ID!) {
+      chatMessageAdded(userId: $userId) {
+        _id
+        id
+        indexId
+        content
+        senderId
+        author {
+          id
+        }
+        username
+        avatar
+        date
+        room {
+          id
+        }
+        saved
+        distributed
+        seen
+      }
+    }
+  `
+}
+
 export const markMessagesAsSeen = () => {
   return gql`
     mutation ($messageIds: [String!]) {

webapp/graphql/Rooms.js

@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 
 export const roomQuery = () => gql`
   query Room($first: Int, $offset: Int, $id: ID) {
-    Room(first: $first, offset: $offset, id: $id, orderBy: createdAt_desc) {
+    Room(first: $first, offset: $offset, id: $id, orderBy: lastMessageAt_desc) {
       id
       roomId
       roomName