feat(app): fuzzy search the searchable list

apps/app/src/pages/complain/form/tempat-sampah.tsx

@@ -1,20 +1,32 @@
 import { IonContent, IonPage } from "@ionic/react";
 import { Card, CardHeader, CardContent, CardTitle, Button, Input } from "@trashtrack/ui";
-import { useTrashBinQuery } from "../../../queries/get-trash-bin-query";
 import { useHistory } from "react-router-dom";
 import { useState } from "react";
+import Fuse from "fuse.js";
+
+import { useTrashBinQuery } from "../../../queries/get-trash-bin-query";
+
+interface TrashBin {
+    id: number;
+    name: string;
+    description: string;
+    latitude: number;
+    longitude: number;
+}
 
 export function ComplainFormTempatSampah() {
     const { data, isLoading } = useTrashBinQuery();
     const history = useHistory();
     const [searchTerm, setSearchTerm] = useState("");
 
-    const filteredData = !isLoading
-        ? data.data.filter(
-              (trashBin: { id: number; name: string; description: string; latitude: number; longitude: number }) =>
-                  trashBin.name.toLowerCase().includes(searchTerm.toLowerCase())
-          )
-        : [];
+    const fuseOptions = {
+        keys: ["name"],
+        threshold: 0.4,
+    };
+
+    const fuse = new Fuse(!isLoading ? (data.data as TrashBin[]) : [], fuseOptions);
+
+    const filteredData = !isLoading ? fuse.search(searchTerm).map((result) => result.item) : [];
 
     return (
         <IonPage>

package.json

@@ -31,6 +31,7 @@
         "clsx": "^2.1.0",
         "embla-carousel-autoplay": "8.0.0-rc21",
         "express": "^4.18.2",
+        "fuse.js": "^7.0.0",
         "i18next": "^23.8.2",
         "lucide-react": "^0.92.0",
         "nestjs": "^0.0.1",