From 99f3b6ec15cfa8550bf23420ccf9686ea0849302 Mon Sep 17 00:00:00 2001
From: Abbie Sims <abbie.sims@canonical.com>
Date: Fri, 15 Nov 2024 16:56:09 +0400
Subject: [PATCH] fix: attach search item to useQuery

---
 .../js/src/store/components/Banner/Banner.tsx | 10 ++-------
 .../Banner/__tests__/Banner.test.tsx          | 22 -------------------
 .../store/components/Packages/Packages.tsx    | 12 +++++-----
 3 files changed, 7 insertions(+), 37 deletions(-)

diff --git a/static/js/src/store/components/Banner/Banner.tsx b/static/js/src/store/components/Banner/Banner.tsx
index 30a2a041a..23ea9288e 100644
--- 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
index 029e698a5..141324913 100644
--- 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
index 7085e55d0..febfa9ac9 100644
--- 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}>