Merge branch 'master' into 6557-chat-reactive-language-switch

backend/src/graphql/messages.ts

@@ -16,10 +16,11 @@ export const createMessageMutation = () => {
 
 export const messageQuery = () => {
   return gql`
-    query ($roomId: ID!) {
+    query ($roomId: ID!, $first: Int, $offset: Int) {
-      Message(roomId: $roomId) {
+      Message(roomId: $roomId, first: $first, offset: $offset, orderBy: createdAt_desc) {
         _id
         id
+        indexId
         content
         senderId
         username

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

@@ -215,6 +215,7 @@ describe('Message', () => {
                 {
                   id: expect.any(String),
                   _id: result.data.Message[0].id,
+                  indexId: 0,
                   content: 'Some nice message to other chatting user',
                   senderId: 'chatting-user',
                   username: 'Chatting User',
@@ -259,9 +260,10 @@ describe('Message', () => {
             ).resolves.toMatchObject({
               errors: undefined,
               data: {
-                Message: expect.arrayContaining([
+                Message: [
                   expect.objectContaining({
                     id: expect.any(String),
+                    indexId: 0,
                     content: 'Some nice message to other chatting user',
                     senderId: 'chatting-user',
                     username: 'Chatting User',
@@ -273,6 +275,7 @@ describe('Message', () => {
                   }),
                   expect.objectContaining({
                     id: expect.any(String),
+                    indexId: 1,
                     content: 'A nice response message to chatting user',
                     senderId: 'other-chatting-user',
                     username: 'Other Chatting User',
@@ -284,6 +287,7 @@ describe('Message', () => {
                   }),
                   expect.objectContaining({
                     id: expect.any(String),
+                    indexId: 2,
                     content: 'And another nice message to other chatting user',
                     senderId: 'chatting-user',
                     username: 'Chatting User',
@@ -293,7 +297,70 @@ describe('Message', () => {
                     distributed: false,
                     seen: false,
                   }),
-                ]),
+                ],
+              },
+            })
+          })
+
+          it('returns the messages paginated', async () => {
+            await expect(
+              query({
+                query: messageQuery(),
+                variables: {
+                  roomId,
+                  first: 2,
+                  offset: 0,
+                },
+              }),
+            ).resolves.toMatchObject({
+              errors: undefined,
+              data: {
+                Message: [
+                  expect.objectContaining({
+                    id: expect.any(String),
+                    indexId: 1,
+                    content: 'A nice response message to chatting user',
+                    senderId: 'other-chatting-user',
+                    username: 'Other Chatting User',
+                    avatar: expect.any(String),
+                    date: expect.any(String),
+                  }),
+                  expect.objectContaining({
+                    id: expect.any(String),
+                    indexId: 2,
+                    content: 'And another nice message to other chatting user',
+                    senderId: 'chatting-user',
+                    username: 'Chatting User',
+                    avatar: expect.any(String),
+                    date: expect.any(String),
+                  }),
+                ],
+              },
+            })
+
+            await expect(
+              query({
+                query: messageQuery(),
+                variables: {
+                  roomId,
+                  first: 2,
+                  offset: 2,
+                },
+              }),
+            ).resolves.toMatchObject({
+              errors: undefined,
+              data: {
+                Message: [
+                  expect.objectContaining({
+                    id: expect.any(String),
+                    indexId: 0,
+                    content: 'Some nice message to other chatting user',
+                    senderId: 'chatting-user',
+                    username: 'Chatting User',
+                    avatar: expect.any(String),
+                    date: expect.any(String),
+                  }),
+                ],
               },
             })
           })

backend/src/schema/resolvers/messages.ts

@@ -13,6 +13,7 @@ export default {
           id: context.user.id,
         },
       }
+
       const resolved = await neo4jgraphql(object, params, context, resolveInfo)
 
       if (resolved) {
@@ -47,7 +48,7 @@ export default {
           }
         })
       }
-      return resolved
+      return resolved.reverse()
     },
   },
   Mutation: {
@@ -60,9 +61,12 @@ export default {
       const writeTxResultPromise = session.writeTransaction(async (transaction) => {
         const createMessageCypher = `
           MATCH (currentUser:User { id: $currentUserId })-[:CHATS_IN]->(room:Room { id: $roomId })
+          OPTIONAL MATCH (m:Message)-[:INSIDE]->(room)
+          WITH MAX(m.indexId) as maxIndex, room, currentUser
           CREATE (currentUser)-[:CREATED]->(message:Message {
             createdAt: toString(datetime()),
             id: apoc.create.uuid(),
+            indexId: CASE WHEN maxIndex IS NOT NULL THEN maxIndex + 1 ELSE 0 END,
             content: $content,
             saved: true,
             distributed: false,

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

@@ -2,8 +2,14 @@
 #   room: _RoomFilter
 # }
 
+enum _MessageOrdering {
+  createdAt_asc
+  createdAt_desc
+}
+
 type Message {
   id: ID!
+  indexId: Int!
   createdAt: String
   updatedAt: String
 
@@ -32,5 +38,10 @@ type Mutation {
 }
 
 type Query {
-  Message(roomId: ID!): [Message]
+  Message(
+    roomId: ID!,
+    first: Int
+    offset: Int
+    orderBy: [_MessageOrdering]
+  ): [Message]
 }

webapp/components/Chat/Chat.vue

@@ -22,6 +22,7 @@
         @fetch-messages="fetchMessages($event.detail[0])"
         :responsive-breakpoint="responsiveBreakpoint"
         :single-room="singleRoom"
+        show-reaction-emojis="false"
         @show-demo-options="showDemoOptions = $event"
       >
         <div slot="menu-icon" @click.prevent.stop="$emit('close-single-room', true)">
@@ -92,17 +93,20 @@ export default {
         {
           name: 'deleteRoom',
           title: 'Delete Room',
-        }, */
+        },
+        */
       ],
       messageActions: [
-        // {
+        /*
-        //   name: 'addMessageToFavorite',
+        {
-        //   title: 'Add To Favorite',
+          name: 'addMessageToFavorite',
-        // },
+          title: 'Add To Favorite',
-        // {
+        },
-        //   name: 'shareMessage',
+        {
-        //   title: 'Share Message',
+          name: 'shareMessage',
-        // },
+          title: 'Share Message',
+        },
+        */
       ],
       templatesText: [
         {
@@ -131,6 +135,10 @@ export default {
       showDemoOptions: true,
       responsiveBreakpoint: 600,
       singleRoom: !!this.singleRoomId || false,
+      messagePage: 0,
+      messagePageSize: 20,
+      roomPage: 0,
+      roomPageSize: 999, // TODO pagination is a problem with single rooms - cant use
       selectedRoom: null,
     }
   },
@@ -181,32 +189,48 @@ export default {
     },
   },
   methods: {
-    fetchMessages({ room, options = {} }) {
+    async fetchMessages({ room, options = {} }) {
-      this.messagesLoaded = false
+      if (this.selectedRoom !== room.id) {
-      setTimeout(async () => {
+        this.messages = []
-        try {
+        this.messagePage = 0
-          const {
+        this.selectedRoom = room.id
-            data: { Message },
+      }
-          } = await this.$apollo.query({
+      this.messagesLoaded = options.refetch ? this.messagesLoaded : false
-            query: messageQuery(),
+      const offset = (options.refetch ? 0 : this.messagePage) * this.messagePageSize
-            variables: {
+      try {
-              roomId: room.id,
+        const {
-            },
+          data: { Message },
-            fetchPolicy: 'no-cache',
+        } = await this.$apollo.query({
-          })
+          query: messageQuery(),
-          this.messages = Message
+          variables: {
-        } catch (error) {
+            roomId: room.id,
-          this.messages = []
+            first: this.messagePageSize,
-          this.$toast.error(error.message)
+            offset,
-        }
+          },
-        this.messagesLoaded = true
+          fetchPolicy: 'no-cache',
+        })
 
-        this.selectedRoom = room
+        const msgs = []
-      })
+        ;[...this.messages, ...Message].forEach((m) => {
+          msgs[m.indexId] = m
+        })
+        this.messages = msgs.filter(Boolean)
+
+        if (Message.length < this.messagePageSize) {
+          this.messagesLoaded = true
+        }
+        this.messagePage += 1
+      } catch (error) {
+        this.messages = []
+        this.$toast.error(error.message)
+      }
     },
 
     refetchMessage(roomId) {
-      this.fetchMessages({ room: this.rooms.find((r) => r.roomId === roomId) })
+      this.fetchMessages({
+        room: this.rooms.find((r) => r.roomId === roomId),
+        options: { refetch: true },
+      })
     },
 
     async sendMessage(message) {
@@ -234,6 +258,12 @@ export default {
       query() {
         return roomQuery()
       },
+      variables() {
+        return {
+          first: this.roomPageSize,
+          offset: this.roomPage * this.roomPageSize,
+        }
+      },
       update({ Room }) {
         if (!Room) {
           this.rooms = []

webapp/graphql/Messages.js

@@ -2,10 +2,11 @@ import gql from 'graphql-tag'
 
 export const messageQuery = () => {
   return gql`
-    query ($roomId: ID!) {
+    query ($roomId: ID!, $first: Int, $offset: Int) {
-      Message(roomId: $roomId) {
+      Message(roomId: $roomId, first: $first, offset: $offset, orderBy: createdAt_desc) {
         _id
         id
+        indexId
         senderId
         content
         author {

webapp/graphql/Rooms.js

@@ -1,8 +1,8 @@
 import gql from 'graphql-tag'
 
 export const roomQuery = () => gql`
-  query {
+  query Room($first: Int, $offset: Int) {
-    Room {
+    Room(first: $first, offset: $offset) {
       id
       roomId
       roomName