From c562e529fdcc02383dfa7949a11246fa5e7eeac2 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 2 Aug 2022 23:58:05 +0300
Subject: [PATCH] implement clearing search input on start typing

+ rename pages folder to fetch in composables folder
---
 src/App.vue                                   | 6 ++++--
 src/components/modals/NewPlaylist.vue         | 2 +-
 src/components/modals/updatePlaylist.vue      | 4 ++--
 src/composables/{pages => fetch}/album.ts     | 0
 src/composables/{pages => fetch}/folders.ts   | 0
 src/composables/{pages => fetch}/playlists.ts | 2 +-
 src/composables/{ => fetch}/searchMusic.ts    | 2 +-
 src/composables/useKeyboard.ts                | 2 +-
 src/contexts/track_context.ts                 | 2 +-
 src/stores/pages/album.ts                     | 2 +-
 src/stores/pages/folder.ts                    | 2 +-
 src/stores/pages/playlist.ts                  | 2 +-
 src/stores/pages/playlists.ts                 | 2 +-
 src/stores/search.ts                          | 2 +-
 14 files changed, 16 insertions(+), 14 deletions(-)
 rename src/composables/{pages => fetch}/album.ts (100%)
 rename src/composables/{pages => fetch}/folders.ts (100%)
 rename src/composables/{pages => fetch}/playlists.ts (98%)
 rename src/composables/{ => fetch}/searchMusic.ts (98%)

diff --git a/src/App.vue b/src/App.vue
index 8dcd4631..9b2d0b92 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,7 +46,7 @@ const app_dom = document.getElementById("app");
 const route = useRoute();
 const router = useRouter();
 
-// function to add the 
+// function to add the
 
 queue.readQueue();
 useShortcuts(useQStore);
@@ -73,7 +73,9 @@ router.afterEach((to, from) => {
 });
 
 onStartTyping(() => {
-  document.getElementById("globalsearch").focus();
+  const elem = document.getElementById("globalsearch") as HTMLInputElement;
+  elem.focus();
+  elem.value = "";
 });
 </script>
 
