Improve chat performance

Author: jesusantguerrero

src/components/chat/index.vue

@@ -85,7 +85,7 @@ export default {
       required: true
     },
     receiver: {
-      type: String
+      type: [String, Number]
     },
     showHeader: {
       type: Boolean,
@@ -126,6 +126,7 @@ export default {
       client: null,
       channels: [],
       isLoaded: false,
+      isLoading: false,
       activeChannel: null,
       userContext: { identity: null }
     };
@@ -160,7 +161,7 @@ export default {
       client.on("tokenAboutToExpire", this.onTokenAboutToExpire);
       this.loadChannelEvents(client);
       this.updateChannels();
-      console.timeEnd('tnitialLoad')
+      console.timeEnd('initialLoad')
     },
 
     async loadChannel() {
@@ -194,18 +195,29 @@ export default {
         channel.join();
       }
 
-      if (!this.showChannelList) {
-        await this.loadChannel();
-        this.isLoaded = true;
-      } else {
-          const subscribed = await this.client
-          .getSubscribedChannels({ limit: 100 })
-          .then(page => {
-              return this.appendChannels(page, []);
-          });
-        this.channels = subscribed;
-        this.isLoaded = true;
+      if(!this.activeChannel && !this.showChannelList && !this.isLoading) {
+          console.log("Hola Desde Dentro", `loaded: ${this.isLoaded}. Loading ${this.isLoading}`)
       }
+
+        if (!this.isLoading) {
+            this.isLoading = true;
+            if (!this.showChannelList) {
+                await this.loadChannel();
+                this.isLoaded = true;
+                this.isLoading = false;
+            } else {
+                console.log("there", this.showChannelList)
+                const subscribed = await this.client
+                .getSubscribedChannels({ limit: 100 })
+                .then(page => {
+                    return this.appendChannels(page, []);
+                });
+              this.channels = subscribed;
+              this.isLoaded = true;
+              this.isLoading = false;
+            }
+
+        }
     },
 
     async appendChannels(paginator, current) {
@@ -229,7 +241,6 @@ export default {
         });
         this.updateChannels();
       });
-
       client.on("channelInvited", this.updateChannels);
       client.on("channelAdded", this.updateChannels);
       client.on("channelUpdated", this.updateChannels);

src/components/chat/login.vue

@@ -61,10 +61,7 @@ export default {
     };
   },
   created() {
-    const loginData = this.getData();
-    if (loginData) {
-      this.$emit("logged", loginData);
-    } else if (this.receiver) {
+    if (this.receiver) {
       this.formData.identity = this.receiver;
       this.login();
     }
@@ -101,5 +98,3 @@ export default {
   }
 };
 </script>
-
-<style></style>

src/components/chat/side-list-item.vue

@@ -73,11 +73,18 @@ export default {
     this.watchTime();
   },
   mounted() {
+    this.$root.$on("leads:status-updated", (data) => {
+        if (this.channel.attributes && data.id == this.channel.attributes.lead_id) {
+            this.$set(this.channel.attributes, "status", data.status)
+        }
+    })
+
     this.$root.$on("leads:stopwatch", (data) => {
         if (this.channel.attributes && data.lead_id == this.channel.attributes.lead_id) {
             this.$set(this.channel.attributes, "chrono_start_date", data.chrono_start_date);
             this.$set(this.channel.attributes, "is_chrono_running", data.is_chrono_running)
             this.$set(this.channel.attributes, "leads_visits_count", data.leads_visits_count)
+            this.$set(this.channel.attributes, "status", data.status)
             this.watchTime();
         }
     });
@@ -114,9 +121,7 @@ export default {
       );
     },
     receiverImage() {
-      return this.receiver && this.receiver.userAttributes
-        ? this.receiver.userAttributes.photoUrl
-        : "";
+      return this.channel.attributes.photoUrl;
     },
     sender() {
       return (

src/components/chat/side.vue

@@ -128,7 +128,7 @@ export default {
       selectedFilter: 'all',
       filters: {
           all: {
-              value: '',
+              value: 'all',
               label: "All Messages",
               field: ''
           },
@@ -187,7 +187,7 @@ export default {
 
     visibleChannels() {
         const selectedFilter = this.filters[this.selectedFilter].value;
-        return this.channels.filter(channel => channel.lastMessage && (!selectedFilter || channel.attributes.status == selectedFilter))
+        return this.channels.filter(channel => channel.lastMessage && (selectedFilter == "all" || channel.attributes.status == selectedFilter))
         .sort((a, b) => {
             const dateCreatedA = a.lastMessage
             ? a.lastMessage.dateCreated.toISOString()