FileManager use fuse

web_app/src/components/FileManager.tsx

@@ -16,7 +16,7 @@ import {
 } from "@radix-ui/react-icons"
 import { useToggle } from "react-use"
 import { useDebounce } from "@uidotdev/usehooks"
-import FlexSearch from "flexsearch/dist/flexsearch.bundle.js"
+import Fuse from "fuse.js"
 import { useToast } from "@/components/ui/use-toast"
 import { API_ENDPOINT, getMedias } from "@/lib/api"
 import { IconButton } from "./ui/button"
@@ -33,7 +33,7 @@ import {
 import { ScrollArea } from "./ui/scroll-area"
 import { DialogTrigger } from "@radix-ui/react-dialog"
 import { useStore } from "@/lib/states"
-import { SortBy, SortOrder } from "@/lib/types"
+import { Filename, SortBy, SortOrder } from "@/lib/types"
 import { FolderClosed } from "lucide-react"
 import useHotKey from "@/hooks/useHotkey"
 
@@ -44,14 +44,6 @@ interface Photo {
   name: string
 }
 
-interface Filename {
-  name: string
-  height: number
-  width: number
-  ctime: number
-  mtime: number
-}
-
 const SORT_BY_NAME = "Name"
 const SORT_BY_CREATED_TIME = "Created time"
 const SORT_BY_MODIFIED_TIME = "Modified time"
@@ -148,17 +140,12 @@ export default function FileManager(props: Props) {
         const filenames = await getMedias(tab)
         let filteredFilenames = filenames
         if (debouncedSearchText) {
-          const index = new FlexSearch.Index({
-            tokenize: "forward",
-            minlength: 1,
+          const fuse = new Fuse(filteredFilenames, {
+            keys: ["name"],
           })
-          filenames.forEach((filename: Filename, id: number) =>
-            index.add(id, filename.name)
-          )
-          const results: FlexSearch.IndexSearchResult =
-            index.search(debouncedSearchText)
-          filteredFilenames = results.map(
-            (id: FlexSearch.Id) => filenames[id as number]
+          const items = fuse.search(debouncedSearchText)
+          filteredFilenames = items.map(
+            (item) => filteredFilenames[item.refIndex]
           )
         }
 

web_app/src/lib/api.ts

@@ -1,4 +1,4 @@
-import { ModelInfo, PowerPaintTask, Rect } from "@/lib/types"
+import { Filename, ModelInfo, PowerPaintTask, Rect } from "@/lib/types"
 import { Settings } from "@/lib/states"
 import { srcToFile } from "@/lib/utils"
 import axios from "axios"
@@ -186,7 +186,7 @@ export async function getMediaFile(tab: string, filename: string) {
   throw new Error(errMsg)
 }
 
-export async function getMedias(tab: string) {
+export async function getMedias(tab: string): Promise<Filename[]> {
   const res = await fetch(`${API_ENDPOINT}/medias/${tab}`, {
     method: "GET",
   })

web_app/src/lib/types.ts

@@ -1,3 +1,11 @@
+export interface Filename {
+  name: string
+  height: number
+  width: number
+  ctime: number
+  mtime: number
+}
+
 export interface ModelInfo {
   name: string
   path: string