diff --git a/backend/src/helpers/walkRecursive.ts b/backend/src/helpers/walkRecursive.ts index f560cf9cb..f3be67575 100644 --- a/backend/src/helpers/walkRecursive.ts +++ b/backend/src/helpers/walkRecursive.ts @@ -9,10 +9,9 @@ function walkRecursive(data, fields, fieldName, callback, _key?) { if (!Array.isArray(fields)) { throw new Error('please provide an fields array for the walkRecursive helper') } - if (data && typeof data === 'string' && fields.includes(_key)) { - // well we found what we searched for, lets replace the value with our callback result - const key = _key.split('!') - if (key.length === 1 || key[1] !== fieldName) data = callback(data, key[0]) + const fieldDef = fields.find((f) => f.field === _key) + if (data && typeof data === 'string' && fieldDef) { + if (!fieldDef.excludes?.includes(fieldName)) data = callback(data, _key) } else if (data && Array.isArray(data)) { // go into the rabbit hole and dig through that array data.forEach((res, index) => { diff --git a/backend/src/middleware/helpers/cleanHtml.ts b/backend/src/middleware/helpers/cleanHtml.ts index ac71f6bdc..84497760d 100644 --- a/backend/src/middleware/helpers/cleanHtml.ts +++ b/backend/src/middleware/helpers/cleanHtml.ts @@ -30,6 +30,7 @@ const standardSanitizeHtmlOptions = { 'strike', 'span', 'blockquote', + 'usertag', ], allowedAttributes: { a: ['href', 'class', 'target', 'data-*', 'contenteditable'], diff --git a/backend/src/middleware/xssMiddleware.ts b/backend/src/middleware/xssMiddleware.ts index ede0cc199..c10997e8d 100644 --- a/backend/src/middleware/xssMiddleware.ts +++ b/backend/src/middleware/xssMiddleware.ts @@ -3,11 +3,11 @@ import { cleanHtml } from '../middleware/helpers/cleanHtml' // exclamation mark separetes field names, that should not be sanitized const fields = [ - 'content', - 'contentExcerpt', - 'reasonDescription', - 'description!embed', - 'descriptionExcerpt', + { field: 'content', excludes: ['CreateMessage', 'Message'] }, + { field: 'contentExcerpt' }, + { field: 'reasonDescription' }, + { field: 'description', excludes: ['embed'] }, + { field: 'descriptionExcerpt' }, ] export default { diff --git a/backend/src/schema/resolvers/messages.ts b/backend/src/schema/resolvers/messages.ts index 078584c9d..b7e7a7a73 100644 --- a/backend/src/schema/resolvers/messages.ts +++ b/backend/src/schema/resolvers/messages.ts @@ -81,7 +81,7 @@ export default { createdAt: toString(datetime()), id: apoc.create.uuid(), indexId: CASE WHEN maxIndex IS NOT NULL THEN maxIndex + 1 ELSE 0 END, - content: $content, + content: LEFT($content,2000), saved: true, distributed: false, seen: false diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index d7864ebef..63cf045e8 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -35,7 +35,7 @@
@@ -46,7 +46,7 @@
@@ -222,9 +222,9 @@ export default { ...mapMutations({ commitUnreadRoomCount: 'chat/UPDATE_ROOM_COUNT', }), - async fetchRooms({ room } = {}) { - this.roomsLoaded = false - const offset = this.roomPage * this.roomPageSize + async fetchRooms({ room, options = {} } = {}) { + this.roomsLoaded = options.refetch ? this.roomsLoaded : false + const offset = (options.refetch ? 0 : this.roomPage) * this.roomPageSize try { const { data: { Room }, @@ -238,16 +238,25 @@ export default { fetchPolicy: 'no-cache', }) - const newRooms = Room.map((r) => { - return { - ...r, - users: r.users.map((u) => { - return { ...u, username: u.name, avatar: u.avatar?.url } - }), + const rms = [] + const rmsIds = [] + ;[...Room, ...this.rooms].forEach((r) => { + if (!rmsIds.find((v) => v === r.id)) { + rms.push({ + ...r, + index: r.lastMessage?.date, + lastMessage: { + ...r.lastMessage, + content: r.lastMessage?.content.trim().substring(0, 30), + }, + users: r.users.map((u) => { + return { ...u, username: u.name, avatar: u.avatar?.url } + }), + }) + rmsIds.push(r.id) } }) - - this.rooms = [...this.rooms, ...newRooms] + this.rooms = rms if (Room.length < this.roomPageSize) { this.roomsLoaded = true @@ -282,8 +291,14 @@ export default { fetchPolicy: 'no-cache', }) - const newMsgIds = Message.filter((m) => m.seen === false).map((m) => m.id) + const newMsgIds = Message.filter( + (m) => m.seen === false && m.senderId !== this.currentUser.id, + ).map((m) => m.id) if (newMsgIds.length) { + const roomIndex = this.rooms.findIndex((r) => r.id === room.id) + const changedRoom = { ...this.rooms[roomIndex] } + changedRoom.unreadCount = changedRoom.unreadCount - newMsgIds.length + this.rooms[roomIndex] = changedRoom this.$apollo .mutate({ mutation: markMessagesAsSeen(), @@ -322,32 +337,36 @@ export default { }, async chatMessageAdded({ data }) { + const roomIndex = this.rooms.findIndex((r) => r.id === data.chatMessageAdded.room.id) + const changedRoom = { ...this.rooms[roomIndex] } + changedRoom.lastMessage = data.chatMessageAdded + changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0, 30) + changedRoom.lastMessageAt = data.chatMessageAdded.date + changedRoom.unreadCount++ + this.rooms[roomIndex] = changedRoom 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() + this.fetchRooms({ options: { refetch: true } }) } }, async sendMessage(message) { - // check for usersTag and change userid to username - message.usersTag.forEach((userTag) => { - const needle = `${userTag.id}` - const replacement = `@${userTag.name.replaceAll(' ', '-').toLowerCase()}` - message.content = message.content.replaceAll(needle, replacement) - }) try { - await this.$apollo.mutate({ + const { + data: { CreateMessage: createdMessage }, + } = await this.$apollo.mutate({ mutation: createMessageMutation(), variables: { roomId: message.roomId, content: message.content, }, }) + const roomIndex = this.rooms.findIndex((r) => r.id === message.roomId) + const changedRoom = { ...this.rooms[roomIndex] } + changedRoom.lastMessage = createdMessage + changedRoom.lastMessage.content = changedRoom.lastMessage.content.trim().substring(0, 30) + this.rooms[roomIndex] = changedRoom } catch (error) { this.$toast.error(error.message) } diff --git a/webapp/graphql/Messages.js b/webapp/graphql/Messages.js index e6292c509..cb5d37df9 100644 --- a/webapp/graphql/Messages.js +++ b/webapp/graphql/Messages.js @@ -4,8 +4,23 @@ export const createMessageMutation = () => { return gql` mutation ($roomId: ID!, $content: String!) { CreateMessage(roomId: $roomId, content: $content) { + #_id id + indexId content + senderId + author { + id + } + username + avatar + date + room { + id + } + saved + distributed + seen } } ` @@ -26,6 +41,9 @@ export const messageQuery = () => { username avatar date + room { + id + } saved distributed seen