diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue index 9cd3e391a..2b9514bf3 100644 --- a/webapp/components/Chat/Chat.vue +++ b/webapp/components/Chat/Chat.vue @@ -3,7 +3,7 @@ import { roomQuery, createRoom } from '~/graphql/Rooms' -import { messageQuery } from '~/graphql/Messages' +import { messageQuery, createMessageMutation } from '~/graphql/Messages' +import { mapGetters } from 'vuex' export default { name: 'Chat', @@ -43,7 +44,6 @@ export default { }, data() { return { - currentUserId: '1234', menuActions: [ /* { name: 'inviteUser', @@ -131,87 +131,51 @@ export default { }) } }, + computed: { + ...mapGetters({ + currentUser: 'auth/user', + }), + }, methods: { fetchMessages({ room, options = {} }) { - // console.log(room, options) this.messagesLoaded = false setTimeout(async () => { - if (options.reset) { - // console.log('reset messages') - this.messages = [] // this.addMessages(true) - } else { - try { - const { - data: { Message }, - } = await this.$apollo.query({ - query: messageQuery(), - variables: { - roomId: room.id, - }, - }) - // console.log('Messages', Message) - this.messages = Message - } catch (error) { - // console.log('Error', error) - this.messages = [] // this.addMessages(true) - this.$toast.error(error.message) - } + 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 }) }, - /* addMessages(reset) { - const messages = [] - - for (let i = 0; i < 30; i++) { - messages.push({ - _id: reset ? i : this.messages.length + i, - content: `${reset ? '' : 'paginated'} message ${i + 1}`, - senderId: '4321', - username: 'John Doe', - date: '13 November', - timestamp: '10:20', - }) - } - messages.push({ - _id: '31', - content: `Hallo Welt`, - senderId: '1234', - username: 'John Doe', - date: '13 November', - timestamp: '10:20', - }) - - return messages - }, */ - - sendMessage(message) { - this.messages = [ - ...this.messages, - { - _id: this.messages.length, - content: message.content, - senderId: this.currentUserId, - timestamp: new Date().toString().substring(16, 21), - date: new Date().toDateString(), - }, - ] + refetchMessage(roomId) { + this.fetchMessages({ room: this.rooms.find((r) => r.roomId === roomId) }) }, - addNewMessage() { - setTimeout(() => { - this.messages = [ - ...this.messages, - { - _id: this.messages.length, - content: 'NEW MESSAGE', - senderId: '1234', - timestamp: new Date().toString().substring(16, 21), - date: new Date().toDateString(), + async sendMessage(message) { + try { + await this.$apollo.mutate({ + mutation: createMessageMutation(), + variables: { + roomId: message.roomId, + content: message.content, }, - ] - }, 2000) + }) + } catch (error) { + this.$toast.error(error.message) + } + this.refetchMessage(message.roomId) }, }, apollo: { @@ -220,7 +184,6 @@ export default { return roomQuery() }, update({ Room }) { - // console.log('Rooms', Room) if (!Room) { this.rooms = [] return @@ -240,14 +203,12 @@ export default { }).filter((r) => this.singleRoom ? r.users.filter((u) => u.id === this.singleRoomId).length > 0 : true, ) - - // console.log(this.rooms) }, error(error) { this.rooms = [] this.$toast.error(error.message) }, - fetchPolicy: 'cache-and-network', + fetchPolicy: 'no-cache', }, }, } diff --git a/webapp/graphql/Messages.js b/webapp/graphql/Messages.js index 099a7265e..41d647d4b 100644 --- a/webapp/graphql/Messages.js +++ b/webapp/graphql/Messages.js @@ -4,7 +4,9 @@ export const messageQuery = () => { return gql` query ($roomId: ID!) { Message(roomId: $roomId) { + _id id + senderId content author { id @@ -13,3 +15,14 @@ export const messageQuery = () => { } ` } + +export const createMessageMutation = () => { + return gql` + mutation ($roomId: ID!, $content: String!) { + CreateMessage(roomId: $roomId, content: $content) { + id + content + } + } + ` +}