From 84fce25cc87ef19dd258d257ed72354dca1baa8a Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Tue, 15 Sep 2020 07:40:13 -0500
Subject: [PATCH] change mouseover event to use short timeouts in order to
 reduce unused pre-fetching traffic, minor reformatting, remove preload axios
 console.log

---
 client/src/components/SearchResult.vue  | 34 ++++++++++++-------------
 client/src/components/SearchResults.vue |  6 +----
 client/src/store.js                     |  2 +-
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/client/src/components/SearchResult.vue b/client/src/components/SearchResult.vue
index 955d654..ce79db5 100644
--- a/client/src/components/SearchResult.vue
+++ b/client/src/components/SearchResult.vue
@@ -1,12 +1,7 @@
 <template>
-    <b-card
-        class="mb-1"
-        body-class="p-0 expandable-result"
-        footer-class="my-1"
-        v-on:mouseover="hover"
-        v-on:click="toggleExpansion"
-        :class="[expanded ? 'expanded' : '']"
-    >
+    <b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1"
+            @mouseover="hoverOn" @mouseleave="hoverOff" v-on:click="toggleExpansion"
+            :class="[expanded ? 'expanded' : '']">
         <b-card-text class="mu-2 py-1 mb-1">
             <table v-if="expanded" class="quote-list px-3 py-1 w-100">
                 <tr
@@ -56,15 +51,9 @@
                     ></td>
                 </tr>
             </table>
-            <router-link
-                v-if="expanded"
-                class="no-link search-result-link w-100 text-muted mb-2 ml-2"
-                :to="{
-          name: 'Episode',
-          params: { season: item.season, episode: item.episode_rel },
-          hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`,
-        }"
-            >
+            <router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
+                         :to="{name: 'Episode', params: { season: item.season, episode: item.episode_rel },
+                            hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`, }">
                 Season {{ item.season }} Episode {{ item.episode_rel }} Scene
                 {{ item.section_rel }}
             </router-link>
@@ -119,6 +108,7 @@ export default {
             fetching: false,
             above: null,
             below: null,
+            timeoutID: null
         };
     },
     computed: {
@@ -135,13 +125,21 @@ export default {
                 this.fetchQuotes();
             }
         },
-        hover() {
+        hoverFetch() {
             if (!this.fetched && !this.fetching) {
                 this.fetching = true;
                 this.fetchQuotes();
                 this.fetching = false;
             }
         },
+        hoverOn() {
+            // Schedule a fetching event
+            this.timeoutID = setTimeout(this.hoverFetch, 300);
+        },
+        hoverOff() {
+            // Hover is off. Unschedule event if it has not already fetched.
+            clearTimeout(this.timeoutID);
+        },
         fetchQuotes() {
             const path = `${process.env.VUE_APP_API_URL}/api/quote_surround?season=\
 ${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`;
diff --git a/client/src/components/SearchResults.vue b/client/src/components/SearchResults.vue
index 7264cc4..e273340 100644
--- a/client/src/components/SearchResults.vue
+++ b/client/src/components/SearchResults.vue
@@ -2,11 +2,7 @@
     <div>
         <ais-hits>
             <div slot-scope="{ items }">
-                <SearchResult
-                    v-for="item in items"
-                    :item="item"
-                    :key="item.objectID"
-                ></SearchResult>
+                <SearchResult v-for="item in items" :item="item" :key="item.objectID"></SearchResult>
             </div>
         </ais-hits>
     </div>
diff --git a/client/src/store.js b/client/src/store.js
index d77cf5a..0b217b2 100644
--- a/client/src/store.js
+++ b/client/src/store.js
@@ -84,7 +84,7 @@ export default new Vuex.Store({
         },
         [types.PRELOAD]({commit}) {
             const path = `${process.env.VUE_APP_API_URL}/api/episodes/`;
-            console.log('preload axios')
+
             axios.get(path)
                 .then((res) => {
                     for (const season of res.data)