debounce update

src/components/Search/useSearchPackages.ts

@@ -3,44 +3,65 @@ import search_packages, { PackageResult } from "@/utils/search_packages";
 import { debounce } from "lodash";
 
 const debouncedFetchPackages = debounce(
-  async (query, setPackages, setLoading) => {
+  async (query, setPackages, setLoading, controller) => {
     if (query.trim().length >= 3) {
-      const results = await search_packages(query);
-      setPackages(results);
+      try {
+        const results = await search_packages(query, controller.signal); // Pass signal here
+        setPackages(results);
+      } catch (error) {
+        // Type check before accessing error properties
+        if (error instanceof Error && error.name === "AbortError") {
+          console.log("Fetch aborted for query:", query);
+        } else if (error instanceof Error) {
+          console.error("Error fetching packages:", error.message);
+        } else {
+          console.error("Unknown error occurred:", error);
+        }
+      }
     } else {
       setPackages([]);
     }
     setLoading(false);
   },
-  150, // Reduced debounce delay from 300ms to 150ms for more responsiveness
+  200,
 );
 
 const cache = new Map();
 
 export default function useSearchPackages(query: string) {
   const [packages, setPackages] = React.useState<PackageResult[]>([]);
   const [loading, setLoading] = React.useState<boolean>(false);
+  const abortControllerRef = React.useRef<AbortController | null>(null);
 
   React.useEffect(() => {
     if (cache.has(query)) {
-      // If query is cached, use the cached result
       setPackages(cache.get(query));
       setLoading(false);
       return;
     }
 
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+
     setLoading(true);
+
     debouncedFetchPackages(
       query,
       (result: PackageResult[]) => {
         setPackages(result);
-        cache.set(query, result); // Cache the result for future queries
+        cache.set(query, result);
       },
       setLoading,
+      controller,
     );
 
     return () => {
       debouncedFetchPackages.cancel();
+      controller.abort();
     };
   }, [query]);
 

src/utils/search_packages.ts

@@ -10,35 +10,44 @@ export type PackageResult = {
   maturity: MaturityValue;
 };
 
-export default async function search_packages(query: string) {
+export default async function search_packages(
+  query: string,
+  signal?: AbortSignal,
+) {
   const sqlQuery = `
-  WITH filtered_packages AS (
-    SELECT 
-      ecosystem,
-      name,
-      source_url,
+    SELECT DISTINCT
+      packages.ecosystem,
+      packages.name,
+      scores.health_risk.value AS health_risk,
+      scores.maturity.value AS maturity,
       damerau_levenshtein(lower(name), lower(?::VARCHAR))::int AS name_distance
     FROM packages
-    ORDER BY name_distance
-    LIMIT 10  -- Only keep the top 10 matches based on fuzzy distance
-  )
-  SELECT
-    filtered_packages.ecosystem,
-    filtered_packages.name,
-    scores.health_risk.value AS health_risk,
-    scores.maturity.value AS maturity
-  FROM filtered_packages
-  LEFT JOIN scores ON filtered_packages.source_url = scores.source_url;`;
+    LEFT JOIN scores ON packages.source_url = scores.source_url
+    ORDER BY
+      name_distance,
+      name
+    LIMIT 10;
+  `;
 
   try {
-    const results = await fetchAll<PackageResult>(sqlQuery, query);
-    console.log("results", results);
+    // Pass the signal only if it's provided
+    const options = signal ? { signal } : {};
+    const results = await fetchAll<PackageResult>(sqlQuery, query, options);
+
     return results.map((result) => ({
-      ecosystem: result.ecosystem, // Send only the fields needed for search suggestions
+      ecosystem: result.ecosystem,
       name: result.name,
     }));
   } catch (error) {
-    console.error("Error querying packages:", error);
-    return [];
+    // Type check before accessing error properties
+    if (error instanceof Error && error.name === "AbortError") {
+      console.log("Request was aborted");
+    } else if (error instanceof Error) {
+      console.error("Error fetching packages:", error.message);
+      throw error; // Re-throw if not an abort error
+    } else {
+      console.error("Unknown error occurred:", error);
+      throw error; // Re-throw if the error is not an instance of Error
+    }
   }
 }