Merge pull request #6519 from Ocelot-Social-Community/frontend-rooms

feat(webapp): chat rooms
Ocelot-Social-Community · Jul 10, 2023 · a965cef · a965cef
2 parents abdcdba + 88e2091
commit a965cef
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 49 deletions.
diff --git a/backend/src/schema/resolvers/rooms.ts b/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
             })

diff --git a/backend/src/schema/types/type/Room.gql b/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 {

diff --git a/webapp/components/Chat/Chat.vue b/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,42 +93,44 @@ 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' },
+        */
       ],
-      rooms: [
-        {
-          roomId: '1',
-          roomName: 'John Snow',
-          avatar: 'https://66.media.tumblr.com/avatar_c6a8eae4303e_512.pnj',
-          users: [
-            { _id: '1234', username: 'John Doe' },
-            { _id: '4321', username: 'John Snow' },
-          ],
-        },
-        {
-          roomId: '2',
-          roomName: 'Max J. Mustermann',
-          avatar:
-            'https://64.media.tumblr.com/8889b6e26370f4e3837584c1c59721a6/f4f76ed6b0249d08-4b/s1280x1920/810e9e5fa724366d26c10c0fa22ba97dad8778d1.pnj',
-          users: [
-            { _id: '1234', username: 'Johnx Doe' },
-            { _id: '43210', username: 'Max J. Mustermann' },
-          ],
-        },
-      ],
+      rooms: [],
       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 +214,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">

diff --git a/webapp/graphql/Rooms.js b/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
+    }
+  }
+`
diff --git a/webapp/layouts/default.vue b/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>