Merge pull request #346 from weni-ai/fix/mixed-rooms

Fixed mixed rooms
weni-ai · Sep 30, 2023 · e73959e · e73959e
2 parents b9da295 + fdf2f47
commit e73959e
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 25 deletions.
diff --git a/src/layouts/ChatsLayout/index.vue b/src/layouts/ChatsLayout/index.vue
@@ -174,10 +174,14 @@ section.chats-layout {
 
   height: 100vh;
   max-height: 100vh;
-  overflow-y: hidden;
+  width: 100vw;
+  max-width: 100vw;
+
   display: grid;
   grid-template-columns: 2.8fr 9fr;
 
+  overflow: hidden;
+
   &.has-aside {
     grid-template-columns: 2.8fr 6.2fr 2.8fr;
   }
@@ -201,7 +205,7 @@ section.chats-layout {
   main {
     margin-left: $unnnic-spacing-inline-sm;
 
-    flex: 1 1;
+    position: relative;
     grid-column: 2;
 
     height: 100vh;

diff --git a/src/store/modules/rooms.js b/src/store/modules/rooms.js
@@ -131,18 +131,50 @@ export default {
       }
       return undefined;
     },
+
     async getActiveRoomMessages({ commit, state }, { offset, concat, limit }) {
       const { activeRoom } = state;
       if (!activeRoom) return;
-      const response = await Message.getByRoom(activeRoom.uuid, offset, limit);
-      let messages = response.results;
-      const hasNext = response.next;
-      if (concat) {
-        messages = response.results.concat(state.activeRoomMessages);
+
+      const maxRetries = 3;
+      let currentRetry = 0;
+
+      // eslint-disable-next-line consistent-return
+      async function fetchData() {
+        try {
+          const response = await Message.getByRoom(activeRoom.uuid, offset, limit);
+
+          let messages = response.results;
+          const hasNext = response.next;
+          if (concat) {
+            messages = response.results.concat(state.activeRoomMessages);
+          }
+
+          if (messages?.[0] && activeRoom?.uuid && messages?.[0]?.room === activeRoom.uuid) {
+            const messagesWithSender = messages.map(parseMessageToMessageWithSenderProp);
+            commit(mutations.SET_ACTIVE_ROOM_MESSAGES, messagesWithSender);
+            commit(mutations.SET_ACTIVE_ROOM_HAS_NEXT, hasNext);
+          }
+        } catch (error) {
+          console.error('An error ocurred when try get the room messages', error);
+
+          if (currentRetry < maxRetries) {
+            currentRetry += 1;
+
+            const TWO_SECONDS = 2000;
+
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve(fetchData());
+              }, TWO_SECONDS);
+            });
+          }
+          throw new Error(
+            `Several errors occurred when trying to request messages from the room. There will be no automatic retries.`,
+          );
+        }
       }
