From 73a53c8161e0c0198b5708141fc9c0bfc48cd042 Mon Sep 17 00:00:00 2001
From: Kevin van der Werff <Kevin van der Werff>
Date: Thu, 7 Nov 2019 00:52:25 +0100
Subject: [PATCH] :construction: Debounce of 500ms

---
 components/Search.vue |  2 +-
 pages/search.vue      | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/Search.vue b/components/Search.vue
index f2d8f49..5bc4360 100644
--- a/components/Search.vue
+++ b/components/Search.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  input.search(v-model="searchInput" type="text" placeholder="Search (does not work currently, sorry)")
+  input.search(v-model="searchInput" type="text" placeholder="Search")
 </template>
 
 <script>
diff --git a/pages/search.vue b/pages/search.vue
index 6dbe317..91a6bca 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -16,7 +16,6 @@
 import Card from '../components/Card'
 import TableRow from '../components/TableRow'
 import * as R from 'ramda'
-// import { removeFirstChar } from '../utils/pure'
 
 export default {
   components: { Card, TableRow },
@@ -27,6 +26,7 @@ export default {
       searchInput: {},
       showTitle: false,
       showCards: false,
+      debounceID: 0,
     }
   },
   computed: {
@@ -36,13 +36,16 @@ export default {
   },
   watch: {
     $route(updatedChanges) {
-      const keywords = updatedChanges.query.keywords
-      const tags = updatedChanges.query.tags
-      const newSearchInput = {
-        keywords: keywords && R.split(',', keywords),
-        tags: tags && R.split(',', tags),
-      }
-      this.searchInput = newSearchInput
+      clearTimeout(this.debounceID)
+      this.debounceID = setTimeout(() => {
+        const keywords = updatedChanges.query.keywords
+        const tags = updatedChanges.query.tags
+        const newSearchInput = {
+          keywords: keywords && R.split(',', keywords),
+          tags: tags && R.split(',', tags),
+        }
+        this.searchInput = newSearchInput
+      }, 500)
     },
     searchInput(searchInput) {
       this.resources = this.$store.getters['data/findBySearchInputs'](searchInput.keywords, searchInput.tags)