Implement fuzzy page search using fuse.js (#86)

src/stores/pages/folder.ts

@@ -1,19 +1,53 @@
 import { defineStore } from "pinia";
-import { Folder, Track } from "../../interfaces";
+import { ComputedRef } from "vue";
 
-import fetchThem from "../../composables/fetch/folders";
+import { useFuse } from "@/utils";
+
+import { FuseTrackOptions } from "@/composables/enums";
+import fetchThem from "@/composables/fetch/folders";
+import { Folder, FuseResult, Track } from "@/interfaces";
 
 export default defineStore("FolderDirs&Tracks", {
   state: () => ({
+    query: "",
     path: <string>{},
-    dirs: <Folder[]>[],
-    tracks: <Track[]>[],
+    allDirs: <Folder[]>[],
+    allTracks: <Track[]>[],
   }),
   actions: {
     async fetchAll(path: string) {
       const { tracks, folders } = await fetchThem(path);
 
-      [this.path, this.dirs, this.tracks] = [path, folders, tracks];
+      [this.path, this.allDirs, this.allTracks] = [path, folders, tracks];
+    },
+    resetQuery() {
+      this.query = "";
+    },
+  },
+  getters: {
+    filteredTracks(): ComputedRef<FuseResult[]> {
+      return useFuse(this.query, this.allTracks, FuseTrackOptions);
+    },
+    tracks(): Track[] {
+      const tracks = this.filteredTracks.value.map((result: FuseResult) => {
+        const t = {
+          ...result.item,
+          index: result.refIndex,
+        };
+
+        return t;
+      });
+
+      return tracks;
+    },
+    dirs(): Folder[] {
+      const dirs = useFuse(this.query, this.allDirs, {
+        keys: ["name"],
+      });
+
+      return dirs.value.map((result) => {
+        return result.item;
+      });
     },
   },
 });