Refactor usePackageSuggestions hook: Remove UI rendering logic for better separation of concerns

Author: wctiger

src/components/PackageSearchInput.tsx

@@ -1,7 +1,6 @@
-import React, { useCallback } from "react";
+import React, { useMemo } from "react";
 import { AutoComplete, Button, Space, Input, Spin } from "antd";
 import { SearchOutlined, LoadingOutlined } from "@ant-design/icons";
-import { NpmPackageSuggestion } from "../services/npmAutocompleteService";
 import { usePackageSuggestions } from "../hooks/usePackageSuggestions";
 import PackageSuggestionLabel from "./PackageSuggestionLabel";
 
@@ -15,6 +14,11 @@ interface PackageSearchInputProps {
   style?: React.CSSProperties;
 }
 
+interface AutoCompleteOption {
+  value: string;
+  label: React.ReactNode;
+}
+
 const PackageSearchInput: React.FC<PackageSearchInputProps> = ({
   searchTerm,
   onSearchTermChange,
@@ -23,17 +27,20 @@ const PackageSearchInput: React.FC<PackageSearchInputProps> = ({
   size = "middle",
   style,
 }) => {
-  // Render function for suggestion items
-  const renderSuggestion = useCallback((pkg: NpmPackageSuggestion) => {
-    return <PackageSuggestionLabel package={pkg} />;
-  }, []);
-
   // Use our custom hook for package suggestions
   const {
-    suggestions,
+    suggestions: packageSuggestions,
     isLoading: fetchingSuggestions,
     handleInputChange,
-  } = usePackageSuggestions(searchTerm, renderSuggestion);
+  } = usePackageSuggestions(searchTerm);
+
+  // Transform raw package data into AutoComplete options
+  const autoCompleteOptions = useMemo<AutoCompleteOption[]>(() => {
+    return packageSuggestions.map((pkg) => ({
+      value: pkg.name,
+      label: <PackageSuggestionLabel package={pkg} />,
+    }));
+  }, [packageSuggestions]);
 
   const handleLocalInputChange = (value: string) => {
     onSearchTermChange(value);
@@ -63,7 +70,7 @@ const PackageSearchInput: React.FC<PackageSearchInputProps> = ({
       <AutoComplete
         style={{ width: "100%" }}
         value={searchTerm}
-        options={suggestions}
+        options={autoCompleteOptions}
         onSelect={handleSelect}
         onChange={handleLocalInputChange}
         notFoundContent={notFoundContent}

src/hooks/usePackageSuggestions.ts

@@ -5,22 +5,13 @@ import {
   NpmPackageSuggestion,
 } from "../services/npmAutocompleteService";
 
-export interface AutoCompleteOption {
-  value: string;
-  label: React.ReactNode;
-}
-
 /**
  * Custom hook for managing npm package suggestions
  * @param searchTerm The current search term
- * @param renderSuggestion Function to render a suggestion label component
- * @returns Suggestion options, loading state, and handle input change function
+ * @returns Raw package suggestion data, loading state, and input change handler
  */
-export function usePackageSuggestions(
-  searchTerm: string,
-  renderSuggestion: (pkg: NpmPackageSuggestion) => React.ReactNode
-) {
-  const [suggestions, setSuggestions] = useState<AutoCompleteOption[]>([]);
+export function usePackageSuggestions(searchTerm: string) {
+  const [suggestions, setSuggestions] = useState<NpmPackageSuggestion[]>([]);
   const [isLoading, setIsLoading] = useState(false);
 
   // Debounced function to fetch package suggestions
@@ -35,18 +26,14 @@ export function usePackageSuggestions(
         setIsLoading(true);
         try {
           const packages = await fetchPackageSuggestions(value);
-          const options = packages.map((pkg: NpmPackageSuggestion) => ({
-            value: pkg.name,
-            label: renderSuggestion(pkg),
-          }));
-          setSuggestions(options);
+          setSuggestions(packages);
         } catch (error) {
           console.error("Error fetching suggestions:", error);
         } finally {
           setIsLoading(false);
         }
       }, 300),
-    [renderSuggestion]
+    []
   );
 
   // Clear suggestions when searchTerm is empty