Merge pull request #46 from DenizUgur/main

Minor fixes
MPEGGroup · Aug 28, 2023 · 84413e4 · 84413e4
2 parents 365e6bb + 9ef42a7
commit 84413e4
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 46 deletions.
diff --git a/.github/renovate.json b/.github/renovate.json
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/SearchComponent.tsx b/conformance-search/src/components/SearchComponent/SearchComponent.tsx
@@ -51,7 +51,6 @@ export default function SearchComponent({
 
             // Update URL
             setQueryParams(query, filters);
-            setLoading(true);
             const { boxes, features } = await search.search(query, filters);
             await onResult(boxes, features);
             setLoading(false);
@@ -86,18 +85,21 @@ export default function SearchComponent({
                             className="h-16 min-w-0 grow rounded-md px-5 text-sm focus:outline-none disabled:bg-transparent"
                             data-testid="search-input"
                             disabled={!ready}
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                setQuery((e.target as HTMLInputElement).value)
-                            }
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                setQuery((e.target as HTMLInputElement).value);
+                                setLoading(true);
+                            }}
                             placeholder={!ready ? "Loading..." : "Start by typing a search term..."}
                             spellCheck="false"
                             type="text"
                             value={query}
                         />
                         <button
                             className={clsx(
-                                "flex-col items-center justify-center px-3",
-                                !query && filters.length === 0 ? "hidden" : "flex"
+                                "w-14 flex-col items-center justify-center",
+                                !ready || loading || (!query && filters.length === 0)
+                                    ? "hidden"
+                                    : "flex"
                             )}
                             disabled={!ready || loading}
                             onClick={() => {
@@ -109,8 +111,8 @@ export default function SearchComponent({
                             <MdClose className="text-2xl" />
                             <span className="text-[10px] font-semibold">Reset</span>
                         </button>
-                        {!ready && (
-                            <div className="flex items-center justify-center px-3">
+                        {(!ready || loading) && (
+                            <div className="flex w-14 items-center justify-center">
                                 <AiOutlineLoading className="animate-spin text-2xl" />
                             </div>
                         )}

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>
     );