From 87fb1adab11282259c3a2ffffb2071cd5cf98669 Mon Sep 17 00:00:00 2001
From: James George <jamesgeorge998001@gmail.com>
Date: Mon, 16 Dec 2019 18:23:14 +0530
Subject: [PATCH] Refactor: Minor code refactoring in accordance with Vue.js
 best practices (#368)

---
 app/javascript/dashboard/App.vue                         | 2 +-
 app/javascript/dashboard/components/ChatList.vue         | 9 ++++-----
 app/javascript/dashboard/components/Modal.vue            | 2 +-
 app/javascript/dashboard/components/SidemenuIcon.vue     | 2 +-
 .../dashboard/components/SnackbarContainer.vue           | 2 +-
 .../dashboard/components/buttons/FormSubmitButton.vue    | 2 +-
 .../dashboard/components/buttons/ResolveButton.vue       | 2 +-
 app/javascript/dashboard/components/layout/Sidebar.vue   | 3 +--
 .../dashboard/components/widgets/EmptyState.vue          | 2 +-
 .../dashboard/components/widgets/SearchBox.vue           | 6 +++---
 .../dashboard/components/widgets/Thumbnail.vue           | 3 +--
 .../components/widgets/conversation/ConversationBox.vue  | 5 ++---
 .../components/widgets/conversation/Message.vue          | 4 ++--
 .../components/widgets/conversation/ReplyBox.vue         | 6 +++---
 14 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index f3eb153cc..692b92a65 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -3,7 +3,7 @@
     <transition name="fade" mode="out-in">
       <router-view></router-view>
     </transition>
-    <woot-snackbar-box></woot-snackbar-box>
+    <woot-snackbar-box />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 2c6f4716d..6c8bc3b7a 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -2,10 +2,10 @@
   <div class="conversations-sidebar  medium-4 columns">
     <div class="chat-list__top">
       <h1 class="page-title">
-        <woot-sidemenu-icon></woot-sidemenu-icon>
+        <woot-sidemenu-icon />
         {{ getInboxName }}
       </h1>
-      <chat-filter @statusFilterChange="getDataForStatusTab"></chat-filter>
+      <chat-filter @statusFilterChange="getDataForStatusTab" />
     </div>
 
     <chat-type-tabs
@@ -13,9 +13,8 @@
       :active-tab-index="activeAssigneeTab"
       class="tab--chat-type"
       @chatTabChange="getDataForTab"
-    >
-    </chat-type-tabs>
-
+    />
+    
     <p
       v-if="!chatListLoading && !getChatsForTab(activeStatus).length"
       class="content-box"
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 6f980cb4e..b3179a641 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -3,7 +3,7 @@
     <div v-if="show" class="modal-mask" transition="modal" @click="close">
       <i class="ion-android-close modal--close" @click="close"></i>
       <div class="modal-container" :class="className" @click.stop>
-        <slot></slot>
+        <slot />
       </div>
     </div>
   </transition>
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index e0aef0475..1ac0b0370 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick"></i>
+  <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick" />
 </template>
 
 <script>
diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 37a365015..3c8c37c35 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <transition-group name="toast-fade" tag="div" class="ui-snackbar-container">
-    <woot-snackbar :message="snackMessage" v-for="snackMessage in snackMessages" v-bind:key="snackMessage"></woot-snackbar>
+    <woot-snackbar :message="snackMessage" v-for="snackMessage in snackMessages" v-bind:key="snackMessage" />
   </transition-group>
 </template>
 
diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
index b0e9a1f14..b0cf8cdad 100644
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -5,7 +5,7 @@
     :class="computedClass"
     @click="onClick"
   >
-    <i v-if="!!iconClass" :class="iconClass" class="icon"></i>
+    <i v-if="!!iconClass" :class="iconClass" class="icon" />
     <span>{{ buttonText }}</span>
     <spinner v-if="loading" />
   </button>
diff --git a/app/javascript/dashboard/components/buttons/ResolveButton.vue b/app/javascript/dashboard/components/buttons/ResolveButton.vue
index 24e045ee7..7112b6d79 100644
--- a/app/javascript/dashboard/components/buttons/ResolveButton.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveButton.vue
@@ -5,7 +5,7 @@
     :class="buttonClass"
     @click="toggleStatus"
   >
-    <i v-if="!isLoading" class="icon" :class="buttonIconClass"></i>
+    <i v-if="!isLoading" class="icon" :class="buttonIconClass" />
     <spinner v-if="isLoading" />
     {{ currentStatus }}
   </button>
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index e843dc6d2..2b711a2b4 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -41,8 +41,7 @@
         </div>
       </transition>
       <div class="current-user" @click.prevent="showOptions()">
-        <thumbnail :src="gravatarUrl()" :username="currentUser.name">
-        </thumbnail>
+        <thumbnail :src="gravatarUrl()" :username="currentUser.name"/>
         <div class="current-user--data">
           <h3 class="current-user--name">
             {{ currentUser.name }}
diff --git a/app/javascript/dashboard/components/widgets/EmptyState.vue b/app/javascript/dashboard/components/widgets/EmptyState.vue
index 15b8e345a..b6447ffd5 100644
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -2,7 +2,7 @@
   <div class="row empty-state">
     <h3 class="title">{{title}}</h3>
     <p class="message">{{message}}</p>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 <script>
diff --git a/app/javascript/dashboard/components/widgets/SearchBox.vue b/app/javascript/dashboard/components/widgets/SearchBox.vue
index 773579e10..21e16e0bd 100644
--- a/app/javascript/dashboard/components/widgets/SearchBox.vue
+++ b/app/javascript/dashboard/components/widgets/SearchBox.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="search">
-    <i class="icon ion-ios-search-strong"></i>
-    <input class="input" type="email" v-bind:placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
+    <i class="icon ion-ios-search-strong" />
+    <input class="input" type="email" :placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
   </div>
 </template>
 <script>
 export default {
 
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index ac6653cfc..d2a0a50b2 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -14,8 +14,7 @@
       background-color="#1f93ff"
       color="white"
       :size="avatarSize"
-    >
-    </Avatar>
+    />
     <img
       v-if="badge === 'Channel::FacebookPage'"
       id="badge"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 9f6b25ad5..6d46af8a1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -5,9 +5,8 @@
       :inbox-id="inboxId"
       :is-contact-panel-open="isContactPanelOpen"
       @contactPanelToggle="onToggleContactPanel"
-    >
-    </messages-view>
-    <empty-state v-else></empty-state>
+    />
+    <empty-state v-else />
   </div>
 </template>
 <script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 818eef088..1c00d1ab6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -22,7 +22,7 @@
           :label="data.attachment.fallback_title"
           :readable-time="readableTime"
         />
-        <i v-if="data.message_type === 2" class="icon ion-person"></i>
+        <i v-if="data.message_type === 2" class="icon ion-person" />
         <bubble-text
           v-if="data.content"
           :message="message"
@@ -34,7 +34,7 @@
           class="icon ion-android-lock"
           @mouseenter="isHovered = true"
           @mouseleave="isHovered = false"
-        ></i>
+        />
       </p>
     </div>
     <!-- <img v-if="showSenderData" src="https://chatwoot-staging.s3-us-west-2.amazonaws.com/uploads/avatar/contact/3415/thumb_10418362_10201264050880840_6087258728802054624_n.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAI3KBM2ES3VRHQHPQ%2F20170422%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20170422T075421Z&amp;X-Amz-Expires=604800&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=8d5ff60e41415515f59ff682b9a4e4c0574d9d9aabfeff1dc5a51087a9b49e03" class="sender--thumbnail"> -->
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index e535a16b9..7e7bacfd2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -27,7 +27,7 @@
         class="icon ion-happy-outline"
         :class="{ active: showEmojiPicker }"
         @click="toggleEmojiPicker()"
-      ></i>
+      />
     </div>
 
     <div class="reply-box__bottom">
@@ -65,7 +65,7 @@
             'ion-android-send': !isPrivate,
             'ion-android-lock': isPrivate,
           }"
-        ></i>
+        />
       </button>
     </div>
   </div>
@@ -114,7 +114,7 @@ export default {
         return;
       }
       const isSlashCommand = val[0] === '/';
-      const hasNextWord = val.indexOf(' ') > -1;
+      const hasNextWord = val.includes(' ');
       const isShortCodeActive = isSlashCommand && !hasNextWord;
       if (isShortCodeActive) {
         this.showCannedResponsesList = true;