From 873e8aaf439d857a1610574fcfacac1ad0efa318 Mon Sep 17 00:00:00 2001
From: Abbie Sims <abbie.sims@canonical.com>
Date: Thu, 5 Sep 2024 16:32:38 +0200
Subject: [PATCH] fix: improve search UX on initial store load

---
 static/js/store/pages/Packages/Packages.tsx   | 24 +++++++------------
 .../Packages/__tests__/Packages.test.tsx      | 12 +++++-----
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/static/js/store/pages/Packages/Packages.tsx b/static/js/store/pages/Packages/Packages.tsx
index e92dfebd9e..48ae4ae887 100644
--- a/static/js/store/pages/Packages/Packages.tsx
+++ b/static/js/store/pages/Packages/Packages.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, ReactNode } from "react";
+import { useState, useRef, ReactNode } from "react";
 import { useQuery } from "react-query";
 import { useLocation, useSearchParams } from "react-router-dom";
 import { v4 as uuidv4 } from "uuid";
@@ -48,17 +48,18 @@ function Packages(): ReactNode {
 
   const { search } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [initialLoad, setInitialLoad] = useState(true);
 
   const [hideFilters, setHideFilters] = useState(true);
   const currentPage = searchParams.get("page") || "1";
 
   let queryString = search;
   if (!search || (!searchParams.get("categories") && !searchParams.get("q") && !searchParams.get("architecture"))) {
-    queryString = "?categories=featured";
+    queryString = `?categories=featured&page=${currentPage}`;
+  } else {
+    queryString += `&page=${currentPage}`;
   }
 
-  const { data, status, refetch, isFetching } = useQuery(
+  const { data, status, isFetching } = useQuery(
     ["data", queryString],
     () => getData(queryString),
     {
@@ -69,17 +70,6 @@ function Packages(): ReactNode {
   const searchRef = useRef<HTMLInputElement | null>(null);
   const searchSummaryRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (initialLoad) {
-      if (!searchParams.get("categories") && !searchParams.get("q") && !searchParams.get("architecture")) {
-        searchParams.set("categories", "featured");
-        setSearchParams(searchParams);
-      }
-      setInitialLoad(false);
-    }
-    refetch();
-  }, [searchParams]);
-
   const packagesCount = data?.packages ? data?.packages.length : 0;
 
   const firstResultNumber = (parseInt(currentPage) - 1) * ITEMS_PER_PAGE + 1;
@@ -141,6 +131,10 @@ function Packages(): ReactNode {
   }
 
   const getResultsTitle = () => {
+    if (searchParams.get("q")) {
+      return "Snaps";
+    }
+
     if (isFeatured) {
       return "Featured snaps";
     }
diff --git a/static/js/store/pages/Packages/__tests__/Packages.test.tsx b/static/js/store/pages/Packages/__tests__/Packages.test.tsx
index cd75385d80..d573842d3b 100644
--- a/static/js/store/pages/Packages/__tests__/Packages.test.tsx
+++ b/static/js/store/pages/Packages/__tests__/Packages.test.tsx
@@ -139,11 +139,11 @@ const renderComponent = (
 };
 
 describe("Packages", () => {
-  test("featured categories are called by deafult", async () => {
+  test("featured categories are called by default", async () => {
     renderComponent();
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
-        "/store.json?categories=featured"
+        "/store.json?categories=featured&page=1"
       );
     });
   });
@@ -154,7 +154,7 @@ describe("Packages", () => {
     await user.click(screen.getByLabelText("Development"));
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
-        "/store.json?categories=development"
+        "/store.json?categories=development&page=1"
       );
     });
   });
@@ -167,7 +167,7 @@ describe("Packages", () => {
     await user.click(screen.getByLabelText("Development"));
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
-        "/store.json?categories=development&q=code"
+        "/store.json?categories=development&q=code&page=1"
       );
     });
   });
@@ -178,7 +178,7 @@ describe("Packages", () => {
     await user.type(screen.getByLabelText("Search Snapcraft"), "code");
     await user.click(screen.getByRole("button", { name: "Search" }));
     await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith("/store.json?q=code");
+      expect(global.fetch).toHaveBeenCalledWith("/store.json?q=code&page=1");
     });
   });
 
@@ -262,7 +262,7 @@ describe("Packages", () => {
     await user.click(screen.getByLabelText("Development"));
     await waitFor(() => {
       expect(global.fetch).toHaveBeenCalledWith(
-        "/store.json?categories=development"
+        "/store.json?categories=development&page=1"
       );
     });
   });