From 15ef5234d1353f405577e81f3dccac8ec4d7cbe4 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 30 Mar 2022 14:52:52 +0300
Subject: [PATCH] [client] remove search on folder

---
 src/components/FolderView/Header.vue |  40 +-------
 src/views/FolderView.vue             | 135 +++++----------------------
 2 files changed, 24 insertions(+), 151 deletions(-)

diff --git a/src/components/FolderView/Header.vue b/src/components/FolderView/Header.vue
index e9b849e3..30831ae2 100644
--- a/src/components/FolderView/Header.vue
+++ b/src/components/FolderView/Header.vue
@@ -12,18 +12,6 @@
         </div>
       </div>
     </div>
-    <div class="search">
-      <div class="loaderr">
-        <Loader />
-      </div>
-      <input
-        type="text"
-        class="search-input"
-        placeholder="Search this folder"
-        v-model="query"
-      />
-      <div class="search-icon image"></div>
-    </div>
   </div>
 </template>
 
@@ -57,40 +45,14 @@ export default {
 
 <style lang="scss">
 .folder-top {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
   border-bottom: 1px solid $separator;
   width: calc(100% - 0.5rem);
   padding-bottom: $small;
   height: 3rem;
 }
 
-.folder-top .search {
-  width: 50%;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  place-items: end;
-
-  .loaderr {
-    width: 2rem;
-  }
-
-  .search-input {
-    max-width: 20rem;
-    width: 100%;
-    border-radius: 0.5rem;
-    padding-left: 1rem;
-    background-color: transparent;
-    color: $white;
-    font-size: 1rem;
-    line-height: 2.2rem;
-    outline: none;
-    border: 1px solid $gray3;
-  }
-}
-
 .folder-top .fname {
-  width: 50%;
+  width: 100%;
   display: flex;
   align-items: center;
 
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index e404087f..2763495b 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,133 +1,44 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
+      <Header :path="FStore.path" :first_song="FStore.tracks[0]" />
     </div>
     <div id="scrollable" ref="scrollable">
-      <FolderList :folders="folders" />
-      <div class="separator" v-if="folders.length && songs.length"></div>
-      <SongList :songs="songs" />
+      <FolderList :folders="FStore.dirs" />
+      <div
+        class="separator"
+        v-if="FStore.dirs.length && FStore.tracks.length"
+      ></div>
+      <SongList :tracks="FStore.tracks" :path="FStore.path" />
     </div>
   </div>
 </template>
 
-<script>
-import { computed, ref } from "@vue/reactivity";
-import { useRoute } from "vue-router";
+<script setup>
+import { ref } from "@vue/reactivity";
+import { onBeforeRouteUpdate } from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import Header from "@/components/FolderView/Header.vue";
 
-import getTracksAndDirs from "../composables/getFilesAndFolders";
-import { onMounted, watch } from "@vue/runtime-core";
-import state from "@/composables/state";
+import useFStore from "../stores/folder";
+import state from "../composables/state";
 
-export default {
-  components: {
-    SongList,
-    FolderList,
-    Header,
-  },
-  setup() {
-    const route = useRoute();
-    const path = ref(route.params.path);
+const FStore = useFStore();
 
-    const song_list = ref(state.folder_song_list);
-    const folders_list = ref(state.folder_list);
+const scrollable = ref(null);
 
-    const scrollable = ref(null);
-
-    const query = ref("");
-
-    const songs = computed(() => {
-      const songs_ = [];
-
-      if (query.value.length) {
-        for (let i = 0; i < song_list.value.length; i++) {
-          if (
-            song_list.value[i].title
-              .toLowerCase()
-              .includes(query.value.toLowerCase())
-          ) {
-            songs_.push(song_list.value[i]);
-          }
-        }
-
-        return songs_;
-      } else {
-        return song_list.value;
-      }
+onBeforeRouteUpdate((to) => {
+  state.loading.value = true;
+  FStore.fetchAll(to.params.path)
+    .then(() => {
+      scrollable.value.scrollTop = 0;
+    })
+    .then(() => {
+      state.loading.value = false;
     });
-
-    const folders = computed(() => {
-      const folders_ = [];
-
-      if (query.value.length) {
-        for (let i = 0; i < folders_list.value.length; i++) {
-          if (
-            folders_list.value[i].name
-              .toLowerCase()
-              .includes(query.value.toLowerCase())
-          ) {
-            folders_.push(folders_list.value[i]);
-          }
-        }
-
-        return folders_;
-      } else {
-        return folders_list.value;
-      }
-    });
-
-    onMounted(() => {
-      const getDirData = (path) => {
-        state.loading.value = true;
-        getTracksAndDirs(path)
-          .then((data) => {
-            scrollable.value.scrollTop = 0;
-
-            state.folder_song_list.value = data.tracks;
-            state.folder_list.value = data.folders;
-            console.log(data);
-
-            state.loading.value = false;
-          })
-          .then(() => {
-            setTimeout(() => {
-              query.value = "";
-            }, 100);
-          });
-      };
-
-      getDirData(path.value);
-
-      watch(
-        () => route.params,
-        () => {
-          path.value = route.params.path;
-
-          if (!path.value) return;
-
-          getDirData(path.value);
-          console.log(path.value);
-        }
-      );
-    });
-
-    function updateQueryString(value) {
-      query.value = value;
-    }
-
-    return {
-      updateQueryString,
-      songs,
-      folders,
-      path,
-      scrollable,
-    };
-  },
-};
+});
 </script>
 
 <style lang="scss">