-      const messagesWithSender = messages.map(parseMessageToMessageWithSenderProp);
-      commit(mutations.SET_ACTIVE_ROOM_MESSAGES, messagesWithSender);
-      commit(mutations.SET_ACTIVE_ROOM_HAS_NEXT, hasNext);
+      await fetchData();
     },
 
     async sendMessage({ state, commit }, text) {

diff --git a/src/views/chats/Home.vue b/src/views/chats/Home.vue
@@ -3,8 +3,9 @@
     ref="chats-layout"
     @select-quick-message="(quickMessage) => updateEditorMessage(quickMessage.text)"
   >
-    <chats-background v-if="!room" />
-    <section v-if="!!room" class="active-chat">
+    <room-loading v-show="isRoomSkeletonActive" />
+    <chats-background v-if="!room && !isRoomSkeletonActive" />
+    <section v-if="!!room && !isRoomSkeletonActive" class="active-chat">
       <chat-header
         :room="room"
         :closeButtonTooltip="$t('chats.end')"
@@ -127,6 +128,7 @@ import Queue from '@/services/api/resources/settings/queue';
 import ModalGetChat from '@/components/chats/chat/ModalGetChat';
 
 import FileUploader from '@/components/chats/MessageEditor/FileUploader';
+import RoomLoading from '@/views/loadings/Room.vue';
 
 export default {
   name: 'ChatsHome',
@@ -145,6 +147,7 @@ export default {
     FileUploader,
     LayoutTemplateMessage,
     ModalGetChat,
+    RoomLoading,
   },
 
   props: {
@@ -174,6 +177,7 @@ export default {
     showAlertForLastMessage: false,
     networkError: false,
     files: [],
+    isRoomSkeletonActive: false,
   }),
 
   computed: {
@@ -263,22 +267,26 @@ export default {
     async getRoomMessages(concat) {
       this.isLoading = true;
 
-      try {
-        await this.$store.dispatch('rooms/getActiveRoomMessages', {
+      await this.$store
+        .dispatch('rooms/getActiveRoomMessages', {
           offset: this.page * this.limit,
           concat,
           limit: this.limit,
+        })
+        .then(() => {
+          this.isRoomClassifierVisible = false;
+          this.isLoading = false;
+          this.networkError = false;
+          this.dateOfLastMessage();
+          this.readMessages();
+
+          this.isRoomSkeletonActive = false;
+        })
+        .catch((error) => {
+          this.isLoading = false;
+          console.error(error);
+          if (error.code === 'ERR_NETWORK') this.networkError = true;
         });
-        this.isRoomClassifierVisible = false;
-        this.isLoading = false;
-        this.networkError = false;
-        this.dateOfLastMessage();
-        this.readMessages();
-      } catch (error) {
-        this.isLoading = false;
-        console.log(error);
-        if (error.code === 'ERR_NETWORK') this.networkError = true;
-      }
     },
 
     searchMessages() {
@@ -397,8 +405,9 @@ export default {
           this.$delete(this.$store.state.rooms.newMessagesByRoom, this.id);
         }
 
+        this.isRoomSkeletonActive = true;
         await this.setActiveRoom(this.id);
-        this.getRoomMessages();
+        await this.getRoomMessages();
       },
     },
   },

diff --git a/src/views/loadings/Room.vue b/src/views/loadings/Room.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="room-loading">
+    <header>
+      <unnnic-skeleton-loading />
+      <unnnic-skeleton-loading />
+    </header>
+    <main>
+      <div class="room-loading__messages">
+        <unnnic-skeleton-loading width="250px" height="23px" />
+        <div class="message">
+          <unnnic-skeleton-loading />
+        </div>
+        <div class="message">
+          <unnnic-skeleton-loading />
+        </div>
+        <div class="message">
+          <unnnic-skeleton-loading />
+        </div>
+        <div class="message">
+          <unnnic-skeleton-loading />
+        </div>
+      </div>
+      <div class="room-loading__messages-manager">
+        <unnnic-skeleton-loading />
+        <unnnic-skeleton-loading />
+        <unnnic-skeleton-loading />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RoomLoading',
+};
+</script>
+
+<style lang="scss" scoped>
+.room-loading {
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+
+  z-index: 10000;
+
+  header {
+    padding: $unnnic-spacing-sm 0;
+
+    display: grid;
+    gap: $unnnic-spacing-md;
+    grid-template-columns: 48px 70%;
+
+    & > * {
+      width: 100%;
+      height: 48px;
+    }
+  }
+  main {
+    display: grid;
+    grid-template-rows: 1fr auto;
+    gap: $unnnic-spacing-sm;
+
+    padding: $unnnic-spacing-sm;
+    height: 100%;
+
+    .room-loading__messages {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: $unnnic-spacing-md;
+      grid-template-rows: 23px 60px 60px 60px 60px;
+
+      .message {
+        width: 55%;
+        height: 100%;
+        min-height: 46px;
+
+        align-self: start;
+        max-height: 60px;
+
+        & > * {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .room-loading__messages-manager {
+      display: grid;
+      gap: $unnnic-spacing-xs;
+      grid-template-columns: auto 46px 46px;
+
+      & > * {
+        width: 100%;
+        height: 46px;
+      }
+    }
+  }
+}
+</style>