From 256ac4e688831e0bb3ad61be8a050212d75965da Mon Sep 17 00:00:00 2001 From: Deniz Ugur Date: Fri, 25 Aug 2023 17:25:21 -0700 Subject: [PATCH 1/3] Fix loading indication not showing up --- .../SearchComponent/SearchComponent.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/conformance-search/src/components/SearchComponent/SearchComponent.tsx b/conformance-search/src/components/SearchComponent/SearchComponent.tsx index debe92b..f49f055 100644 --- 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,9 +85,10 @@ 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) => - setQuery((e.target as HTMLInputElement).value) - } + onChange={(e: React.ChangeEvent) => { + setQuery((e.target as HTMLInputElement).value); + setLoading(true); + }} placeholder={!ready ? "Loading..." : "Start by typing a search term..."} spellCheck="false" type="text" @@ -96,8 +96,10 @@ export default function SearchComponent({ /> - {!ready && ( -
+ {(!ready || loading) && ( +
)} From a5dcecf6c8f9538c5f1c917e136e3c20594e06d3 Mon Sep 17 00:00:00 2001 From: Deniz Ugur Date: Fri, 25 Aug 2023 17:25:30 -0700 Subject: [PATCH 2/3] Remove Renovate --- .github/renovate.json | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 .github/renovate.json diff --git a/.github/renovate.json b/.github/renovate.json deleted file mode 100644 index 4b7c0a5..0000000 --- a/.github/renovate.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "$schema": "https://docs.renovatebot.com/renovate-schema.json", - "extends": ["config:recommended", ":maintainLockFilesWeekly"], - "platformAutomerge": true, - "packageRules": [ - { - "matchUpdateTypes": [ - "minor", - "patch", - "pin", - "digest", - "lockFileMaintenance" - ], - "automerge": true, - "minimumReleaseAge": "3 days" - } - ] -} From 9ef42a7c4a7f6ddf1de91fe4538b68adb9ad7e33 Mon Sep 17 00:00:00 2001 From: Deniz Ugur Date: Sun, 27 Aug 2023 00:25:29 -0700 Subject: [PATCH 3/3] Fix unnecessary reload --- .../SearchComponent/SearchComponent.spec.tsx | 7 +++- .../SearchComponent/hooks/useQueryParams.ts | 32 +++++++++---------- .../src/pages/CoveragePage/HighlightBox.tsx | 11 +++++-- 3 files changed, 30 insertions(+), 20 deletions(-) diff --git a/conformance-search/src/components/SearchComponent/SearchComponent.spec.tsx b/conformance-search/src/components/SearchComponent/SearchComponent.spec.tsx index bfdea49..bdbd1dc 100644 --- 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(); + render( + + + + ); // 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 index 21e7d28..d4ef1f9 100644 --- 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({ 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 index 433c302..27532e4 100644 --- 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 }) { )} . - {last} - +
);