From f9da7622538d0d73a974ad91b999eba26da8d357 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Fri, 14 Jul 2023 10:42:20 +0200 Subject: [PATCH 01/18] implemented chat seed --- backend/src/db/seed.ts | 86 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) diff --git a/backend/src/db/seed.ts b/backend/src/db/seed.ts index a717ff7a6..425c9e28c 100644 --- a/backend/src/db/seed.ts +++ b/backend/src/db/seed.ts @@ -11,6 +11,8 @@ import { changeGroupMemberRoleMutation, } from '../graphql/groups' import { createPostMutation } from '../graphql/posts' +import { createRoomMutation } from '../graphql/rooms' +import { createMessageMutation } from '../graphql/messages' import { createCommentMutation } from '../graphql/comments' import { categories } from '../constants/categories' @@ -1553,6 +1555,90 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl'] ) await Factory.build('donations') + + // Chat + authenticatedUser = await huey.toJson() + const { data: roomHueyPeter } = await mutate({ + mutation: createRoomMutation(), + variables: { + userId: (await peterLustig.toJson()).id, + }, + }) + + for (let i = 0; i < 30; i++) { + authenticatedUser = await huey.toJson() + await mutate({ + mutation: createMessageMutation(), + variables: { + roomId: roomHueyPeter?.CreateRoom.id, + content: faker.lorem.sentence(), + }, + }) + authenticatedUser = await peterLustig.toJson() + await mutate({ + mutation: createMessageMutation(), + variables: { + roomId: roomHueyPeter?.CreateRoom.id, + content: faker.lorem.sentence(), + }, + }) + } + + authenticatedUser = await huey.toJson() + const { data: roomHueyJenny } = await mutate({ + mutation: createRoomMutation(), + variables: { + userId: (await jennyRostock.toJson()).id, + }, + }) + for (let i = 0; i < 10000; i++) { + authenticatedUser = await huey.toJson() + await mutate({ + mutation: createMessageMutation(), + variables: { + roomId: roomHueyJenny?.CreateRoom.id, + content: faker.lorem.sentence(), + }, + }) + authenticatedUser = await jennyRostock.toJson() + await mutate({ + mutation: createMessageMutation(), + variables: { + roomId: roomHueyJenny?.CreateRoom.id, + content: faker.lorem.sentence(), + }, + }) + } + + for (const user of additionalUsers) { + authenticatedUser = await jennyRostock.toJson() + const { data: room } = await mutate({ + mutation: createRoomMutation(), + variables: { + userId: (await user.toJson()).id, + }, + }) + + for (let i = 0; i < 30; i++) { + authenticatedUser = await jennyRostock.toJson() + await mutate({ + mutation: createMessageMutation(), + variables: { + roomId: room?.CreateRoom.id, + content: faker.lorem.sentence(), + }, + }) + authenticatedUser = await user.toJson() + await mutate({ + mutation: createMessageMutation(), + variables: { + roomId: room?.CreateRoom.id, + content: faker.lorem.sentence(), + }, + }) + } + } + /* eslint-disable-next-line no-console */ console.log('Seeded Data...') await driver.close() From eae7b53adf79de8e87ee1fa1acf050de9e36b540 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Fri, 14 Jul 2023 10:56:02 +0200 Subject: [PATCH 02/18] reduce message count to 1000 instead of 10000 to reduce seed time --- backend/src/db/seed.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/src/db/seed.ts b/backend/src/db/seed.ts index 425c9e28c..cf3f43ee9 100644 --- a/backend/src/db/seed.ts +++ b/backend/src/db/seed.ts @@ -1591,7 +1591,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl'] userId: (await jennyRostock.toJson()).id, }, }) - for (let i = 0; i < 10000; i++) { + for (let i = 0; i < 1000; i++) { authenticatedUser = await huey.toJson() await mutate({ mutation: createMessageMutation(), From 55b3bc999a57588e90ba90fba71052b83d919e3e Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Fri, 14 Jul 2023 10:59:38 +0200 Subject: [PATCH 03/18] use a prime for seeding to allow testing of the pagination --- backend/src/db/seed.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/src/db/seed.ts b/backend/src/db/seed.ts index cf3f43ee9..7286683dd 100644 --- a/backend/src/db/seed.ts +++ b/backend/src/db/seed.ts @@ -1619,7 +1619,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl'] }, }) - for (let i = 0; i < 30; i++) { + for (let i = 0; i < 29; i++) { authenticatedUser = await jennyRostock.toJson() await mutate({ mutation: createMessageMutation(), From f05a0bc5448bbd55116283d928b82d1381955412 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Sat, 15 Jul 2023 10:38:19 +0200 Subject: [PATCH 04/18] frontend paginate rooms --- webapp/components/Chat/Chat.vue | 108 +++++++++++++++++--------------- webapp/graphql/Rooms.js | 4 +- 2 files changed, 60 insertions(+), 52 deletions(-) diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index 95bf5da95..437f8bcf1 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -13,13 +13,15 @@ :messages-loaded="messagesLoaded" :rooms="JSON.stringify(rooms)" :room-actions="JSON.stringify(roomActions)" - :rooms-loaded="true" + :rooms-loaded="roomsLoaded" + :loading-rooms="loadingRooms" show-files="false" show-audio="false" :styles="JSON.stringify(computedChatStyle)" :show-footer="true" @send-message="sendMessage($event.detail[0])" @fetch-messages="fetchMessages($event.detail[0])" + @fetch-more-rooms="fetchRooms" :responsive-breakpoint="responsiveBreakpoint" :single-room="singleRoom" show-reaction-emojis="false" @@ -143,17 +145,20 @@ export default { { name: 'deleteRoom', title: 'Delete Room' }, */ ], - rooms: [], - messages: [], - messagesLoaded: true, + showDemoOptions: true, responsiveBreakpoint: 600, + rooms: [], + roomsLoaded: false, + roomPage: 0, + roomPageSize: 10, // TODO pagination is a problem with single rooms - cant use singleRoom: !!this.singleRoomId || false, + selectedRoom: null, + loadingRooms: true, + messagesLoaded: false, messagePage: 0, messagePageSize: 20, - roomPage: 0, - roomPageSize: 999, // TODO pagination is a problem with single rooms - cant use - selectedRoom: null, + messages: [], } }, mounted() { @@ -165,8 +170,8 @@ export default { userId: this.singleRoomId, }, }) - .then(() => { - this.$apollo.queries.Rooms.refetch() + .then(({data: { CreateRoom }}) => { + this.fetchRooms({room: CreateRoom}) }) .catch((error) => { this.$toast.error(error) @@ -174,6 +179,8 @@ export default { .finally(() => { // this.loading = false }) + } else { + this.fetchRooms() } }, computed: { @@ -181,12 +188,52 @@ export default { currentUser: 'auth/user', }), computedChatStyle() { - // TODO light/dark theme still needed? - // return this.theme === 'light' ? chatStyle.STYLE.light : chatStyle.STYLE.dark return chatStyle.STYLE.light }, }, methods: { + async fetchRooms({ room } = {}){ + console.log(room) + this.roomsLoaded = false + const offset = this.roomPage * this.roomPageSize + try { + const { + data: { Room }, + } = await this.$apollo.query({ + query: roomQuery(), + variables: { + id: room?.id, + first: this.roomPageSize, + offset, + }, + fetchPolicy: 'no-cache', + }) + + console.log(Room) + const rooms = [] + const newRooms = Room.map((r) => { + return { + ...r, + users: r.users.map((u) => { + return { ...u, username: u.name, avatar: u.avatar?.url } + }), + } + }) + + this.rooms = [...this.rooms, ...newRooms] + + if (Room.length < this.roomPageSize) { + this.roomsLoaded = true + } + this.roomPage += 1 + } catch (error) { + this.rooms = [] + this.$toast.error(error.message) + } + // must be set false after initial rooms are loaded and never changed again + this.loadingRooms = false + }, + async fetchMessages({ room, options = {} }) { if (this.selectedRoom !== room.id) { this.messages = [] @@ -251,45 +298,6 @@ export default { return fullname.match(/\b\w/g).join('').substring(0, 3).toUpperCase() }, }, - apollo: { - Rooms: { - query() { - return roomQuery() - }, - variables() { - return { - first: this.roomPageSize, - offset: this.roomPage * this.roomPageSize, - } - }, - update({ Room }) { - if (!Room) { - this.rooms = [] - return - } - - // Backend result needs mapping of the following values - // room[i].users[j].name -> room[i].users[j].username - // room[i].users[j].avatar.url -> room[i].users[j].avatar - // also filter rooms for the single room - this.rooms = Room.map((r) => { - return { - ...r, - users: r.users.map((u) => { - return { ...u, username: u.name, avatar: u.avatar?.url } - }), - } - }).filter((r) => - this.singleRoom ? r.users.filter((u) => u.id === this.singleRoomId).length > 0 : true, - ) - }, - error(error) { - this.rooms = [] - this.$toast.error(error.message) - }, - fetchPolicy: 'no-cache', - }, - }, }