Fix eslint warnings, update eslint config

2019-08-25 11:04:33 +05:30 · 2019-08-25 11:04:33 +05:30 · f18f01a047
commit f18f01a047
parent aa8a43344b
8 changed files with 227 additions and 132 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,37 +1,47 @@
 module.exports = {
-  "extends": ["airbnb/base", "prettier"],
-  "plugins": [
-    "prettier", "babel", "html"
-  ],
-  "rules": {
-    "prettier/prettier": ["error"],
-    "camelcase": "off",
-    "import/no-extraneous-dependencies": "off",
-    "import/prefer-default-export": "off",
-    "import/no-named-as-default": "off",
-    "jsx-a11y/no-static-element-interactions": "off",
-    "jsx-a11y/click-events-have-key-events": "off",
-    "jsx-a11y/label-has-associated-control": "off",
-    "jsx-a11y/label-has-for": "off",
-    "jsx-a11y/anchor-is-valid": "off",
-    'import/no-unresolved': "off",
+  extends: ['airbnb/base', 'prettier', 'plugin:vue/recommended'],
+  parserOptions: {
+    parser: 'babel-eslint',
+    ecmaVersion: 2017,
+    sourceType: 'module',
  },
-  "settings": {
-    "import/resolver": {
-      "webpack": {
-        "config": "config/webpack/resolve.js"
+  plugins: ['html', 'prettier', 'babel'],
+  rules: {
+    'prettier/prettier': ['error'],
+    camelcase: 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-named-as-default': 'off',
+    'jsx-a11y/no-static-element-interactions': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'jsx-a11y/label-has-for': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
+    'import/no-unresolved': 'off',
+    'vue/max-attributes-per-line': ['error', {
+      'singleline': 3,
+      'multiline': {
+        'max': 1,
+        'allowFirstLine': false
      }
-    }
+    }],
+    'vue/html-self-closing': false
  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "jest": true
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: 'config/webpack/resolve.js',
+      },
+    },
  },
-  "parser": "babel-eslint",
-  "globals": {
-    "__WEBPACK_ENV__": true,
-    "__PUSHER__": true,
-    "__FB_APP_ID__": true
-  }
-}
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
+  globals: {
+    __WEBPACK_ENV__: true,
+    __PUSHER__: true,
+    __FB_APP_ID__: true,
+  },
+};
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@ -53,8 +53,8 @@ window.onload = () => {
  window.WOOT = new Vue({
    router,
    store,
-    template: '<App/>',
    components: { App },
+    template: '<App/>',
  }).$mount('#app');
 };
 window.pusher = vuePusher.init();
--- a/app/javascript/src/components/layout/SidebarItem.vue
+++ b/app/javascript/src/components/layout/SidebarItem.vue
@ -1,20 +1,34 @@
 <template>
-  <router-link :to="menuItem.toState" tag="li" active-class="active" :class="computedClass">
-    <a :class="getMenuItemClass"  data-tooltip aria-haspopup="true" :title="menuItem.toolTip" >
-      <i :class="menuItem.icon"></i>
-      {{menuItem.label}}
-      <span class="ion-ios-plus-outline" v-if="showItem(menuItem)" @click.prevent="newLinkClick">
-      </span>
+  <router-link
+    :to="menuItem.toState"
+    tag="li"
+    active-class="active"
+    :class="computedClass"
+  >
+    <a
+      :class="getMenuItemClass"
+      data-tooltip
+      aria-haspopup="true"
+      :title="menuItem.toolTip"
+    >
+      <i :class="menuItem.icon" />
+      {{ menuItem.label }}
+      <span
+        v-if="showItem(menuItem)"
+        class="ion-ios-plus-outline"
+        @click.prevent="newLinkClick"
+      />
    </a>
-    <ul class="nested vertical menu" v-if="menuItem.hasSubMenu">
+    <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
      <router-link
-        :to="child.toState"
-        tag="li"
-        active-class="active flex-container"
        v-for="child in menuItem.children"
