add fuse search for my decks

package-lock.json

@@ -16,6 +16,7 @@
         "classnames": "^2.3.2",
         "cookies-ts": "^1.0.5",
         "eventemitter3": "^5.0.1",
+        "fuse.js": "^7.0.0",
         "google-protobuf": "^3.21.2",
         "i18next": "^23.11.4",
         "idb-keyval": "^6.2.1",
@@ -3747,6 +3748,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -9671,6 +9680,11 @@
       "dev": true,
       "peer": true
     },
+    "fuse.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q=="
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",

package.json

@@ -11,6 +11,7 @@
     "classnames": "^2.3.2",
     "cookies-ts": "^1.0.5",
     "eventemitter3": "^5.0.1",
+    "fuse.js": "^7.0.0",
     "google-protobuf": "^3.21.2",
     "i18next": "^23.11.4",
     "idb-keyval": "^6.2.1",

src/ui/BuildDeck/DeckDatabase/DeckResults/index.tsx

 import { App, Dropdown, message, Pagination } from "antd";
 import { MessageInstance } from "antd/es/message/interface";
+import Fuse from "fuse.js";
 import React, { memo, useEffect } from "react";
 import { type INTERNAL_Snapshot as Snapshot, proxy, useSnapshot } from "valtio";
 import YGOProDeck from "ygopro-deck-encode";
@@ -192,7 +193,18 @@ const updatePersonalList = async (message: MessageInstance) => {
       if (resp.code !== 0 || resp.data === undefined) {
         message.error(resp.message);
       } else {
-        const decks = resp.data;
+        let decks = resp.data;
+
+        if (store.query !== "") {
+          // use `fuse.js` to search
+          const fuse = new Fuse(decks, {
+            keys: ["deckName"],
+            includeScore: true,
+            threshold: 0.3,
+          });
+          const results = fuse.search(store.query);
+          decks = results.map((result) => result.item);
+        }
 
         const total = decks.length;
         store.total = total;