diff --git a/src/components/modals/NewPlaylist.vue b/src/components/modals/NewPlaylist.vue
index 15e96728..ba677e68 100644
--- a/src/components/modals/NewPlaylist.vue
+++ b/src/components/modals/NewPlaylist.vue
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
-import { createNewPlaylist } from "../../composables/pages/playlists";
+import { createNewPlaylist } from "../../composables/fetch/playlists";
 import { Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import usePlaylistStore from "@/stores/pages/playlists";
diff --git a/src/components/modals/updatePlaylist.vue b/src/components/modals/updatePlaylist.vue
index a36e88fc..59f0124a 100644
--- a/src/components/modals/updatePlaylist.vue
+++ b/src/components/modals/updatePlaylist.vue
@@ -55,8 +55,8 @@
 <script setup lang="ts">
 import usePStore from "@/stores/pages/playlist";
 import { onMounted } from "vue";
-import { updatePlaylist } from "../../composables/pages/playlists";
-import { Playlist } from "../../interfaces";
+import { updatePlaylist } from "@/composables/fetch/playlists";
+import { Playlist } from "@/interfaces";
 
 const pStore = usePStore();
 
diff --git a/src/composables/pages/album.ts b/src/composables/fetch/album.ts
similarity index 100%
rename from src/composables/pages/album.ts
rename to src/composables/fetch/album.ts
diff --git a/src/composables/pages/folders.ts b/src/composables/fetch/folders.ts
similarity index 100%
rename from src/composables/pages/folders.ts
rename to src/composables/fetch/folders.ts
diff --git a/src/composables/pages/playlists.ts b/src/composables/fetch/playlists.ts
similarity index 98%
rename from src/composables/pages/playlists.ts
rename to src/composables/fetch/playlists.ts
index 5f45d6b1..7a42a84c 100644
--- a/src/composables/pages/playlists.ts
+++ b/src/composables/fetch/playlists.ts
@@ -1,4 +1,4 @@
-import { Artist } from "./../../interfaces";
+import { Artist } from "../../interfaces";
 import { Playlist, Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import state from "../state";
diff --git a/src/composables/searchMusic.ts b/src/composables/fetch/searchMusic.ts
similarity index 98%
rename from src/composables/searchMusic.ts
rename to src/composables/fetch/searchMusic.ts
index 27d7e43a..fe80343c 100644
--- a/src/composables/searchMusic.ts
+++ b/src/composables/fetch/searchMusic.ts
@@ -1,4 +1,4 @@
-import state from "./state";
+import state from "../state";
 import axios from "axios";
 
 const base_url = `${state.settings.uri}/search`;
diff --git a/src/composables/useKeyboard.ts b/src/composables/useKeyboard.ts
index d7825eb5..0a28788f 100644
--- a/src/composables/useKeyboard.ts
+++ b/src/composables/useKeyboard.ts
@@ -3,7 +3,7 @@ import useQStore from "@/stores/queue";
 let key_down_fired = false;
 
 function focusSearchBox() {
-  const elem = document.getElementById("search");
+  const elem = document.getElementById("globalsearch");
 
   elem.focus();
 }
diff --git a/src/contexts/track_context.ts b/src/contexts/track_context.ts
index 244d1842..3d1fb139 100644
--- a/src/contexts/track_context.ts
+++ b/src/contexts/track_context.ts
@@ -4,7 +4,7 @@ import { Option } from "../interfaces";
 import {
   getAllPlaylists,
   addTrackToPlaylist,
-} from "../composables/pages/playlists";
+} from "../composables/fetch/playlists";
 
 import useQueueStore from "../stores/queue";
 import useModalStore from "../stores/modal";
diff --git a/src/stores/pages/album.ts b/src/stores/pages/album.ts
index 81c4a302..665340a9 100644
--- a/src/stores/pages/album.ts
+++ b/src/stores/pages/album.ts
@@ -5,7 +5,7 @@ import {
   getAlbumTracks,
   getAlbumArtists,
   getAlbumBio,
-} from "../../composables/pages/album";
+} from "../../composables/fetch/album";
 
 function sortTracks(tracks: Track[]) {
   return tracks.sort((a, b) => {
diff --git a/src/stores/pages/folder.ts b/src/stores/pages/folder.ts
index 6ea9498e..803d2df6 100644
--- a/src/stores/pages/folder.ts
+++ b/src/stores/pages/folder.ts
@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { Folder, Track } from "../../interfaces";
 
-import fetchThem from "../../composables/pages/folders";
+import fetchThem from "../../composables/fetch/folders";
 
 export default defineStore("FolderDirs&Tracks", {
   state: () => ({
diff --git a/src/stores/pages/playlist.ts b/src/stores/pages/playlist.ts
index a1941627..f6e4fcc9 100644
--- a/src/stores/pages/playlist.ts
+++ b/src/stores/pages/playlist.ts
@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 import {
   getPlaylist,
   getPlaylistArtists,
-} from "../../composables/pages/playlists";
+} from "../../composables/fetch/playlists";
 import { Track, Playlist } from "../../interfaces";
 
 export default defineStore("playlist-tracks", {
diff --git a/src/stores/pages/playlists.ts b/src/stores/pages/playlists.ts
index 48509a04..6fb46440 100644
--- a/src/stores/pages/playlists.ts
+++ b/src/stores/pages/playlists.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { Playlist } from "../../interfaces";
-import { getAllPlaylists } from "../../composables/pages/playlists";
+import { getAllPlaylists } from "../../composables/fetch/playlists";
 
 export default defineStore("playlists", {
   state: () => ({
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 49344b71..bc1a545c 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -8,7 +8,7 @@ import {
   loadMoreTracks,
   loadMoreAlbums,
   loadMoreArtists,
-} from "../composables/searchMusic";
+} from "../composables/fetch/searchMusic";
 import { watch } from "vue";
 import useDebouncedRef from "../composables/useDebouncedRef";
 import useTabStore from "./tabs";