+        :key="child.label"
+        active-class="active flex-container"
        :class="computedInboxClass(child)"
+        tag="li"
+        :to="child.toState"
      >
-        <a>{{child.label}}</a>
+        <a>{{ child.label }}</a>
      </router-link>
    </ul>
  </router-link>
@ -28,20 +42,32 @@ import router from '../../routes';
 import auth from '../../api/auth';

 export default {
-  props: ['menuItem'],
+  props: {
+    menuItem: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
  computed: {
    ...mapGetters({
      activeInbox: 'getSelectedInbox',
    }),
    getMenuItemClass() {
-      return this.menuItem.cssClass ? `side-menu ${this.menuItem.cssClass}` : 'side-menu';
+      return this.menuItem.cssClass
+        ? `side-menu ${this.menuItem.cssClass}`
+        : 'side-menu';
    },
    computedClass() {
      // If active Inbox is present
      // donot highlight conversations
      if (this.activeInbox) return ' ';

-      if (this.$store.state.route.name === 'inbox_conversation' && this.menuItem.toStateName === 'home') {
+      if (
+        this.$store.state.route.name === 'inbox_conversation' &&
+        this.menuItem.toStateName === 'home'
+      ) {
        return 'active';
      }
      return ' ';
--- a/app/javascript/src/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/src/components/widgets/ChatTypeTabs.vue
@ -1,27 +1,40 @@
 <template>
-  <woot-tabs :index="tabsIndex"
-    @change="onTabChange">
-    <woot-tabs-item :name="item.name" :count="item.count" v-for="item in items"></woot-tabs-item>
+  <woot-tabs :index="tabsIndex" @change="onTabChange">
+    <woot-tabs-item
+      v-for="item in items"
+      :key="item.name"
+      :name="item.name"
+      :count="item.count"
+    />
  </woot-tabs>
 </template>
 <script>
 /* eslint no-console: 0 */

 export default {
-  props: ['items', 'activeTabIndex'],
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    activeTabIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
  data() {
    return {
      tabsIndex: 0,
    };
  },
-  methods: {
-    onTabChange(...args) {
-      this.$emit('chatTabChange', args[0]);
-      this.tabsIndex = args[0];
-    },
-  },
  created() {
    this.tabsIndex = this.activeTabIndex;
  },
+  methods: {
+    onTabChange(selectedTabIndex) {
+      this.$emit('chatTabChange', selectedTabIndex);
+      this.tabsIndex = selectedTabIndex;
+    },
+  },
 };
 </script>
--- a/app/javascript/src/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/src/components/widgets/conversation/ConversationBox.vue
@ -1,31 +1,51 @@
 <template>
  <div class="medium-8 columns conversation-wrap">
-    <div class="view-box columns" v-if="currentChat.id !== null">
+    <div v-if="currentChat.id !== null" class="view-box columns">
      <conversation-header :chat="currentChat" />
      <ul class="conversation-panel">
        <transition name="slide-up">
-          <li><span class="spinner message" v-if="shouldShowSpinner"></span></li>
+          <li>
+            <span v-if="shouldShowSpinner" class="spinner message" />
+          </li>
        </transition>
-        <conversation v-for="message in getReadMessages" :data="message"></conversation>
-        <li class="unread--toast" v-show="getUnreadCount != 0">
-          <span>{{getUnreadCount}}  UNREAD MESSAGE{{ getUnreadCount > 1 ? 'S' : '' }}</span>
+        <conversation
+          v-for="message in getReadMessages"
+          :key="message.id"
+          :data="message"
+        />
+        <li v-show="getUnreadCount != 0" class="unread--toast">
+          <span>
+            {{ getUnreadCount }} UNREAD MESSAGE{{
+              getUnreadCount > 1 ? 'S' : ''
+            }}
+          </span>
        </li>
-        <conversation v-for="message in getUnReadMessages" :data="message"></conversation>
+        <conversation
+          v-for="message in getUnReadMessages"
+          :key="message.id"
+          :data="message"
+        />
      </ul>
-      <ReplyBox v-on:scrollToMessage='focusLastMessage' :conversationId="currentChat.id" />
+      <ReplyBox
+        :conversation-id="currentChat.id"
+        @scrollToMessage="focusLastMessage"
+      />
    </div>
    <!-- No Conversation Selected -->
-    <div class="columns full-height conv-empty-state" >
+    <div class="columns full-height conv-empty-state">
      <!-- Loading status -->
-      <woot-loading-state :message="loadingIndicatorMessage" v-if="fetchingInboxes || loadingChatList" />
+      <woot-loading-state
+        v-if="fetchingInboxes || loadingChatList"
+        :message="loadingIndicatorMessage"
+      />
      <!-- Show empty state images if not loading -->
-      <div class="current-chat" v-if="!fetchingInboxes && !loadingChatList">
+      <div v-if="!fetchingInboxes && !loadingChatList" class="current-chat">
        <!-- No inboxes attached -->
        <div v-if="!inboxesList.length">
          <img src="~assets/images/inboxes.svg" alt="No Inboxes" />
          <span v-if="isAdmin()">
            {{ $t('CONVERSATION.NO_INBOX_1') }}
-            <br>
+            <br />
            <router-link to="/u/settings/inboxes/new">
              {{ $t('CONVERSATION.CLICK_HERE') }}
            </router-link>
@ -40,9 +60,9 @@
          <img src="~assets/images/chat.svg" alt="No Chat" />
          <span>
            {{ $t('CONVERSATION.NO_MESSAGE_1') }}
-            <br>
+            <br />
            <a :href="linkToMessage" target="_blank">
-            {{ $t('CONVERSATION.CLICK_HERE') }}
+              {{ $t('CONVERSATION.CLICK_HERE') }}
            </a>
            {{ $t('CONVERSATION.NO_MESSAGE_2') }}
          </span>
@ -54,18 +74,15 @@
        </div>
      </div>
    </div>
-
  </div>
 </template>

-
 <script>
 /* eslint no-console: 0 */
 /* eslint no-extra-boolean-cast: 0 */
 /* global bus */
 import { mapGetters } from 'vuex';

-import Thumbnail from '../Thumbnail';
 import ConversationHeader from './ConversationHeader';
 import ReplyBox from './ReplyBox';
 import Conversation from './Conversation';
@ -73,8 +90,21 @@ import conversationMixin from '../../../mixins/conversations';
 import adminMixin from '../../../mixins/isAdmin';

 export default {
-  props: ['user', 'inboxId'],
+  components: {
+    ConversationHeader,
+    Conversation,
+    ReplyBox,
+  },
+
  mixins: [conversationMixin, adminMixin],
+
+  props: {
+    inboxId: {
+      type: String,
+      required: true,
+    },
+  },
+
  data() {
    return {
      isLoadingPrevious: true,
@ -83,13 +113,6 @@ export default {
    };
  },

-  created() {
-    bus.$on('scrollToMessage', () => {
-      this.focusLastMessage();
-      this.makeMessagesRead();
-    });
-  },
-
  computed: {
    ...mapGetters({
      currentChat: 'getSelectedChat',
@ -109,7 +132,9 @@ export default {
      return this.$t('CONVERSATION.LOADING_CONVERSATIONS');
    },
    getMessages() {
-      const [chat] = this.allConversations.filter(c => c.id === this.currentChat.id);
+      const [chat] = this.allConversations.filter(
+        c => c.id === this.currentChat.id
+      );
      return chat;
    },
    // Get current FB Page ID
@ -117,7 +142,9 @@ export default {
      let stateInbox;
      if (this.inboxId) {
        const inboxId = Number(this.inboxId);
-        [stateInbox] = this.inboxesList.filter(inbox => inbox.channel_id === inboxId);
+        [stateInbox] = this.inboxesList.filter(
+          inbox => inbox.channel_id === inboxId
+        );
      } else {
        [stateInbox] = this.inboxesList;
      }
@ -134,13 +161,12 @@ export default {
    getUnReadMessages() {
      const chat = this.getMessages;
      return chat === undefined ? null : this.unReadMessages(chat);
-    },
-    showUnreadToast() {
-
    },
    shouldShowSpinner() {
-      return this.getMessages.dataFetched === undefined ||
-        (!this.listLoadingStatus && this.isLoadingPrevious);
+      return (
+        this.getMessages.dataFetched === undefined ||
+        (!this.listLoadingStatus && this.isLoadingPrevious)
+      );
    },

    shouldLoadMoreChats() {
@ -148,8 +174,14 @@ export default {
    },
  },

-  methods: {
+  created() {
+    bus.$on('scrollToMessage', () => {
+      this.focusLastMessage();
+      this.makeMessagesRead();
+    });
+  },

+  methods: {
    focusLastMessage() {
      setTimeout(() => {
        this.attachListner();
@ -158,27 +190,41 @@ export default {

    attachListner() {
      this.conversationPanel = this.$el.querySelector('.conversation-panel');
-      this.heightBeforeLoad = this.getUnreadCount === 0 ?
-        this.conversationPanel.scrollHeight : this.$el.querySelector('.conversation-panel .unread--toast').offsetTop - 56;
+      this.heightBeforeLoad =
+        this.getUnreadCount === 0
+          ? this.conversationPanel.scrollHeight
+          : this.$el.querySelector('.conversation-panel .unread--toast')
+              .offsetTop - 56;
      this.conversationPanel.scrollTop = this.heightBeforeLoad;
      this.conversationPanel.addEventListener('scroll', this.handleScroll);
      this.isLoadingPrevious = false;
    },

    handleScroll(e) {
-      const dataFetchCheck = (this.getMessages.dataFetched === true && this.shouldLoadMoreChats);
-      if (e.target.scrollTop < 100 && !this.isLoadingPrevious && dataFetchCheck) {
+      const dataFetchCheck =
+        this.getMessages.dataFetched === true && this.shouldLoadMoreChats;
+      if (
+        e.target.scrollTop < 100 &&
+        !this.isLoadingPrevious &&
+        dataFetchCheck
+      ) {
        this.isLoadingPrevious = true;
-        this.$store.dispatch('fetchPreviousMessages', {
-          id: this.currentChat.id,
-          before: this.getMessages.messages[0].id,
-        }).then(() => {
-          this.conversationPanel.scrollTop = this.conversationPanel.scrollHeight - (
-            this.heightBeforeLoad - this.conversationPanel.scrollTop);
-          this.isLoadingPrevious = false;
-          this.heightBeforeLoad = this.getUnreadCount === 0 ?
-            this.conversationPanel.scrollHeight : this.$el.querySelector('.conversation-panel .unread--toast').offsetTop - 56;
-        });
+        this.$store
+          .dispatch('fetchPreviousMessages', {
+            id: this.currentChat.id,
+            before: this.getMessages.messages[0].id,
+          })
+          .then(() => {
+            this.conversationPanel.scrollTop =
+              this.conversationPanel.scrollHeight -
+              (this.heightBeforeLoad - this.conversationPanel.scrollTop);
+            this.isLoadingPrevious = false;
+            this.heightBeforeLoad =
+              this.getUnreadCount === 0
+                ? this.conversationPanel.scrollHeight
+                : this.$el.querySelector('.conversation-panel .unread--toast')
+                    .offsetTop - 56;
+          });
      }
    },

@ -191,12 +237,5 @@ export default {
      }
    },
  },
-
-  components: {
-    Thumbnail,
-    ConversationHeader,
-    Conversation,
-    ReplyBox,
-  },
 };
 </script>
--- a/app/javascript/src/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/src/routes/dashboard/settings/inbox/ChannelList.vue
@ -5,7 +5,11 @@
      :header-content="$t('INBOX_MGMT.ADD.AUTH.DESC')"
    />
    <div class="row channels">
-      <channel-item v-for="channel in channelList" :channel="channel" />
+      <channel-item
+        v-for="channel in channelList"
+        :key="channel"
+        :channel="channel"
+      />
    </div>
  </div>
 </template>
@ -23,26 +27,23 @@ export default {
  },
  data() {
    return {
-      channelList: [
-        'facebook',
-        'twitter',
-        'telegram',
-        'line',
-      ],
+      channelList: ['facebook', 'twitter', 'telegram', 'line'],
    };
  },
  created() {
-    bus.$on('channelItemClick', (channel) => {
+    bus.$on('channelItemClick', channel => {
      this.initChannelAuth(channel);
    });
  },
  methods: {
    initChannelAuth(channel) {
      if (channel === 'facebook') {
-        router.push({ name: 'settings_inboxes_page_channel', params: { page: 'new', sub_page: 'facebook' } });
+        router.push({
+          name: 'settings_inboxes_page_channel',
+          params: { page: 'new', sub_page: 'facebook' },
+        });
      }
    },
  },
 };
-
 </script>
--- a/app/javascript/src/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/src/routes/dashboard/settings/reports/Index.vue
@ -5,37 +5,41 @@
        v-model="currentDateRangeSelection"
        track-by="name"
        label="name"
-        @select="changeDateSelection"
        placeholder="Select one"
        :options="dateRange"
        :searchable="false"
        :allow-empty="true"
+        @select="changeDateSelection"
      />
    </div>
    <div class="row">
      <woot-report-stats-card
        v-for="(metric, index) in metrics"
-        :heading="metric.NAME"
-        :point="accountSummary[metric.KEY]"
+        :key="metric.NAME"
        :desc="metric.DESC"
+        :heading="metric.NAME"
        :index="index"
-        :selected="index === currentSelection"
        :on-click="changeSelection"
+        :point="accountSummary[metric.KEY]"
+        :selected="index === currentSelection"
      />
    </div>
    <div class="report-bar">
-      <woot-loading-state :message="$t('REPORT.LOADING_CHART')" v-if="accountReport.isFetching"></woot-loading-state>
+      <woot-loading-state
+        v-if="accountReport.isFetching"
+        :message="$t('REPORT.LOADING_CHART')"
+      />
      <div v-else class="chart-container">
-        <woot-bar :collection="collection" v-if="accountReport.data.length"/>
-        <span class="empty-state" v-else v-html="$t('REPORT.NO_ENOUGH_DATA')" />
+        <woot-bar v-if="accountReport.data.length" :collection="collection" />
+        <span v-else class="empty-state">
+          {{ $t('REPORT.NO_ENOUGH_DATA') }}
+        </span>
      </div>
    </div>
  </div>
 </template>

-
 <script>
-
 import { mapGetters } from 'vuex';
 import moment from 'moment';

@ -68,7 +72,9 @@ export default {
        return {};
      }
      if (!this.accountReport.data.length) return {};
-      const labels = this.accountReport.data.map(element => moment.unix(element.timestamp).format('DD/MMM'));
+      const labels = this.accountReport.data.map(element =>
+        moment.unix(element.timestamp).format('DD/MMM')
+      );
      const data = this.accountReport.data.map(element => element.value);
      return {
        labels,
--- a/package.json
+++ b/package.json
@ -4,11 +4,11 @@
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "axios": "^0.19.0",
-    "bourbon": "~4.2.7",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
+    "bourbon": "~4.2.7",
    "chart.js": "~2.5.0",
    "dotenv": "^8.0.0",
    "emojione": "~2.2.7",
@ -74,6 +74,6 @@
    ]
  },
  "scripts": {
-    "eslint": "eslint app/javascript"
+    "eslint": "eslint app/javascript --fix"
  }
 }