Skip to content

Commit bb113e4

Browse files
KaiUweCZEKaiUweCZE
committed
feat(herbatika): add catalog-backed search autocomplete
1 parent f27c9c0 commit bb113e4

11 files changed

Lines changed: 720 additions & 441 deletions

‎apps/herbatika/src/app/api/search-autocomplete/route.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
import { NextResponse } from "next/server";
22
import { fetchSearchAutocomplete } from "@/lib/search-autocomplete/search-autocomplete.server";
3-
import { createEmptySearchAutocompleteResponse } from "@/lib/search-autocomplete/search-autocomplete-types";
3+
import {
4+
createEmptySearchAutocompleteResponse,
5+
SEARCH_AUTOCOMPLETE_MAX_QUERY_LENGTH,
6+
} from "@/lib/search-autocomplete/search-autocomplete-types";
47

58
export async function GET(request: Request) {
69
const { searchParams } = new URL(request.url);
7-
const query = searchParams.get("q") ?? "";
10+
const query = (searchParams.get("q") ?? "")
11+
.trim()
12+
.slice(0, SEARCH_AUTOCOMPLETE_MAX_QUERY_LENGTH);
13+
const countryCode = searchParams.get("country");
814
const currencyCode = searchParams.get("currency");
15+
const regionId = searchParams.get("region");
916

1017
try {
11-
const response = await fetchSearchAutocomplete({ query, currencyCode });
18+
const response = await fetchSearchAutocomplete({
19+
query,
20+
countryCode,
21+
currencyCode,
22+
regionId,
23+
});
1224
return NextResponse.json(response);
1325
} catch (error) {
1426
console.error("Search autocomplete failed", error);

‎apps/herbatika/src/components/herbatika-header.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,10 @@ export function HerbatikaHeader() {
105105

106106
<div className="hidden w-full max-w-search-form flex-1 @header-desktop:block">
107107
<SearchAutocomplete
108+
countryCode={region?.country_code}
108109
currencyCode={currency}
109110
onSubmit={handleSearchSubmit}
111+
regionId={region?.region_id}
110112
variant="desktop"
111113
/>
112114
</div>
@@ -172,8 +174,10 @@ export function HerbatikaHeader() {
172174

173175
<div className="mx-auto w-full max-w-max-w px-header-lg pb-300 2xl:px-header-2xl @header-desktop:hidden">
174176
<SearchAutocomplete
177+
countryCode={region?.country_code}
175178
currencyCode={currency}
176179
onSubmit={handleSearchSubmit}
180+
regionId={region?.region_id}
177181
variant="mobile"
178182
/>
179183
</div>

‎apps/herbatika/src/components/search/search-autocomplete-panel.tsx‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
"use client";
22

3-
import { Link } from "@techsio/ui-kit/atoms/link";
43
import NextLink from "next/link";
54
import type { MouseEvent } from "react";
65
import type {
6+
SearchAutocompleteStatus,
77
SearchAutocompleteSuggestion,
88
SearchAutocompleteSuggestionType,
99
} from "@/lib/search-autocomplete/search-autocomplete-types";
@@ -23,9 +23,12 @@ type SearchAutocompletePanelProps = {
2323
onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
2424
query: string;
2525
sections: SearchAutocompletePanelSection[];
26-
status: "idle" | "loading" | "success" | "error";
26+
status: SearchAutocompleteStatus;
2727
};
2828

29+
const PANEL_CLASS_NAME =
30+
"absolute left-0 right-0 top-full z-50 mt-100 max-h-screen overflow-y-auto rounded-xs border border-border-secondary bg-surface py-200 shadow-md";
31+
2932
const joinClassNames = (...classNames: Array<string | false | undefined>) =>
3033
classNames.filter(Boolean).join(" ");
3134

@@ -34,6 +37,21 @@ export const getSearchAutocompleteOptionId = (
3437
item: SearchAutocompleteSuggestion,
3538
) => `${panelId}-${item.type}-${item.id}`;
3639

40+
const resolveStatusMessage = (
41+
status: SearchAutocompleteStatus,
42+
query: string,
43+
) => {
44+
if (status === "loading") {
45+
return "Hľadáme návrhy...";
46+
}
47+
48+
if (status === "error") {
49+
return "Návrhy sa nepodarilo načítať.";
50+
}
51+
52+
return `Pre výraz "${query}" nemáme rýchle návrhy.`;
53+
};
54+
3755
function SearchAutocompleteRow({
3856
activeItemId,
3957
item,
@@ -52,9 +70,8 @@ function SearchAutocompleteRow({
5270

5371
return (
5472
<li role="presentation">
55-
<Link
73+
<NextLink
5674
aria-selected={isActive}
57-
as={NextLink}
5875
className={joinClassNames(
5976
"flex min-w-0 items-center gap-300 px-300 py-200 text-fg-primary transition-colors",
6077
isActive ? "bg-fill-secondary" : "hover:bg-fill-secondary",
@@ -92,7 +109,7 @@ function SearchAutocompleteRow({
92109
) : null}
93110
</span>
94111
) : null}
95-
</Link>
112+
</NextLink>
96113
</li>
97114
);
98115
}
@@ -109,34 +126,34 @@ export function SearchAutocompletePanel({
109126
}: SearchAutocompletePanelProps) {
110127
const hasItems = sections.some((section) => section.items.length > 0);
111128

129+
if (!hasItems) {
130+
return (
131+
<div className={PANEL_CLASS_NAME} onMouseDown={onMouseDown}>
132+
<p
133+
className={`px-300 py-250 text-sm ${status === "error" ? "text-danger" : "text-fg-secondary"}`}
134+
id={id}
135+
role="status"
136+
>
137+
{resolveStatusMessage(status, query)}
138+
</p>
139+
</div>
140+
);
141+
}
142+
112143
return (
113144
<div
114-
className="absolute left-0 right-0 top-full z-50 mt-100 max-h-screen overflow-y-auto rounded-xs border border-border-secondary bg-surface py-200 shadow-md"
145+
aria-busy={status === "loading" ? true : undefined}
146+
className={PANEL_CLASS_NAME}
115147
id={id}
116148
onMouseDown={onMouseDown}
117149
role="listbox"
118150
>
119-
{status === "loading" && !hasItems ? (
120-
<p className="px-300 py-250 text-sm text-fg-secondary">
121-
Hľadáme návrhy...
122-
</p>
123-
) : null}
124-
125-
{status === "error" ? (
126-
<p className="px-300 py-250 text-sm text-danger">
127-
Návrhy sa nepodarilo načítať.
128-
</p>
129-
) : null}
130-
131-
{status === "success" && !hasItems ? (
132-
<p className="px-300 py-250 text-sm text-fg-secondary">
133-
Pre výraz "{query}" nemáme rýchle návrhy.
134-
</p>
135-
) : null}
136-
137151
{sections.map((section) =>
138152
section.items.length > 0 ? (
139-
<div className="border-b border-border-secondary py-100 last:border-b-0" key={section.key}>
153+
<div
154+
className="border-b border-border-secondary py-100 last:border-b-0"
155+
key={section.key}
156+
>
140157
<div className="px-300 py-100 text-xs font-semibold uppercase tracking-normal text-fg-secondary">
141158
{section.title}
142159
</div>

‎apps/herbatika/src/components/search/search-autocomplete.tsx‎

Lines changed: 35 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,56 @@
11
"use client";
22

33
import { SearchForm } from "@techsio/ui-kit/molecules/search-form";
4-
import { useRouter } from "next/navigation";
5-
import {
6-
useId,
7-
useMemo,
8-
useState,
9-
type FocusEvent,
10-
type FormEvent,
11-
type KeyboardEvent,
12-
type MouseEvent,
13-
} from "react";
14-
import {
15-
SEARCH_AUTOCOMPLETE_MIN_QUERY_LENGTH,
16-
type SearchAutocompleteSuggestion,
17-
} from "@/lib/search-autocomplete/search-autocomplete-types";
18-
import {
19-
getSearchAutocompleteOptionId,
20-
SearchAutocompletePanel,
21-
} from "./search-autocomplete-panel";
22-
import {
23-
clampSearchAutocompleteIndex,
24-
createSearchAutocompleteSections,
25-
} from "./search-autocomplete-sections";
26-
import { useSearchAutocomplete } from "./use-search-autocomplete";
4+
import type { FormEvent } from "react";
5+
import { SEARCH_AUTOCOMPLETE_MAX_QUERY_LENGTH } from "@/lib/search-autocomplete/search-autocomplete-types";
6+
import { SearchAutocompletePanel } from "./search-autocomplete-panel";
7+
import { useSearchAutocompleteController } from "./use-search-autocomplete-controller";
278

289
type SearchAutocompleteProps = {
10+
countryCode?: string;
2911
currencyCode: string;
3012
onSubmit: (event: FormEvent<HTMLFormElement>) => void;
13+
regionId?: string;
3114
variant: "desktop" | "mobile";
3215
};
3316

3417
export function SearchAutocomplete({
18+
countryCode,
3519
currencyCode,
3620
onSubmit,
21+
regionId,
3722
variant,
3823
}: SearchAutocompleteProps) {
39-
const router = useRouter();
40-
const generatedId = useId();
41-
const panelId = `${generatedId}-search-autocomplete`;
4224
const isMobile = variant === "mobile";
43-
const [value, setValue] = useState("");
44-
const [isFocused, setIsFocused] = useState(false);
45-
const [activeIndex, setActiveIndex] = useState(-1);
46-
const autocomplete = useSearchAutocomplete({ query: value, currencyCode });
47-
const normalizedQuery = value.trim();
48-
const sections = useMemo(
49-
() => createSearchAutocompleteSections(autocomplete.data),
50-
[autocomplete.data],
51-
);
52-
const flatItems = useMemo(
53-
() => sections.flatMap((section) => section.items),
54-
[sections],
55-
);
56-
const activeItem = flatItems[activeIndex] ?? null;
57-
const shouldShowPanel =
58-
isFocused &&
59-
normalizedQuery.length >= SEARCH_AUTOCOMPLETE_MIN_QUERY_LENGTH &&
60-
autocomplete.status !== "idle";
61-
const activeItemId =
62-
shouldShowPanel && activeItem
63-
? getSearchAutocompleteOptionId(panelId, activeItem)
64-
: undefined;
65-
66-
const closePanel = () => {
67-
setIsFocused(false);
68-
setActiveIndex(-1);
69-
};
70-
71-
const handleValueChange = (nextValue: string) => {
72-
setValue(nextValue);
73-
setActiveIndex(-1);
74-
};
75-
76-
const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
77-
const nextFocusedElement = event.relatedTarget;
78-
if (
79-
nextFocusedElement instanceof Node &&
80-
event.currentTarget.contains(nextFocusedElement)
81-
) {
82-
return;
83-
}
84-
85-
closePanel();
86-
};
87-
88-
const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
89-
if (event.key === "Escape") {
90-
closePanel();
91-
return;
92-
}
93-
94-
if (!shouldShowPanel || flatItems.length === 0) {
95-
return;
96-
}
97-
98-
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
99-
event.preventDefault();
100-
setActiveIndex((currentIndex) =>
101-
clampSearchAutocompleteIndex(
102-
event.key === "ArrowDown" ? currentIndex + 1 : currentIndex - 1,
103-
flatItems.length,
104-
),
105-
);
106-
return;
107-
}
108-
109-
if (event.key === "Enter" && activeItem) {
110-
event.preventDefault();
111-
router.push(activeItem.href);
112-
closePanel();
113-
}
114-
};
115-
116-
const handleItemMouseEnter = (item: SearchAutocompleteSuggestion) => {
117-
setActiveIndex(
118-
flatItems.findIndex(
119-
(candidate) => candidate.id === item.id && candidate.type === item.type,
120-
),
121-
);
122-
};
123-
124-
const handlePanelMouseDown = (event: MouseEvent<HTMLDivElement>) => {
125-
event.preventDefault();
126-
};
25+
const controller = useSearchAutocompleteController({
26+
countryCode,
27+
currencyCode,
28+
onSubmit,
29+
regionId,
30+
});
12731

12832
return (
129-
<div className="relative w-full" onBlur={handleBlur}>
33+
<div className="relative w-full" onBlur={controller.handleBlur}>
13034
<SearchForm
13135
className="w-full"
132-
onSubmit={onSubmit}
133-
onValueChange={handleValueChange}
134-
value={value}
36+
onSubmit={controller.handleSubmit}
37+
onValueChange={controller.handleValueChange}
38+
value={controller.value}
13539
>
13640
<SearchForm.Control className="h-search-form border border-border-search bg-fill-secondary">
13741
<SearchForm.Input
138-
aria-activedescendant={activeItemId}
42+
aria-activedescendant={controller.activeItemId}
13943
aria-autocomplete="list"
140-
aria-controls={shouldShowPanel ? panelId : undefined}
141-
aria-expanded={shouldShowPanel}
44+
aria-controls={
45+
controller.hasItems ? controller.panelId : undefined
46+
}
47+
aria-expanded={controller.shouldShowPanel}
14248
aria-haspopup="listbox"
14349
className={`${isMobile ? "px-350 text-sm" : "px-400"} h-full font-verdana`}
50+
maxLength={SEARCH_AUTOCOMPLETE_MAX_QUERY_LENGTH}
14451
name="q"
145-
onFocus={() => setIsFocused(true)}
146-
onKeyDown={handleKeyDown}
52+
onFocus={controller.handleFocus}
53+
onKeyDown={controller.handleKeyDown}
14754
placeholder="Napíšte, čo hľadáte..."
14855
role="combobox"
14956
/>
@@ -159,16 +66,16 @@ export function SearchAutocomplete({
15966
/>
16067
</SearchForm.Control>
16168

162-
{shouldShowPanel ? (
69+
{controller.shouldShowPanel ? (
16370
<SearchAutocompletePanel
164-
activeItemId={activeItemId}
165-
id={panelId}
166-
onItemClick={closePanel}
167-
onItemMouseEnter={handleItemMouseEnter}
168-
onMouseDown={handlePanelMouseDown}
169-
query={normalizedQuery}
170-
sections={sections}
171-
status={autocomplete.status}
71+
activeItemId={controller.activeItemId}
72+
id={controller.panelId}
73+
onItemClick={controller.closePanel}
74+
onItemMouseEnter={controller.handleItemMouseEnter}
75+
onMouseDown={controller.handlePanelMouseDown}
76+
query={controller.normalizedQuery}
77+
sections={controller.sections}
78+
status={controller.status}
17279
/>
17380
) : null}
17481
</SearchForm>

0 commit comments

Comments
 (0)