75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
"use client";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
import { PageHeader } from "../general/PageHeader";
|
|
import { useSearchParams, usePathname, useRouter } from "next/navigation";
|
|
import { getSearchPath } from "@/lib/common";
|
|
export function SearchContainer({
|
|
query,
|
|
results,
|
|
}: {
|
|
query: string;
|
|
results: any;
|
|
}) {
|
|
const searchParams = useSearchParams();
|
|
const pathname = usePathname();
|
|
const { replace } = useRouter();
|
|
|
|
const onQueryChange = useDebouncedCallback((query) => {
|
|
replace(getSearchPath(query));
|
|
}, 500);
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader heading="Søk" />
|
|
<input
|
|
name="query"
|
|
type="text"
|
|
autoFocus
|
|
defaultValue={query ?? ""}
|
|
onChange={(e) => {
|
|
onQueryChange(e.target.value);
|
|
}}
|
|
/>
|
|
{query && <SearchResults results={results} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function capitalizeFirstLetter(s: string) {
|
|
return s.charAt(0).toUpperCase() + s.slice(1);
|
|
}
|
|
|
|
const PAGE_TYPES: Record<string, string> = {
|
|
NewsPage: "Nyhet",
|
|
EventPage: "Arrangement",
|
|
GenericPage: "Underside",
|
|
VenuePage: "Lokale",
|
|
AssociationPage: "Forening",
|
|
};
|
|
|
|
function SearchResults({ results }: { results: any }) {
|
|
if (!results.length) {
|
|
return <div>Ingen resultater 😔</div>;
|
|
}
|
|
const supportedResults = results.filter(
|
|
(result: any) =>
|
|
!!result?.id && Object.keys(PAGE_TYPES).includes(result.__typename)
|
|
);
|
|
return (
|
|
<div>
|
|
{supportedResults.map((result: any) => {
|
|
let resultType = PAGE_TYPES[result.__typename] ?? "";
|
|
if (result.__typename === "AssociationPage") {
|
|
resultType = capitalizeFirstLetter(result?.associationType);
|
|
}
|
|
return (
|
|
<div key={result.id}>
|
|
<span>{resultType}</span>
|
|
<span>{result.title}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|