feat: sync search params and version filter with URL parameters - Add URL parameter synchronization using useSearchParams hook - Search term synced with 'q' URL parameter - Version filter synced with 'filter' URL parameter - Auto-search when package name is present in URL on page load - Update SearchBox and VersionFilterInput components to support URL state - Maintain input field state separate from applied filter for better UX

Author: wctiger

src/App.tsx

@@ -1,14 +1,21 @@
-import React, { useState } from "react";
+import React, { useEffect } from "react";
 import { ThemeProvider } from "./contexts/ThemeContext";
 import AntdProvider from "./contexts/AntdProvider";
 import AppLayout from "./components/AppLayout";
 import SearchBox from "./components/SearchBox";
 import PackageResults from "./components/PackageResults";
 import ErrorDisplay from "./components/ErrorDisplay";
 import { usePackageSearch } from "./hooks/usePackageSearch";
+import { useSearchParams } from "./hooks/useSearchParams";
 import "./App.css";
 
 const AppContent: React.FC = () => {
+  // URL params state management
+  const { params, setParam, resetParams } = useSearchParams({
+    q: "",
+    filter: "",
+  });
+
   const {
     searchTerm,
     setSearchTerm,
@@ -20,29 +27,61 @@ const AppContent: React.FC = () => {
     resetSearch,
   } = usePackageSearch();
 
-  // State for version filter
-  const [versionFilter, setVersionFilter] = useState("");
+  // Sync URL params with local state
+  useEffect(() => {
+    if (params.q && params.q !== searchTerm) {
+      setSearchTerm(params.q);
+      // Auto-search if there's a package name in URL
+      if (params.q.trim()) {
+        searchPackage(params.q);
+      }
+    }
+  }, [params.q, searchTerm, setSearchTerm, searchPackage]);
+
+  // Update URL when search term changes
+  useEffect(() => {
+    if (searchTerm !== params.q) {
+      setParam("q", searchTerm);
+    }
+  }, [searchTerm, params.q, setParam]);
+
+  // Handle search term changes
+  const handleSearchTermChange = (value: string) => {
+    setSearchTerm(value);
+    setParam("q", value);
+  };
+
+  // Handle version filter changes
+  const handleVersionFilterChange = (filter: string) => {
+    setParam("filter", filter);
+  };
 
   // Handle logo click to reset the app to home state
   const handleLogoClick = () => {
     resetSearch();
     setSearchTerm("");
-    setVersionFilter("");
+    resetParams();
   };
 
   const renderContent = () => {
     if (error) {
       return (
-        <ErrorDisplay errorMessage={error} onReset={() => setSearchTerm("")} />
+        <ErrorDisplay
+          errorMessage={error}
+          onReset={() => {
+            setSearchTerm("");
+            setParam("q", "");
+          }}
+        />
       );
     }
 
     if (packageInfo) {
       return (
         <PackageResults
           packageInfo={packageInfo}
-          versionFilter={versionFilter}
-          onVersionFilterChange={setVersionFilter}
+          versionFilter={params.filter}
+          onVersionFilterChange={handleVersionFilterChange}
         />
       );
     }
@@ -59,11 +98,12 @@ const AppContent: React.FC = () => {
     <AppLayout onLogoClick={handleLogoClick}>
       <SearchBox
         searchTerm={searchTerm}
-        onSearchTermChange={setSearchTerm}
+        onSearchTermChange={handleSearchTermChange}
         onSearch={searchPackage}
         isLoading={loading}
         isCompact={showCompactSearch}
-        onVersionFilter={packageInfo ? setVersionFilter : undefined}
+        onVersionFilter={packageInfo ? handleVersionFilterChange : undefined}
+        versionFilter={params.filter}
       />
       {renderContent()}
     </AppLayout>

src/components/SearchBox.tsx

@@ -12,6 +12,7 @@ interface SearchBoxProps {
   isLoading: boolean;
   isCompact?: boolean;
   onVersionFilter?: (filter: string) => void;
+  versionFilter?: string;
 }
 
 const SearchBox: React.FC<SearchBoxProps> = ({
@@ -21,6 +22,7 @@ const SearchBox: React.FC<SearchBoxProps> = ({
   isLoading,
   isCompact = false,
   onVersionFilter,
+  versionFilter,
 }) => {
   if (isCompact) {
     return (
@@ -44,6 +46,7 @@ const SearchBox: React.FC<SearchBoxProps> = ({
         {onVersionFilter && (
           <VersionFilterInput
             onVersionFilter={onVersionFilter}
+            versionFilter={versionFilter}
             isLoading={isLoading}
             style={{ flex: "1 0 200px", maxWidth: "300px", marginLeft: "auto" }}
           />

src/components/VersionFilterInput.tsx

@@ -1,33 +1,45 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Input, Button, Space, Tooltip } from "antd";
 import { FilterOutlined } from "@ant-design/icons";
 
 // Version Filter Input Component interface
 interface VersionFilterInputProps {
   onVersionFilter: (filter: string) => void;
+  versionFilter?: string;
   isLoading: boolean;
   style?: React.CSSProperties;
 }
 
 const VersionFilterInput: React.FC<VersionFilterInputProps> = ({
   onVersionFilter,
+  versionFilter = "",
   isLoading,
   style,
 }) => {
-  const [versionFilter, setVersionFilter] = useState("");
+  const [inputValue, setInputValue] = useState(versionFilter);
+
+  // Sync input value with prop when it changes externally
+  useEffect(() => {
+    setInputValue(versionFilter);
+  }, [versionFilter]);
 
   const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setVersionFilter(e.target.value);
+    setInputValue(e.target.value);
   };
 
   const handleFilterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
-      onVersionFilter(versionFilter);
+      onVersionFilter(inputValue);
     }
   };
 
   const applyFilter = () => {
-    onVersionFilter(versionFilter);
+    onVersionFilter(inputValue);
+  };
+
+  const handleClear = () => {
+    setInputValue("");
+    onVersionFilter("");
   };
 
   return (
@@ -36,10 +48,11 @@ const VersionFilterInput: React.FC<VersionFilterInputProps> = ({
         <Input
           size="middle"
           placeholder="Version filter (e.g., ^3.0.0)"
-          value={versionFilter}
+          value={inputValue}
           onChange={handleFilterChange}
           onKeyDown={handleFilterKeyDown}
           allowClear
+          onClear={handleClear}
           disabled={isLoading}
         />
       </Tooltip>