From f6787421c3959948acac1a6faca11c27b79fb113 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 22 Jan 2022 07:07:43 +0300
Subject: [PATCH] debounce global search

---
 server/app/api.py                      |  7 +++++-
 src/components/FolderView/Header.vue   |  1 +
 src/components/FolderView/SongList.vue |  4 +++-
 src/components/Search.vue              | 33 +++++++++++++-------------
 src/components/SongItem.vue            |  4 ++++
 src/composables/searchMusic.js         |  3 ++-
 6 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/server/app/api.py b/server/app/api.py
index c37ebba..5ff2598 100644
--- a/server/app/api.py
+++ b/server/app/api.py
@@ -33,7 +33,12 @@ def search_by_title():
     albums = []
     artists = []
 
-    s = instances.songs_instance.find_song_by_title(query)
+    s = []
+
+    for track in all_the_f_music:
+        if query.lower() in track['title'].lower():
+            s.append(track)
+    
     al = instances.songs_instance.search_songs_by_album(query)
     ar = instances.songs_instance.search_songs_by_artist(query)
 
diff --git a/src/components/FolderView/Header.vue b/src/components/FolderView/Header.vue
index f9300a7..b441577 100644
--- a/src/components/FolderView/Header.vue
+++ b/src/components/FolderView/Header.vue
@@ -40,6 +40,7 @@ export default {
     }
 
     watch(query, () => {
+      console.log(query.value);
       emit("search", query.value);
     });
 
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index a77feb0..60cb1a3 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -115,7 +115,7 @@ export default {
   }
 }
 
-.folder .table table {
+table {
   border-collapse: collapse;
   text-transform: capitalize;
   width: 100%;
@@ -143,6 +143,8 @@ export default {
       @include tablet-landscape {
         display: none;
       }
+
+      width: 5rem;
     }
 
     th.album-header {
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 60de054..dd9fd27 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-search  border" ref="searchComponent">
+  <div class="right-search border" ref="searchComponent">
     <div class="input">
       <div class="search-icon image"></div>
       <div class="filter">
@@ -48,14 +48,12 @@
       <div class="tracks-results">
         <div class="heading">TRACKS<span class="more">SEE ALL</span></div>
         <div class="items">
-          <div class="result-item" v-for="song in songs" :key="song">
-            <div class="album-art image"></div>
-            <div class="tags">
-              <span class="title">{{ song.title }}</span>
-              <hr />
-              <span class="artist">{{ song.artist }}</span>
-            </div>
-          </div>
+          <table>
+            <thead></thead>
+            <tbody>
+              <SongItem v-for="song in songs" :key="song" :song="song" />
+            </tbody>
+          </table>
         </div>
       </div>
       <!--  -->
@@ -89,11 +87,15 @@ import { ref, toRefs } from "@vue/reactivity";
 import { onMounted, watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
 import searchMusic from "../composables/searchMusic.js";
-// import useDebounce from "../composed/useDebounce.js";
+import useDebouncedRef from "@/composables/useDebouncedRef";
+import SongItem from "@/components/SongItem.vue";
 
 export default {
   emits: ["expandSearch", "collapseSearch"],
   props: ["search"],
+  components: {
+    SongItem,
+  },
   setup(props, { emit }) {
     const options = [
       {
@@ -121,7 +123,7 @@ export default {
         icon: "🈁",
       },
     ];
-    
+
     const loading = ref(state.loading);
     const searchComponent = ref(null);
     const filters = ref(state.filters);
@@ -132,7 +134,7 @@ export default {
     ];
 
     const artists = ["Michael Jackson waihenya", "Jackson 5"];
-    const query = ref(state.search_query);
+    const query = useDebouncedRef("", 400);
     const magic_flag = ref(state.magic_flag);
     const is_hidden = toRefs(props).search;
 
@@ -176,8 +178,7 @@ export default {
     }
 
     watch(query, (new_query) => {
-      // search music
-      // searchMusic(new_query);
+      searchMusic(new_query);
 
       state.search_query.value = new_query;
       if (new_query !== "") {
@@ -202,7 +203,6 @@ export default {
       });
     });
 
-
     return {
       addFilter,
       activateMagicFlag,
@@ -403,9 +403,10 @@ export default {
 
 .right-search .tracks-results {
   border-radius: 0.5rem;
-  background: #ca0377;
+  // background: #ca0377;
   margin-left: $small;
   padding: $small;
+  // border: solid;
 
   .items {
     border-radius: $small;
diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue
index 0298589..03bd10c 100644
--- a/src/components/SongItem.vue
+++ b/src/components/SongItem.vue
@@ -87,6 +87,10 @@ export default {
     }
   }
 
+  .song-duration {
+    width: 5rem !important;
+  }
+  
   cursor: pointer;
 
   .flex {
diff --git a/src/composables/searchMusic.js b/src/composables/searchMusic.js
index f505d40..8e41ba0 100644
--- a/src/composables/searchMusic.js
+++ b/src/composables/searchMusic.js
@@ -10,7 +10,8 @@ async function search(query) {
     state.search_tracks.value = json.songs;
     state.search_albums.value = json.albums;
     state.search_artists.value = json.artists;
-    console.log(state.search);
+
+    console.log(state.search_tracks.value);
 }
 
 export default search;
\ No newline at end of file