diff --git a/web/src/components/search/SearchResults.tsx b/web/src/components/search/SearchResults.tsx index 3450702..380f776 100644 --- a/web/src/components/search/SearchResults.tsx +++ b/web/src/components/search/SearchResults.tsx @@ -1,10 +1,10 @@ -import { ImageFragmentDefinition, stripHtml } from "@/lib/common"; -import { formatDate, formatOccurrenceMonths } from "@/lib/date"; import { unmaskFragment } from "@/gql"; import type { ImageFragment, SearchQuery } from "@/gql/graphql"; -import styles from "./searchContainer.module.scss"; -import { Image } from "../general/Image"; +import { ImageFragmentDefinition, stripHtml } from "@/lib/common"; +import { formatDate, formatOccurrenceMonths } from "@/lib/date"; import Link from "next/link"; +import { Image } from "../general/Image"; +import styles from "./searchContainer.module.scss"; export type SearchResult = SearchQuery["results"][number]; @@ -78,12 +78,18 @@ function getResultSnippet(result: SupportedResult): string | null { export function SearchResults({ results }: { results: SearchResult[] }) { if (!results.length) { - return
Ingen resultater
; + return ( +
+ Ingen resultater +
+ ); } const supportedResults = results.filter(isSupported); return (
-

{results.length} resultater

+

+ {results.length} resultater +

{supportedResults.map((result) => ( ))} diff --git a/web/src/components/search/SearchShell.tsx b/web/src/components/search/SearchShell.tsx index fe09ea6..dad6e4d 100644 --- a/web/src/components/search/SearchShell.tsx +++ b/web/src/components/search/SearchShell.tsx @@ -1,11 +1,17 @@ "use client"; -import { useEffect, useRef, useState, useTransition, type ReactNode } from "react"; -import { useDebouncedCallback } from "use-debounce"; -import { useRouter } from "next/navigation"; -import { PageHeader } from "../general/PageHeader"; import { getSearchPath } from "@/lib/common"; -import styles from "./searchContainer.module.scss"; +import { useRouter } from "next/navigation"; +import { + type ReactNode, + useEffect, + useRef, + useState, + useTransition, +} from "react"; +import { useDebouncedCallback } from "use-debounce"; import { Icon } from "../general/Icon"; +import { PageHeader } from "../general/PageHeader"; +import styles from "./searchContainer.module.scss"; export function SearchShell({ initialQuery, @@ -35,22 +41,38 @@ export function SearchShell({ return (
- -
- { - setInputValue(e.target.value); - pushQuery(e.target.value); - }} - /> -
- + +
{ + e.preventDefault(); + pushQuery.cancel(); + lastPushedRef.current = inputValue; + startTransition(() => { + replace(getSearchPath(inputValue)); + }); + }} + > +
+ + { + setInputValue(e.target.value); + pushQuery(e.target.value); + }} + /> +
-
+ {children}
);