Fix unnecessary reload

MPEGGroup · Aug 27, 2023 · 9ef42a7 · 9ef42a7
1 parent a5dcecf
commit 9ef42a7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 20 deletions.
diff --git a/conformance-search/src/components/SearchComponent/SearchComponent.spec.tsx b/conformance-search/src/components/SearchComponent/SearchComponent.spec.tsx
@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from "vitest";
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import { SearchComponent } from "@/components";
 import Search from "@/lib/search";
+import { StaticRouter } from "react-router-dom/server";
 
 describe("Search Component", () => {
     beforeEach(async () => {
@@ -12,7 +13,11 @@ describe("Search Component", () => {
 
     it("should be possible to apply a container filter", async () => {
         const onResult = vi.fn();
-        render(<SearchComponent onResult={onResult} />);
+        render(
+            <StaticRouter location="/">
+                <SearchComponent onResult={onResult} />
+            </StaticRouter>
+        );
 
         // Wait for component to load
         await screen.findByPlaceholderText(/Start by/i);

diff --git a/conformance-search/src/components/SearchComponent/hooks/useQueryParams.ts b/conformance-search/src/components/SearchComponent/hooks/useQueryParams.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Filter } from "@/types";
+import { useLocation } from "react-router-dom";
 
 type QueryParams = {
     query: string;
@@ -10,6 +11,7 @@ export default function useQueryParams(): [
     QueryParams,
     (query?: string, filters?: Filter[]) => void
 ] {
+    const { state } = useLocation();
     const [params, setParams] = useState<QueryParams>({
         query: "",
         filters: []
@@ -24,7 +26,8 @@ export default function useQueryParams(): [
             .join(",");
     };
 
-    const decodeFilters = (filters: string): Filter[] => {
+    const decodeFilters = (filters: string | null): Filter[] => {
+        if (!filters) return [];
         return filters
             .split(",")
             .map((filter) => {
@@ -36,24 +39,21 @@ export default function useQueryParams(): [
 
     // Load the search state from the URL
     useEffect(() => {
-        if ("URLSearchParams" in window) {
-            const newParams: QueryParams = {
-                query: "",
-                filters: []
-            };
+        // Check the state
+        let { query, filters } = state || {};
 
+        // If no state in history, check the URL
+        if (window.location.search !== "") {
             const rawParams = new URLSearchParams(window.location.search);
-
-            // Query
-            newParams.query = rawParams.get("query") || "";
-
-            // Filters
-            const filters = rawParams.get("filters") || "";
-            newParams.filters = decodeFilters(filters);
-
-            // Update state
-            setParams(newParams);
+            query ||= rawParams.get("query");
+            filters ||= decodeFilters(rawParams.get("filters"));
         }
+
+        // Update the state
+        setParams((prev) => ({
+            query: query || prev.query,
+            filters: filters || prev.filters
+        }));
     }, []);
 
     const setQuery = (query?: string, filters?: Filter[]) => {

diff --git a/conformance-search/src/pages/CoveragePage/HighlightBox.tsx b/conformance-search/src/pages/CoveragePage/HighlightBox.tsx
@@ -1,4 +1,5 @@
 import { FaExpandAlt } from "react-icons/fa";
+import { Link } from "react-router-dom";
 
 export default function HighlightBox({ children }: { children: string }) {
     const path = children.split(".").slice(0, -1).join(".");
@@ -18,12 +19,16 @@ export default function HighlightBox({ children }: { children: string }) {
                     )}
                     .
                 </span>
-                <a
+                <Link
                     className="font-bold duration-200 hover:text-blue-400"
-                    href={`?query=="${last}"`}
+                    state={{
+                        query: `="${last}"`,
+                        filters: []
+                    }}
+                    to="/"
                 >
                     {last}
-                </a>
+                </Link>
             </span>
         </div>
     );