From 14d98dcdbe2c4159bdcf842d73ce568f08f4c7fe Mon Sep 17 00:00:00 2001
From: Viktor Geringer <devfakeplus@googlemail.com>
Date: Mon, 20 Feb 2017 15:09:17 +0100
Subject: [PATCH] use debounce (#52)

---
 client/app/components/Content/Item.vue        | 19 ++++++++++---------
 .../resources/sass/components/_content.scss   |  4 ----
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/client/app/components/Content/Item.vue b/client/app/components/Content/Item.vue
index f52b6a2..7c49b26 100644
--- a/client/app/components/Content/Item.vue
+++ b/client/app/components/Content/Item.vue
@@ -5,9 +5,11 @@
         <span v-if="localItem.rating" :class="'item-rating rating-' + localItem.rating" @click="changeRating()">
           <i class="icon-rating"></i>
         </span>
-        <span v-if=" ! localItem.rating && localItem.tmdb_id" class="item-rating item-new" :class="{disabled: disabled}" @click="addNewItem()">
-          <span class="loader smallsize-loader" v-if="rated"><i></i></span>
-          <i class="icon-add" v-if=" ! rated"></i>
+        <span v-if=" ! localItem.rating && localItem.tmdb_id && ! rated" class="item-rating item-new" @click="addNewItem()">
+          <i class="icon-add"></i>
+        </span>
+        <span v-if=" ! localItem.rating && localItem.tmdb_id && rated" class="item-rating item-new">
+          <span class="loader smallsize-loader"><i></i></span>
         </span>
 
         <router-link v-if="localItem.tmdb_id" :to="suggestions" class="recommend-item">{{ lang('suggestions') }}</router-link>
@@ -39,7 +41,8 @@
 
   import { mapMutations, mapActions } from 'vuex';
 
-  const debounceMilliseconds = 700;
+  const ratingMilliseconds = 700;
+  const newItemMilliseconds = 200;
 
   export default {
     mixins: [Helper],
@@ -47,7 +50,8 @@
     props: ['item', 'genre', 'date'],
 
     created() {
-      this.saveNewRating = debounce(this.saveNewRating, debounceMilliseconds);
+      this.saveNewRating = debounce(this.saveNewRating, ratingMilliseconds);
+      this.addNewItem = debounce(this.addNewItem, newItemMilliseconds, true);
     },
 
     data() {
@@ -56,8 +60,7 @@
         latestEpisode: this.item.latest_episode,
         auth: config.auth,
         prevRating: null,
-        rated: false,
-        disabled: false
+        rated: false
       }
     },
 
@@ -156,12 +159,10 @@
 
       addNewItem() {
         if(this.auth) {
-          this.disabled = true;
           this.rated = true;
 
           http.post(`${config.api}/add`, {item: this.localItem}).then(value => {
             this.localItem = value.data;
-            this.disabled = false;
             this.rated = false;
           }, error => {
             if(error.status == 409) {
diff --git a/client/resources/sass/components/_content.scss b/client/resources/sass/components/_content.scss
index ae095ce..ce799fc 100644
--- a/client/resources/sass/components/_content.scss
+++ b/client/resources/sass/components/_content.scss
@@ -202,10 +202,6 @@ main {
       }
     }
   }
-
-  &.disabled {
-    pointer-events: none;
-  }
 }
 
 .rating-1 {