diff --git a/backend/src/graphql/messages.ts b/backend/src/graphql/messages.ts index 34c7d559b..ca5ffb952 100644 --- a/backend/src/graphql/messages.ts +++ b/backend/src/graphql/messages.ts @@ -16,10 +16,11 @@ export const createMessageMutation = () => { export const messageQuery = () => { return gql` - query ($roomId: ID!) { - Message(roomId: $roomId) { + query ($roomId: ID!, $first: Int, $offset: Int) { + Message(roomId: $roomId, first: $first, offset: $offset, orderBy: createdAt_desc) { _id id + indexId content senderId username diff --git a/backend/src/schema/resolvers/messages.spec.ts b/backend/src/schema/resolvers/messages.spec.ts index 0deccb4e9..d0f1d7871 100644 --- a/backend/src/schema/resolvers/messages.spec.ts +++ b/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), + }), + ], }, }) }) diff --git a/backend/src/schema/resolvers/messages.ts b/backend/src/schema/resolvers/messages.ts index 45de0b4a4..a9937aac4 100644 --- a/backend/src/schema/resolvers/messages.ts +++ b/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, diff --git a/backend/src/schema/types/type/Message.gql b/backend/src/schema/types/type/Message.gql index 8b9263336..671c5523a 100644 --- a/backend/src/schema/types/type/Message.gql +++ b/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] } diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index eb7d7124a..2b36ebbcc 100644 --- a/webapp/components/Chat/Chat.vue +++ b/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" >
@@ -92,17 +93,20 @@ export default { { name: 'deleteRoom', title: 'Delete Room', - }, */ + }, + */ ], messageActions: [ - // { - // name: 'addMessageToFavorite', - // title: 'Add To Favorite', - // }, - // { - // name: 'shareMessage', - // title: 'Share Message', - // }, + /* + { + name: 'addMessageToFavorite', + title: 'Add To Favorite', + }, + { + 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 = {} }) { - this.messagesLoaded = false - setTimeout(async () => { - try { - const { - data: { Message }, - } = await this.$apollo.query({ - query: messageQuery(), - variables: { - roomId: room.id, - }, - fetchPolicy: 'no-cache', - }) - this.messages = Message - } catch (error) { - this.messages = [] - this.$toast.error(error.message) - } - this.messagesLoaded = true + async fetchMessages({ room, options = {} }) { + if (this.selectedRoom !== room.id) { + this.messages = [] + this.messagePage = 0 + this.selectedRoom = room.id + } + this.messagesLoaded = options.refetch ? this.messagesLoaded : false + const offset = (options.refetch ? 0 : this.messagePage) * this.messagePageSize + try { + const { + data: { Message }, + } = await this.$apollo.query({ + query: messageQuery(), + variables: { + roomId: room.id, + first: this.messagePageSize, + offset, + }, + 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 = [] diff --git a/webapp/graphql/Messages.js b/webapp/graphql/Messages.js index 41d647d4b..d017f816c 100644 --- a/webapp/graphql/Messages.js +++ b/webapp/graphql/Messages.js @@ -2,10 +2,11 @@ import gql from 'graphql-tag' export const messageQuery = () => { return gql` - query ($roomId: ID!) { - Message(roomId: $roomId) { + query ($roomId: ID!, $first: Int, $offset: Int) { + Message(roomId: $roomId, first: $first, offset: $offset, orderBy: createdAt_desc) { _id id + indexId senderId content author { diff --git a/webapp/graphql/Rooms.js b/webapp/graphql/Rooms.js index 7bab25509..e28702f77 100644 --- a/webapp/graphql/Rooms.js +++ b/webapp/graphql/Rooms.js @@ -1,8 +1,8 @@ import gql from 'graphql-tag' export const roomQuery = () => gql` - query { - Room { + query Room($first: Int, $offset: Int) { + Room(first: $first, offset: $offset) { id roomId roomName