Merge pull request #26 from mctekk/feat/clickable-header

Improve speed

Author: jesusantguerrero

package-lock.json

@@ -16,6 +16,7 @@
     "date-fns": "^2.16.1",
     "duration": "^0.2.2",
     "fuse.js": "^6.4.6",
+    "js-cookie": "^2.2.1",
     "twilio-chat": "^4.0.0",
     "vue": "^2.6.11"
   },

package.json

@@ -9,7 +9,7 @@
         :show-ui="false"
         @logged="createClient"
       ></chat-Login>
-      <chat-loading v-if="!showChannelList"> </chat-loading>
+      <chat-loading v-if="!showChannelList && !isLoaded"> </chat-loading>
     </div>
 
     <div class="home-container h-full" v-else>
@@ -21,6 +21,7 @@
         <chat-side
           v-if="showChannelList"
           :is-expanded="isExpanded"
+          :is-loading="!isLoaded"
           :user-context="userContext"
           :channels="channels"
           :active-channel="activeChannel"
@@ -124,6 +125,7 @@ export default {
     return {
       client: null,
       channels: [],
+      isLoaded: false,
       activeChannel: null,
       userContext: { identity: null }
     };
@@ -143,6 +145,7 @@ export default {
   },
   methods: {
     async createClient(data) {
+      console.time('initialLoad')
       const client = await Twilio.Client.create(data[this.tokenField], {
         logLevel: "info"
       });
@@ -157,17 +160,15 @@ export default {
       client.on("tokenAboutToExpire", this.onTokenAboutToExpire);
       this.loadChannelEvents(client);
       this.updateChannels();
+      console.timeEnd('tnitialLoad')
     },
 
     async loadChannel() {
       if (!this.activeChannel && !this.showChannelList) {
-        this.client
-          .getChannelBySid(this.userContext.channel_sid)
-          .then(channel => {
-            if (channel) {
-              this.joinChannel(channel);
-            }
-          });
+        const channel = await this.client.getChannelBySid(this.userContext.channel_sid)
+        if (channel) {
+          this.joinChannel(channel);
+        }
       }
     },
 
@@ -194,14 +195,16 @@ export default {
       }
 
       if (!this.showChannelList) {
-        this.loadChannel();
+        await this.loadChannel();
+        this.isLoaded = true;
       } else {
-        const subscribed = await this.client
+          const subscribed = await this.client
           .getSubscribedChannels({ limit: 100 })
           .then(page => {
-            return this.appendChannels(page, []);
+              return this.appendChannels(page, []);
           });
         this.channels = subscribed;
+        this.isLoaded = true;
       }
     },
 

src/components/chat/index.vue

@@ -28,6 +28,7 @@
 
 <script>
 import axios from "axios";
+import Cookies from "js-cookie";
 
 export default {
   name: "Login",
@@ -43,7 +44,7 @@ export default {
       }
     },
     receiver: {
-      type: String,
+      type: String
     },
     httpMethod: {
       type: Function
@@ -59,8 +60,11 @@ export default {
       }
     };
   },
-  mounted() {
-    if (this.receiver) {
+  created() {
+    const loginData = this.getData();
+    if (loginData) {
+      this.$emit("logged", loginData);
+    } else if (this.receiver) {
       this.formData.identity = this.receiver;
       this.login();
     }
@@ -70,17 +74,27 @@ export default {
       this.getAccessToken(this.formData.identity);
     },
 
+    getData() {
+      const token = Cookies.get("kanvas:chat");
+      return JSON.parse(token);
+    },
+
+    setData(data) {
+      Cookies.set("kanvas:chat", data);
+      this.$emit("logged", data);
+    },
+
     getAccessToken(identity) {
       if (this.httpMethod) {
         this.httpMethod(`${this.endpoint}/${identity}`).then(({ data }) => {
-          this.$emit("logged", data);
+          this.setData(data);
         });
         return;
       } else {
         axios
           .get(`${this.endpoint}/${identity}`, this.httpOptions)
           .then(({ data }) => {
-            this.$emit("logged", data);
+            this.setData(data);
           });
       }
     }

src/components/chat/login.vue

@@ -43,16 +43,21 @@
           </div>
 
         <div class="chat-side__list chat-scroller">
-          <chat-side-item
-            v-for="channel in filteredChannels"
-            :key="channel.sid"
-            :channel="channel"
-            :channel-data="channelData[channel.sid]"
-            :user-context="userContext"
-            :active-channel="activeChannel"
-            @click="$emit('click', channel)"
-          >
-          </chat-side-item>
+            <template v-if="!isLoading">
+                <chat-side-item
+                    v-for="channel in filteredChannels"
+                    :key="channel.sid"
+                    :channel="channel"
+                    :channel-data="channelData[channel.sid]"
+                    :user-context="userContext"
+                    :active-channel="activeChannel"
+                    @click="$emit('click', channel)"
+                >
+                </chat-side-item>
+            </template>
+           <chat-loading v-else>
+
+           </chat-loading>
         </div>
       </div>
     </template>
@@ -73,12 +78,14 @@
 import ChatHeader from "./header";
 import ChatSideItem from "./side-list-item";
 import Fuse from "fuse.js";
+import ChatLoading from "./loading";
 
 export default {
   name: "ChatSider",
   components: {
     ChatHeader,
     ChatSideItem,
+    ChatLoading
   },
   props: {
     mobileDisplay: {
@@ -107,6 +114,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+
   },
   data() {
     return {