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

Add days

Author: jesusantguerrero

src/App.vue

@@ -2,6 +2,7 @@
   <div id="app" style="height: 98vh">
     <twilio-chat
       v-if="leadId && token"
+       token-field="channel_client_token"
       :endpoint="`${endpoint}chats`"
       :show-header="false"
       :show-channel-list="false"

src/components/chat/index.vue

@@ -68,99 +68,100 @@ export default {
     ChatMessager,
     ChatSide,
     ChatLogin,
-    ChatLoading
+    ChatLoading,
   },
   props: {
     tokenField: {
       type: String,
-      default: "channel_owner_token"
+      default: "channel_owner_token",
     },
     displayFull: {
       type: Boolean,
-      default: false
+      default: false,
     },
     endpoint: {
       type: String,
-      required: true
+      required: true,
     },
     receiver: {
-      type: String
+      type: String,
     },
     showHeader: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showChannelList: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showSuggestButton: {
       type: Boolean,
-      default: true
+      default: true,
     },
     httpOptions: {
       type: Object,
       default() {
         return {};
-      }
+      },
     },
     httpMethod: {
-      type: Function
+      type: Function,
     },
     isExpanded: {
       type: Boolean,
-      default: false
+      default: false,
     },
     externalChannelHandle: {
       type: Boolean,
-      default: false
+      default: false,
     },
     user: {
       type: String,
-      default: ""
-    }
+      default: "",
+    },
   },
   data() {
     return {
       client: null,
       channels: [],
       activeChannel: null,
-      userContext: { identity: null }
+      userContext: { identity: null },
     };
   },
   watch: {
     receiver() {
       this.unlistenEvents();
-    }
+    },
   },
   computed: {
     isLoggedIn() {
       return this.userContext.identity;
-    }
+    },
   },
   beforeDestroy() {
     this.unlistenEvents();
   },
   methods: {
-    async createClient(data) {
-      const client = await Twilio.Client.create(data[this.tokenField], {
-        logLevel: "info"
-      });
-      this.userContext = {
-        ...data,
-        identity: client.user.identity,
-        user: client.user
-      };
-      this.client = client;
+    createClient(data) {
+      Twilio.Client.create(data[this.tokenField], {
+        logLevel: "info",
+      }).then((client) => {
+        this.userContext = {
+          ...data,
+          identity: client.user.identity,
+          user: client.user,
+        };
+        this.client = client;
 
-      client.on("tokenAboutToExpire", this.onTokenAboutToExpire);
-      this.loadChannelEvents(client);
-      this.updateChannels();
+        client.on("tokenAboutToExpire", this.onTokenAboutToExpire);
+        this.loadChannelEvents(client);
+        this.updateChannels();
+      });
     },
 
     async loadChannel() {
       if (!this.activeChannel && !this.showChannelList) {
-        const channel = this.channels.find(channel => {
+        const channel = this.channels.find((channel) => {
           return channel.sid == this.userContext.channel_sid;
         });
 
@@ -194,7 +195,7 @@ export default {
 
       const subscribed = await this.client
         .getSubscribedChannels({ limit: 100 })
-        .then(page => {
+        .then((page) => {
           return this.appendChannels(page, []);
         });
       this.channels = subscribed;
@@ -216,7 +217,7 @@ export default {
     },
 
     loadChannelEvents(client) {
-      client.on("channelJoined", channel => {
+      client.on("channelJoined", (channel) => {
         channel.on("messageAdded", () => {
           this.updateChannels();
         });
@@ -232,7 +233,7 @@ export default {
 
     unlistenEvents() {
       if (this.client) {
-        this.client.removeListener("channelJoined", channel => {
+        this.client.removeListener("channelJoined", (channel) => {
           channel.removeListener("messageAdded", () => {
             this.updateChannels();
           });
@@ -269,8 +270,8 @@ export default {
 
     sendMessage(message, attributes) {
       this.$refs.messenger.sendMessage(message, attributes);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/chat/messager.vue

@@ -196,12 +196,23 @@ export default {
     },
 
     sendMessage(message, attributes = {}) {
+        if (message.includes("/destroy")) {
+            this.channel.delete().then(function(channel) {
+                console.log('Deleted channel: ' + channel.sid);
+            });;
+            this.clearMessageForm()
+            return
+        }
       if (message.trim()) {
         this.channel.sendMessage(message, attributes);
+        this.clearMessageForm()
+      }
+    },
+
+    clearMessageForm() {
         setTimeout(() => {
           this.formData.message = "";
         });
-      }
     },
 
     listenTyping(e) {
@@ -240,9 +251,7 @@ export default {
         }
         this.channel.on("messageAdded", this.addMessage);
         this.channel.on("memberUpdated", this.updateMembers);
-        setTimeout(() => {
-          this.isLoading = false;
-        }, 300);
+        this.isLoading = false;
       });
 
       this.channel.on("typingStarted", member => {