feat(webapp): chat rooms

backend/src/schema/resolvers/rooms.ts

@@ -12,7 +12,11 @@ export default {
       if (resolved) {
         resolved.forEach((room) => {
           if (room.users) {
+            // buggy, you must query the username for this to function correctly
             room.roomName = room.users.filter((user) => user.id !== context.user.id)[0].name
+            room.avatar =
+              room.users.filter((user) => user.id !== context.user.id)[0].avatar?.url ||
+              'default-avatar'
             room.users.forEach((user) => {
               user._id = user.id
             })

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

@@ -14,6 +14,7 @@ type Room {
 
   roomId: String! @cypher(statement: "RETURN this.id")
   roomName: String! ## @cypher(statement: "MATCH (this)<-[:CHATS_IN]-(user:User) WHERE NOT user.id = $cypherParams.currentUserId RETURN user[0].name")
+  avatar: String! ## @cypher match not own user in users array
 }
 
 type Mutation {

webapp/components/Chat/Chat.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-// import { roomQuery } from '~/graphql/Rooms'
+import { roomQuery, createRoom } from '~/graphql/Rooms'
 import { messageQuery } from '~/graphql/Messages'
 
 export default {
@@ -36,16 +36,16 @@ export default {
     theme: {
       type: String,
     },
-    singleRoom: {
-      type: Boolean,
-      default: false,
+    singleRoomId: {
+      type: String,
+      default: null,
     },
   },
   data() {
     return {
       currentUserId: '1234',
       menuActions: [
-        {
+        /* {
           name: 'inviteUser',
           title: 'Invite User',
         },
@@ -56,7 +56,7 @@ export default {
         {
           name: 'deleteRoom',
           title: 'Delete Room',
-        },
+        }, */
       ],
       messageActions: [
         {
@@ -93,16 +93,16 @@ export default {
         CANCEL_SELECT_MESSAGE: 'Annuler Sélection',
       },
       roomActions: [
-        {
+        /* {
           name: 'archiveRoom',
           title: 'Archive Room',
-        },
-        { name: 'inviteUser', title: 'Invite User' },
-        { name: 'removeUser', title: 'Remove User' },
-        { name: 'deleteRoom', title: 'Delete Room' },
+        }, */
+        // { name: 'inviteUser', title: 'Invite User' },
+        // { name: 'removeUser', title: 'Remove User' },
+        // { name: 'deleteRoom', title: 'Delete Room' },
       ],
       rooms: [
-        {
+        /* {
           roomId: '1',
           roomName: 'John Snow',
           avatar: 'https://66.media.tumblr.com/avatar_c6a8eae4303e_512.pnj',
@@ -120,15 +120,35 @@ export default {
             { _id: '1234', username: 'Johnx Doe' },
             { _id: '43210', username: 'Max J. Mustermann' },
           ],
-        },
+        }, */
       ],
       messages: [],
       messagesLoaded: true,
       showDemoOptions: true,
       responsiveBreakpoint: 600,
+      singleRoom: !!this.singleRoomId || false,
+    }
+  },
+  mounted() {
+    if (this.singleRoom) {
+      this.$apollo
+        .mutate({
+          mutation: createRoom(),
+          variables: {
+            userId: this.singleRoomId,
+          },
+        })
+        .then(() => {
+          this.$apollo.queries.Rooms.refetch()
+        })
+        .catch((error) => {
+          this.$toast.error(error)
+        })
+        .finally(() => {
+          // this.loading = false
+        })
     }
   },
-
   methods: {
     fetchMessages({ room, options = {} }) {
       // console.log(room, options)
@@ -212,26 +232,42 @@ export default {
       }, 2000)
     },
   },
-  //   apollo: {
-  //     Rooms: {
-  //       query() {
-  //         return roomQuery()
-  //       },
-  //       update({ Room }) {
-  //         console.log('Rooms', Room)
-  //         if (!Room) {
-  //           this.rooms = []
-  //           return
-  //         }
-  //         this.rooms = Room
-  //       },
-  //       error(error) {
-  //         this.rooms = []
-  //         this.$toast.error(error.message)
-  //       },
-  //       fetchPolicy: 'cache-and-network',
-  //     },
-  //   },
+  apollo: {
+    Rooms: {
+      query() {
+        return roomQuery()
+      },
+      update({ Room }) {
+        // console.log('Rooms', 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,
+        )
+
+        // console.log(this.rooms)
+      },
+      error(error) {
+        this.rooms = []
+        this.$toast.error(error.message)
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
 }
 </script>
 <style lang="scss">

webapp/graphql/Rooms.js

@@ -4,9 +4,26 @@ export const roomQuery = () => gql`
   query {
     Room {
       id
+      roomId
+      roomName
+      avatar
       users {
+        _id
         id
+        name
+        avatar {
+          url
+        }
       }
     }
   }
 `
+
+export const createRoom = () => gql`
+  mutation ($userId: ID!) {
+    CreateRoom(userId: $userId) {
+      id
+      roomId
+    }
+  }
+`

webapp/layouts/default.vue

@@ -20,7 +20,7 @@
           x
         </ds-button>
       </ds-text>
-      <chat-module :singleRoom="true" />
+      <chat-module :singleRoomId="$store.getters['chat/showChat'].roomID" />
     </div>
     >
   </div>