fix: attach search item to useQuery

canonical · Nov 15, 2024 · 99f3b6e · 99f3b6e
1 parent f343749
commit 99f3b6e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 37 deletions.
diff --git a/static/js/src/store/components/Banner/Banner.tsx b/static/js/src/store/components/Banner/Banner.tsx
@@ -5,10 +5,9 @@ import { Strip, Row, Col } from "@canonical/react-components";
 type Props = {
   searchRef: RefObject<HTMLInputElement>;
   searchSummaryRef: RefObject<HTMLDivElement>;
-  disabled: boolean;
 };
 
-function Banner({ searchRef, searchSummaryRef, disabled }: Props) {
+function Banner({ searchRef, searchSummaryRef }: Props) {
   const [searchParams, setSearchParams] = useSearchParams();
 
   return (
@@ -45,7 +44,6 @@ function Banner({ searchRef, searchSummaryRef, disabled }: Props) {
               placeholder="Search Charmhub"
               defaultValue={searchParams.get("q") || ""}
               ref={searchRef}
-              disabled={disabled}
             />
             <button
               type="reset"
@@ -57,11 +55,7 @@ function Banner({ searchRef, searchSummaryRef, disabled }: Props) {
             >
               <i className="p-icon--close">Close</i>
             </button>
-            <button
-              type="submit"
-              className="p-search-box__button"
-              disabled={disabled}
-            >
+            <button type="submit" className="p-search-box__button">
               <i className="p-icon--search">Search</i>
             </button>
           </form>

diff --git a/static/js/src/store/components/Banner/__tests__/Banner.test.tsx b/static/js/src/store/components/Banner/__tests__/Banner.test.tsx
@@ -36,7 +36,6 @@ describe("Banner Component", () => {
       <Banner
         searchRef={mockSearchRef}
         searchSummaryRef={mockSearchSummaryRef}
-        disabled={false}
       />
     );
 
@@ -55,7 +54,6 @@ describe("Banner Component", () => {
       <Banner
         searchRef={mockSearchRef}
         searchSummaryRef={mockSearchSummaryRef}
-        disabled={false}
       />
     );
 
@@ -79,7 +77,6 @@ describe("Banner Component", () => {
       <Banner
         searchRef={mockSearchRef}
         searchSummaryRef={mockSearchSummaryRef}
-        disabled={false}
       />
     );
 
@@ -93,7 +90,6 @@ describe("Banner Component", () => {
       <Banner
         searchRef={mockSearchRef}
         searchSummaryRef={mockSearchSummaryRef}
-        disabled={false}
       />
     );
 
@@ -117,7 +113,6 @@ describe("Banner Component", () => {
       <Banner
         searchRef={mockSearchRef}
         searchSummaryRef={mockSearchSummaryRef}
-        disabled={false}
       />
     );
 
@@ -132,7 +127,6 @@ describe("Banner Component", () => {
       <Banner
         searchRef={mockSearchRef}
         searchSummaryRef={mockSearchSummaryRef}
-        disabled={false}
       />
     );
 
@@ -146,20 +140,4 @@ describe("Banner Component", () => {
       behavior: "smooth",
     });
   });
-
-  test("should disable search functionality while loading charms", () => {
-    render(
-      <Banner
-        searchRef={mockSearchRef}
-        searchSummaryRef={mockSearchSummaryRef}
-        disabled={true}
-      />
-    );
-
-    const searchInput = screen.getByPlaceholderText("Search Charmhub");
-    const searchButton = screen.getByRole("button", { name: /Search/i });
-
-    expect(searchInput).toBeDisabled();
-    expect(searchButton).toBeDisabled();
-  });
 });
diff --git a/static/js/src/store/components/Packages/Packages.tsx b/static/js/src/store/components/Packages/Packages.tsx
@@ -49,7 +49,10 @@ function Packages() {
 
   const [hideFilters, setHideFilters] = useState(true);
   const currentPage = searchParams.get("page") || "1";
-  const { data, status, refetch, isFetching } = useQuery("data", getData);
+  const { data, status, refetch, isFetching } = useQuery(
+    ["data", search],
+    getData
+  );
 
   const topicsQuery = searchParams ? searchParams.get("categories") : null;
 
@@ -63,15 +66,10 @@ function Packages() {
   const firstResultNumber = (parseInt(currentPage) - 1) * ITEMS_PER_PAGE + 1;
   const lastResultNumber =
     (parseInt(currentPage) - 1) * ITEMS_PER_PAGE + data?.packages.length;
-  const isLoaded = status === "success" && !isFetching;
 
   return (
     <>
-      <Banner
-        searchRef={searchRef}
-        searchSummaryRef={searchSummaryRef}
-        disabled={!isLoaded}
-      />
+      <Banner searchRef={searchRef} searchSummaryRef={searchSummaryRef} />
       <Strip>
         <Row>
           <Col size={3}>