Merged in fix/SW-2253-consolidate-autocomplete-search (pull request #1795)
Consolidate autocomplete search SW-2253 SW-2338 * use fuse.js for fuzzy search * Handle weird behaviour when search field loses focus on destinationPage * Add error logging for JumpTo when no URL was provided * Switch to use <Typography /> over <Caption /> * fix: bookingWidget search label should always be red * fix: searchHistory can no longer add invalid items * fix: list more hits when searching * fix: issue when searchField value was undefined * fix: don't show searchHistory label if no searchHistory items * simplify skeleton for listitems in search Approved-by: Linus Flood
This commit is contained in:
Joakim Jäderberg
@@ -1,114 +0,0 @@
|
||||
.label {
|
||||
color: var(--Base-Text-Accent);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--Surface-Primary-Default);
|
||||
padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
|
||||
border-radius: var(--Corner-radius-Rounded);
|
||||
border: solid 1px var(--Border-Default);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form:focus-within {
|
||||
border-color: var(--UI-Input-Controls-Border-Focus);
|
||||
|
||||
& label {
|
||||
color: var(--UI-Text-Active);
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.searchField:focus-within + .results {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fields {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.clearButton {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--Text-Heading);
|
||||
padding: var(--Space-x15); /* search field vertical padding */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--UI-Text-Placeholder);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x2);
|
||||
background: var(--Base-Surface-Primary-light-Normal);
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
padding: var(--Space-x2);
|
||||
width: 360px;
|
||||
max-height: 400px;
|
||||
box-sizing: content-box;
|
||||
box-shadow: var(--BoxShadow-Level-4);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: var(--Space-x2);
|
||||
z-index: 50;
|
||||
overflow-y: auto;
|
||||
|
||||
& > div {
|
||||
transition: opacity 0.2s 0.2s linear;
|
||||
}
|
||||
|
||||
&.pending > div {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
.autocomplete {
|
||||
max-width: 680px;
|
||||
}
|
||||
}
|
||||
@@ -1,147 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { cx } from "class-variance-authority"
|
||||
import { memo, useTransition } from "react"
|
||||
import {
|
||||
Autocomplete,
|
||||
Button as ButtonRAC,
|
||||
Input,
|
||||
Label,
|
||||
SearchField,
|
||||
} from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
import { useIsMounted } from "usehooks-ts"
|
||||
|
||||
import { Button } from "@scandic-hotels/design-system/Button"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { Results } from "../Results"
|
||||
|
||||
import styles from "./clientInline.module.css"
|
||||
|
||||
import type { ClientProps } from "@/types/components/destinationOverviewPage/jumpTo/client"
|
||||
|
||||
const ResultsMemo = memo(Results)
|
||||
|
||||
export function ClientInline({
|
||||
results,
|
||||
latest,
|
||||
setFilterString,
|
||||
onAction,
|
||||
}: ClientProps) {
|
||||
const intl = useIntl()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
const isMounted = useIsMounted()
|
||||
|
||||
const showResults = !!results
|
||||
const showHistory =
|
||||
latest.length > 0 && isMounted() && (!results || results.length === 0)
|
||||
|
||||
return (
|
||||
<Autocomplete>
|
||||
<div className={styles.autocomplete}>
|
||||
<SearchField
|
||||
className={styles.searchField}
|
||||
onClear={() => {
|
||||
startTransition(() => {
|
||||
setFilterString(null)
|
||||
})
|
||||
}}
|
||||
>
|
||||
{({ state }) => (
|
||||
<form
|
||||
className={styles.form}
|
||||
onSubmit={(evt) => {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<div className={styles.fields}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<Label className={styles.label}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Where to?",
|
||||
})}
|
||||
</Label>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<Input
|
||||
className={styles.input}
|
||||
placeholder={intl.formatMessage({
|
||||
defaultMessage: "Hotels & Destinations",
|
||||
})}
|
||||
onChange={(evt) => {
|
||||
startTransition(() => {
|
||||
if (evt.currentTarget.value) {
|
||||
setFilterString(evt.currentTarget.value)
|
||||
} else {
|
||||
setFilterString(null)
|
||||
}
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
|
||||
{state.value !== "" && (
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<ButtonRAC className={styles.clearButton}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Clear",
|
||||
})}
|
||||
</ButtonRAC>
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<Button
|
||||
className={styles.searchButton}
|
||||
variant="Primary"
|
||||
size="Small"
|
||||
type="submit"
|
||||
>
|
||||
<MaterialIcon icon="search" color="CurrentColor" />
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Search",
|
||||
})}
|
||||
</Button>
|
||||
</Typography>
|
||||
</form>
|
||||
)}
|
||||
</SearchField>
|
||||
{showResults || showHistory ? (
|
||||
<div className={styles.results}>
|
||||
<div
|
||||
className={cx({
|
||||
[styles.menuContainer]: true,
|
||||
[styles.pending]: isPending,
|
||||
})}
|
||||
aria-live="polite"
|
||||
>
|
||||
{showResults ? (
|
||||
<ResultsMemo
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: "Results",
|
||||
})}
|
||||
results={results}
|
||||
onAction={onAction}
|
||||
renderEmptyState={true}
|
||||
/>
|
||||
) : null}
|
||||
{showHistory ? (
|
||||
<ResultsMemo
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: "Latest searches",
|
||||
})}
|
||||
results={latest}
|
||||
onAction={onAction}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</Autocomplete>
|
||||
)
|
||||
}
|
||||
@@ -1,192 +0,0 @@
|
||||
.label {
|
||||
color: var(--Base-Text-Accent);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: var(--UI-Text-Placeholder);
|
||||
}
|
||||
|
||||
.searchField {
|
||||
background: var(--Base-Background-Primary-Normal);
|
||||
padding: var(--Space-x1) var(--Space-x15);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
border: solid 1px transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.searchField:focus-within {
|
||||
border-color: var(--UI-Input-Controls-Border-Focus);
|
||||
|
||||
& label {
|
||||
color: var(--UI-Text-Active);
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: var(--Space-x4);
|
||||
}
|
||||
|
||||
.clearButton {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--Text-Heading);
|
||||
padding: var(--Space-x15); /* search field vertical padding */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--UI-Text-Placeholder);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menuContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x2);
|
||||
|
||||
& > div {
|
||||
transition: opacity 0.2s 0.2s linear;
|
||||
}
|
||||
|
||||
&.pending > div {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.trigger {
|
||||
background: var(--Base-Surface-Primary-light-Normal);
|
||||
padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
|
||||
border: solid 1px var(--Border-Intense);
|
||||
border-radius: var(--Corner-radius-Rounded);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
& span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .icon {
|
||||
background: var(--Base-Button-Primary-Fill-Normal);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--Corner-radius-Rounded);
|
||||
color: var(--Base-Text-Inverted);
|
||||
}
|
||||
}
|
||||
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: var(--visual-viewport-height);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
|
||||
&[data-entering] {
|
||||
animation: overlay-fade 200ms;
|
||||
}
|
||||
|
||||
&[data-exiting] {
|
||||
animation: overlay-fade 150ms reverse ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
--padding-x: 16px; /* Not a design token */
|
||||
--height: 660px; /* Not a design token */
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: var(--height);
|
||||
max-height: 95vh;
|
||||
padding: var(--Space-x3) var(--padding-x);
|
||||
background: var(--UI-Input-Controls-Surface-Normal);
|
||||
z-index: 100;
|
||||
border-top-left-radius: var(--Corner-radius-Large);
|
||||
border-top-right-radius: var(--Corner-radius-Large);
|
||||
|
||||
&[data-entering] {
|
||||
animation: modal-anim 200ms;
|
||||
}
|
||||
|
||||
&[data-exiting] {
|
||||
animation: modal-anim 150ms reverse ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 100%;
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
background: transparent;
|
||||
color: var(--UI-Text-High-contrast);
|
||||
border: 0;
|
||||
justify-self: end;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes overlay-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-anim {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -1,173 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { cx } from "class-variance-authority"
|
||||
import { memo, useTransition } from "react"
|
||||
import {
|
||||
Autocomplete,
|
||||
Button as ButtonRAC,
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
Heading,
|
||||
Input,
|
||||
Label,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
SearchField,
|
||||
} from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { Results } from "../Results"
|
||||
|
||||
import styles from "./clientModal.module.css"
|
||||
|
||||
import type { ClientProps } from "@/types/components/destinationOverviewPage/jumpTo/client"
|
||||
|
||||
const ResultsMemo = memo(Results)
|
||||
|
||||
export function ClientModal({
|
||||
results,
|
||||
latest,
|
||||
setFilterString,
|
||||
onAction,
|
||||
}: ClientProps) {
|
||||
const intl = useIntl()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
const showResults = !!results
|
||||
const showHistory = latest.length > 0 && (!results || results.length === 0)
|
||||
|
||||
return (
|
||||
<DialogTrigger>
|
||||
<ButtonRAC className={styles.trigger}>
|
||||
<span>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span className={styles.label}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Where to?",
|
||||
})}
|
||||
</span>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<span className={styles.placeholder}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Hotels & Destinations",
|
||||
})}
|
||||
</span>
|
||||
</Typography>
|
||||
</span>
|
||||
<span className={styles.icon}>
|
||||
<MaterialIcon icon="search" color="CurrentColor" />
|
||||
</span>
|
||||
</ButtonRAC>
|
||||
<ModalOverlay className={styles.modalOverlay} isDismissable={true}>
|
||||
<Modal className={styles.modal}>
|
||||
<Dialog className={styles.dialog}>
|
||||
<Heading level={2} className="sr-only">
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Find a location",
|
||||
})}
|
||||
</Heading>
|
||||
<ButtonRAC
|
||||
className={styles.closeButton}
|
||||
slot="close"
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: "Close",
|
||||
})}
|
||||
>
|
||||
<MaterialIcon icon="close" color="CurrentColor" />
|
||||
</ButtonRAC>
|
||||
<Autocomplete>
|
||||
<div className={styles.autocomplete}>
|
||||
<SearchField
|
||||
autoFocus
|
||||
className={styles.searchField}
|
||||
onClear={() => {
|
||||
startTransition(() => {
|
||||
setFilterString(null)
|
||||
})
|
||||
}}
|
||||
>
|
||||
{({ state }) => (
|
||||
<form
|
||||
onSubmit={(evt) => {
|
||||
evt.preventDefault()
|
||||
evt.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<Label className={styles.label}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Where to?",
|
||||
})}
|
||||
</Label>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<Input
|
||||
className={styles.input}
|
||||
placeholder={intl.formatMessage({
|
||||
defaultMessage: "Hotels & Destinations",
|
||||
})}
|
||||
onChange={(evt) => {
|
||||
startTransition(() => {
|
||||
if (evt.currentTarget.value) {
|
||||
setFilterString(evt.currentTarget.value)
|
||||
} else {
|
||||
setFilterString(null)
|
||||
}
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
|
||||
{state.value !== "" && (
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<ButtonRAC className={styles.clearButton}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Clear",
|
||||
})}
|
||||
</ButtonRAC>
|
||||
</Typography>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</SearchField>
|
||||
<div className={styles.results}>
|
||||
<div
|
||||
className={cx({
|
||||
[styles.menuContainer]: true,
|
||||
[styles.pending]: isPending,
|
||||
})}
|
||||
aria-live="polite"
|
||||
>
|
||||
{showResults ? (
|
||||
<ResultsMemo
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: "Results",
|
||||
})}
|
||||
results={results}
|
||||
onAction={onAction}
|
||||
renderEmptyState={true}
|
||||
/>
|
||||
) : null}
|
||||
{showHistory ? (
|
||||
<ResultsMemo
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: "Latest searches",
|
||||
})}
|
||||
results={latest}
|
||||
onAction={onAction}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Autocomplete>
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</ModalOverlay>
|
||||
</DialogTrigger>
|
||||
)
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
||||
|
||||
import styles from "./results.module.css"
|
||||
|
||||
export function ResultsSkeleton() {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<section className={styles.menu}>
|
||||
<Typography variant="Title/Overline/sm">
|
||||
<header className={styles.sectionHeader}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Loading results",
|
||||
})}
|
||||
</header>
|
||||
</Typography>
|
||||
<div>
|
||||
<div className={styles.item}>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<SkeletonShimmer width="50%" display="inline-block" />
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div className={styles.itemDescription}>
|
||||
<SkeletonShimmer width="38%" display="inline-block" />
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<SkeletonShimmer width="40%" display="inline-block" />
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div className={styles.itemDescription}>
|
||||
<SkeletonShimmer width="23%" display="inline-block" />
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<SkeletonShimmer width="55%" display="inline-block" />
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div className={styles.itemDescription}>
|
||||
<SkeletonShimmer width="40%" display="inline-block" />
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<SkeletonShimmer width="27%" display="inline-block" />
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div className={styles.itemDescription}>
|
||||
<SkeletonShimmer width="33%" display="inline-block" />
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.item}>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<SkeletonShimmer width="45%" display="inline-block" />
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div className={styles.itemDescription}>
|
||||
<SkeletonShimmer width="37%" display="inline-block" />
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Collection,
|
||||
Header,
|
||||
ListLayout,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuSection,
|
||||
Text,
|
||||
Virtualizer,
|
||||
} from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import styles from "./results.module.css"
|
||||
|
||||
import type { ResultsProps } from "@/types/components/destinationOverviewPage/jumpTo/results"
|
||||
|
||||
export function Results({
|
||||
"aria-label": ariaLabel,
|
||||
results,
|
||||
onAction,
|
||||
renderEmptyState = false,
|
||||
}: ResultsProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<Virtualizer
|
||||
layout={ListLayout}
|
||||
layoutOptions={{
|
||||
estimatedRowHeight: 64,
|
||||
estimatedHeadingHeight: 41,
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
aria-label={ariaLabel}
|
||||
onAction={onAction}
|
||||
className={styles.menu}
|
||||
items={results}
|
||||
renderEmptyState={() => {
|
||||
if (renderEmptyState) {
|
||||
return (
|
||||
<>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<Header className={styles.noResultsLabel}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "No results",
|
||||
})}
|
||||
</Header>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<span className={styles.noResultsDescription}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage:
|
||||
"We couldn't find a matching location for your search.",
|
||||
})}
|
||||
</span>
|
||||
</Typography>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}}
|
||||
>
|
||||
{(section) => {
|
||||
if (section.id === "actions") {
|
||||
return (
|
||||
<MenuSection key={section.id} className={styles.actionsSection}>
|
||||
<Header className={styles.menuDivider}>
|
||||
<span className="sr-only">{section.name}</span>
|
||||
</Header>
|
||||
<Collection items={section.children}>
|
||||
{(item) => (
|
||||
<MenuItem
|
||||
key={item.id}
|
||||
href={item.url}
|
||||
className={styles.item}
|
||||
textValue={item.displayName}
|
||||
// @ts-expect-error: pending https://github.com/adobe/react-spectrum/pull/8035
|
||||
closeOnSelect={item.closesModal}
|
||||
>
|
||||
<>
|
||||
{item.icon ? item.icon : null}
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<Text slot="label">{item.displayName}</Text>
|
||||
</Typography>
|
||||
</>
|
||||
</MenuItem>
|
||||
)}
|
||||
</Collection>
|
||||
</MenuSection>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<MenuSection key={section.id}>
|
||||
<Typography variant="Title/Overline/sm">
|
||||
<Header className={styles.sectionHeader}>{section.name}</Header>
|
||||
</Typography>
|
||||
<Collection items={section.children}>
|
||||
{(item) => (
|
||||
<MenuItem
|
||||
key={item.id}
|
||||
href={item.url}
|
||||
className={styles.item}
|
||||
textValue={item.displayName}
|
||||
>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<Text slot="label" className={styles.itemLabel}>
|
||||
{item.displayName}
|
||||
</Text>
|
||||
</Typography>
|
||||
{item.description ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<Text
|
||||
slot="description"
|
||||
className={styles.itemDescription}
|
||||
>
|
||||
{item.description}
|
||||
</Text>
|
||||
</Typography>
|
||||
) : null}
|
||||
</MenuItem>
|
||||
)}
|
||||
</Collection>
|
||||
</MenuSection>
|
||||
)
|
||||
}}
|
||||
</Menu>
|
||||
</Virtualizer>
|
||||
)
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
.menu {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
&[data-empty] {
|
||||
height: initial;
|
||||
overflow-y: initial;
|
||||
padding-left: var(--Space-x1);
|
||||
}
|
||||
}
|
||||
|
||||
.menu ~ .menu {
|
||||
padding-top: var(--Space-x2);
|
||||
border-top: solid 1px var(--Border-Divider-Subtle);
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
color: var(--UI-Text-Placeholder);
|
||||
padding-left: var(--Space-x1);
|
||||
padding-bottom: var(--Space-x05);
|
||||
|
||||
/* Due to Virtualizer we cannot use gap in .menu,
|
||||
instead we use padding-top on each section header */
|
||||
padding-top: var(--Space-x2);
|
||||
/* Except for the first section header */
|
||||
.menu > div > div:first-child & {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
padding: var(--Space-x1);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
text-decoration: none;
|
||||
|
||||
&[data-focused],
|
||||
&[data-focus-visible],
|
||||
&[data-selected],
|
||||
&[data-hovered] {
|
||||
background: var(--Base-Surface-Primary-light-Hover-alt);
|
||||
}
|
||||
}
|
||||
|
||||
.itemLabel {
|
||||
display: block;
|
||||
color: var(--UI-Text-High-contrast);
|
||||
}
|
||||
|
||||
.itemDescription {
|
||||
color: var(--UI-Text-Placeholder);
|
||||
}
|
||||
|
||||
.noResultsLabel {
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
.noResultsDescription {
|
||||
color: var(--Text-Tertiary);
|
||||
}
|
||||
|
||||
.menuDivider {
|
||||
padding-top: var(--Space-x2);
|
||||
padding-bottom: var(--Space-x2);
|
||||
}
|
||||
|
||||
.menuDivider:before {
|
||||
display: block;
|
||||
content: "";
|
||||
height: 1px;
|
||||
background: var(--Border-Divider-Subtle);
|
||||
}
|
||||
|
||||
.actionsSection .item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--Space-x05);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
.inline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.inline {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,209 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useMemo, useState } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
import { useIsMounted, useMediaQuery } from "usehooks-ts"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
|
||||
import { isDefined } from "@/server/utils"
|
||||
|
||||
import { ClientInline } from "./ClientInline"
|
||||
import { ClientModal } from "./ClientModal"
|
||||
|
||||
import styles from "./client.module.css"
|
||||
|
||||
import type {
|
||||
JumpToData,
|
||||
JumpToProps,
|
||||
LocationMatchResults,
|
||||
ScoringMatch,
|
||||
} from "@/types/components/destinationOverviewPage/jumpTo"
|
||||
import type { ClientProps } from "@/types/components/destinationOverviewPage/jumpTo/client"
|
||||
|
||||
export function JumpToClient<T extends JumpToData>({
|
||||
data,
|
||||
history,
|
||||
onAction,
|
||||
onClearHistory,
|
||||
}: JumpToProps<T>) {
|
||||
const intl = useIntl()
|
||||
const isMounted = useIsMounted()
|
||||
const displayInModal = useMediaQuery("(max-width: 767px)")
|
||||
|
||||
const [filterString, setFilterString] = useState<string | null>(null)
|
||||
|
||||
const filter = useCallback(
|
||||
(needle: string): LocationMatchResults => {
|
||||
needle = needle.toLowerCase().trim().replace("scandic ", "")
|
||||
|
||||
// This algorithm ranks the location data set based on a ruleset. Each
|
||||
// match is given a score to rank the results. Different rules give
|
||||
// different scores. The lower the string matching index the higer the
|
||||
// score. All matchings are done with lower case comparison.
|
||||
//
|
||||
// Ruleset, from higest to lower in ranking score:
|
||||
//
|
||||
// 1. Match on name. If no match on name, check cityIdentifier. This
|
||||
// allows for cities that suffer from different spellings to have a change
|
||||
// to get matched and ranked better.
|
||||
//
|
||||
// 2. Match on keywords. Only the highest ranking keyword is considered.
|
||||
// This prevents keyword overloading and evens out the matches.
|
||||
const matchesWithScore = data
|
||||
.map<ScoringMatch | null>((item) => {
|
||||
// Rank all the names and filter out those that don't rank at all
|
||||
const nameScores = item.rankingNames
|
||||
.map((v) => {
|
||||
const index = v.indexOf(needle)
|
||||
const score = index !== -1 ? 1000 - index : 0
|
||||
return score
|
||||
})
|
||||
.filter((score) => score > 0)
|
||||
|
||||
// Calculate the highest ranking name
|
||||
const bestNameScore = nameScores.length ? Math.max(...nameScores) : 0
|
||||
|
||||
// Rank all the keywords and filter out those that don't rank at all
|
||||
const keywordScores = item.rankingKeywords
|
||||
.map((v) => {
|
||||
const index = v.indexOf(needle)
|
||||
const score = index !== -1 ? 500 - index : 0
|
||||
return score
|
||||
})
|
||||
.filter((score) => score > 0)
|
||||
|
||||
// Calculate the highest ranking keyword
|
||||
const bestKeywordScore = keywordScores.length
|
||||
? Math.max(...keywordScores)
|
||||
: 0
|
||||
|
||||
const totalScore = bestNameScore + bestKeywordScore
|
||||
|
||||
return totalScore > 0
|
||||
? {
|
||||
id: item.id,
|
||||
displayName: item.displayName,
|
||||
type: item.type,
|
||||
description: item.description,
|
||||
url: item.url,
|
||||
score: totalScore,
|
||||
}
|
||||
: null
|
||||
})
|
||||
.filter(isDefined)
|
||||
.sort((a, b) => {
|
||||
return b.score - a.score
|
||||
})
|
||||
|
||||
if (matchesWithScore.length > 0) {
|
||||
// Map matchesWithScore to build the final results of matches and
|
||||
// remove the score from the output as it is not needed anymore
|
||||
const matches = matchesWithScore
|
||||
.map(({ score, ...item }) => item) // No need for score anymore
|
||||
.reduce<LocationMatchResults>(
|
||||
(acc, item) => {
|
||||
// Do this verbosely because its helps TS understand the data flow better.
|
||||
if (item.type === "cities") {
|
||||
acc[0].children.push(item)
|
||||
} else if (item.type === "hotels") {
|
||||
acc[1].children.push(item)
|
||||
}
|
||||
return acc
|
||||
},
|
||||
[
|
||||
{
|
||||
id: "cities",
|
||||
name: "Cities",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: "hotels",
|
||||
name: "Hotels",
|
||||
children: [],
|
||||
},
|
||||
]
|
||||
)
|
||||
|
||||
// Hide section that does not have any matches
|
||||
return matches.filter((section) => section.children.length)
|
||||
}
|
||||
|
||||
return []
|
||||
},
|
||||
[data]
|
||||
)
|
||||
|
||||
const latest = useMemo(() => {
|
||||
if (data && history && history.length) {
|
||||
const children = history
|
||||
.map((v) => {
|
||||
return data.find((d) => d.id === v.id && d.type === v.type)
|
||||
})
|
||||
.filter(isDefined)
|
||||
.slice(0, 5) // Only show five items
|
||||
|
||||
const results: LocationMatchResults = [
|
||||
{
|
||||
id: "latestSearches",
|
||||
name: "Latest searches",
|
||||
children: children,
|
||||
},
|
||||
{
|
||||
id: "actions", // The string "Actions" converts into a divider
|
||||
name: "Actions",
|
||||
children: [
|
||||
{
|
||||
id: "clearHistory",
|
||||
type: "clearHistory",
|
||||
closesModal: false,
|
||||
icon: <MaterialIcon icon="delete" color="CurrentColor" />,
|
||||
displayName: intl.formatMessage({
|
||||
defaultMessage: "Clear searches",
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
return results
|
||||
}
|
||||
return []
|
||||
}, [data, history, intl])
|
||||
|
||||
const results = useMemo(() => {
|
||||
if (filterString) {
|
||||
return filter(filterString)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}, [filterString, filter])
|
||||
|
||||
const props: ClientProps = useMemo(() => {
|
||||
return {
|
||||
results,
|
||||
latest,
|
||||
setFilterString,
|
||||
onAction: (key) => {
|
||||
switch (key) {
|
||||
case "clearHistory":
|
||||
onClearHistory()
|
||||
break
|
||||
default:
|
||||
onAction(key)
|
||||
}
|
||||
},
|
||||
}
|
||||
}, [results, latest, setFilterString, onAction, onClearHistory])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.modal} hidden={isMounted() && !displayInModal}>
|
||||
<ClientModal {...props} />
|
||||
</div>
|
||||
<div className={styles.inline} hidden={isMounted() && displayInModal}>
|
||||
<ClientInline {...props} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { use } from "react"
|
||||
|
||||
import { useSearchHistory } from "@/components/Forms/BookingWidget/FormContent/Search/useSearchHistory"
|
||||
|
||||
import { JumpToClient } from "../Client"
|
||||
|
||||
import type { JumpToResolverProps } from "@/types/components/destinationOverviewPage/jumpTo/resolver"
|
||||
|
||||
export function JumpToResolver({ dataPromise }: JumpToResolverProps) {
|
||||
const data = use(dataPromise)
|
||||
|
||||
const { searchHistory, insertSearchHistoryItem, clearHistory } =
|
||||
useSearchHistory()
|
||||
|
||||
if (!data) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<JumpToClient
|
||||
data={data}
|
||||
history={searchHistory}
|
||||
onAction={(key) => {
|
||||
const item = data.find((d) => d.id === key)
|
||||
if (!item) {
|
||||
return
|
||||
}
|
||||
|
||||
insertSearchHistoryItem({
|
||||
id: item.id,
|
||||
name: item.displayName,
|
||||
type: item.type,
|
||||
searchTokens: [],
|
||||
destination: item.description,
|
||||
})
|
||||
}}
|
||||
onClearHistory={() => {
|
||||
clearHistory()
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,9 +1,63 @@
|
||||
import { getJumpToData } from "@/lib/trpc/memoizedRequests"
|
||||
"use client"
|
||||
|
||||
import { JumpToResolver } from "@/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Resolver"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import * as Sentry from "@sentry/nextjs"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { FormProvider, useForm } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
import { z } from "zod"
|
||||
|
||||
export async function JumpTo() {
|
||||
const dataPromise = getJumpToData()
|
||||
import { Search } from "@/components/Forms/BookingWidget/FormContent/Search"
|
||||
import { toast } from "@/components/TempDesignSystem/Toasts"
|
||||
|
||||
return <JumpToResolver dataPromise={dataPromise} />
|
||||
const jumpToSchema = z.object({
|
||||
destinationSearch: z.string().min(1, "Please enter a search term"),
|
||||
})
|
||||
type JumpToSchema = z.infer<typeof jumpToSchema>
|
||||
|
||||
export function JumpTo() {
|
||||
const router = useRouter()
|
||||
const intl = useIntl()
|
||||
const methods = useForm<JumpToSchema>({
|
||||
defaultValues: {
|
||||
destinationSearch: "",
|
||||
},
|
||||
shouldFocusError: false,
|
||||
mode: "onSubmit",
|
||||
resolver: zodResolver(jumpToSchema),
|
||||
reValidateMode: "onSubmit",
|
||||
})
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<Search
|
||||
variant="rounded"
|
||||
handlePressEnter={() => {
|
||||
void 0
|
||||
}}
|
||||
inputName={"destinationSearch"}
|
||||
onSelect={(item) => {
|
||||
if (!item.url) {
|
||||
Sentry.captureMessage(
|
||||
"Unable to JumpTo selected location, no URL provided",
|
||||
{
|
||||
extra: { locationName: item.name },
|
||||
}
|
||||
)
|
||||
toast.error(
|
||||
intl.formatMessage(
|
||||
{ defaultMessage: "Unable to open page for {locationName}" },
|
||||
{ locationName: item.name }
|
||||
)
|
||||
)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
router.push(item.url)
|
||||
}}
|
||||
withSearchButton
|
||||
/>
|
||||
</FormProvider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
.searchContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
border-radius: var(--Corner-radius-Rounded);
|
||||
border: 1px solid var(--Border-Default);
|
||||
background: var(--Surface-Primary-Default);
|
||||
padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -4,15 +4,12 @@
|
||||
width: 100%;
|
||||
height: 610px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.mapContainer {
|
||||
@media screen and (min-width: 768px) {
|
||||
height: 580px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1367px) {
|
||||
.mapContainer {
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
height: 560px;
|
||||
}
|
||||
}
|
||||
@@ -38,14 +35,25 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.jumpToContainer {
|
||||
display: grid;
|
||||
.headerContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x4);
|
||||
padding: var(--Space-x4) var(--Space-x2);
|
||||
background: var(--Surface-Secondary-Default);
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: var(--Text-Interactive-Default);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
.heading {
|
||||
color: var(--Text-Interactive-Default);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.jumpToContainer {
|
||||
width: 100%;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,11 +25,13 @@ export default async function DestinationOverviewPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.jumpToContainer}>
|
||||
<div className={styles.headerContainer}>
|
||||
<Typography variant="Title/lg">
|
||||
<h1 className={styles.heading}>{destinationOverviewPage.heading}</h1>
|
||||
</Typography>
|
||||
<JumpTo />
|
||||
<div className={styles.jumpToContainer}>
|
||||
<JumpTo />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.mapContainer}>
|
||||
<Suspense fallback={<SkeletonShimmer width="100%" height="100%" />}>
|
||||
|
||||
@@ -47,21 +47,13 @@ export function ListItemSkeleton() {
|
||||
|
||||
return (
|
||||
<li className={classNames}>
|
||||
<Body
|
||||
color="black"
|
||||
textTransform="bold"
|
||||
style={{ marginBottom: "0.25rem" }}
|
||||
>
|
||||
<div style={{ marginBottom: "0.25rem" }}>
|
||||
<SkeletonShimmer width={"200px"} height="18px" display="block" />
|
||||
</Body>
|
||||
</div>
|
||||
|
||||
<Body
|
||||
color="black"
|
||||
textTransform="bold"
|
||||
style={{ marginBottom: "0.25rem" }}
|
||||
>
|
||||
<div>
|
||||
<SkeletonShimmer width={"70px"} height="18px" display="block" />
|
||||
</Body>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
"use client"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useEffect } from "react"
|
||||
import { useFormContext } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
import { useDebounceValue } from "usehooks-ts"
|
||||
@@ -23,6 +23,7 @@ import styles from "./searchList.module.css"
|
||||
import type { SearchListProps } from "@/types/components/search"
|
||||
|
||||
export default function SearchList({
|
||||
searchInputName,
|
||||
getItemProps,
|
||||
getMenuProps,
|
||||
handleClearSearchHistory,
|
||||
@@ -33,14 +34,14 @@ export default function SearchList({
|
||||
}: SearchListProps) {
|
||||
const lang = useLang()
|
||||
const intl = useIntl()
|
||||
const [hasMounted, setHasMounted] = useState(false)
|
||||
|
||||
const {
|
||||
clearErrors,
|
||||
formState: { errors, isSubmitted },
|
||||
} = useFormContext()
|
||||
const searchError = errors["search"]
|
||||
const searchError = errors[searchInputName]
|
||||
|
||||
const [debouncedSearch, setDebouncedSearch] = useDebounceValue(search, 250)
|
||||
const [debouncedSearch, setDebouncedSearch] = useDebounceValue(search, 300)
|
||||
|
||||
useEffect(() => {
|
||||
setDebouncedSearch(search)
|
||||
@@ -57,14 +58,14 @@ export default function SearchList({
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
clearErrors("search")
|
||||
}, [search, clearErrors])
|
||||
clearErrors(searchInputName)
|
||||
}, [search, clearErrors, searchInputName])
|
||||
|
||||
useEffect(() => {
|
||||
let timeoutID: ReturnType<typeof setTimeout> | null = null
|
||||
if (searchError) {
|
||||
timeoutID = setTimeout(() => {
|
||||
clearErrors("search")
|
||||
clearErrors(searchInputName)
|
||||
// magic number originates from animation
|
||||
// 5000ms delay + 120ms exectuion
|
||||
}, 5120)
|
||||
@@ -75,15 +76,7 @@ export default function SearchList({
|
||||
clearTimeout(timeoutID)
|
||||
}
|
||||
}
|
||||
}, [clearErrors, searchError])
|
||||
|
||||
useEffect(() => {
|
||||
setHasMounted(true)
|
||||
}, [setHasMounted])
|
||||
|
||||
if (!hasMounted) {
|
||||
return null
|
||||
}
|
||||
}, [clearErrors, searchError, searchInputName])
|
||||
|
||||
if (searchError && isSubmitted && typeof searchError.message === "string") {
|
||||
if (searchError.message === "Required") {
|
||||
@@ -166,7 +159,7 @@ export default function SearchList({
|
||||
"We couldn't find a matching location for your search.",
|
||||
})}
|
||||
</Body>
|
||||
{searchHistory && (
|
||||
{searchHistory && searchHistory.length > 0 && (
|
||||
<>
|
||||
<Divider className={styles.noResultsDivider} color="beige" />
|
||||
<Footnote
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
"use client"
|
||||
|
||||
import { cva } from "class-variance-authority"
|
||||
import Downshift from "downshift"
|
||||
import { type ChangeEvent, type FormEvent } from "react"
|
||||
import { useFormContext, useWatch } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Button } from "@scandic-hotels/design-system/Button"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { type AutoCompleteLocation } from "@/server/routers/autocomplete/schema"
|
||||
|
||||
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
|
||||
import { Input } from "../Input"
|
||||
import SearchList from "./SearchList"
|
||||
@@ -15,15 +20,27 @@ import { useSearchHistory } from "./useSearchHistory"
|
||||
|
||||
import styles from "./search.module.css"
|
||||
|
||||
import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
|
||||
import type { SearchProps } from "@/types/components/search"
|
||||
interface SearchProps {
|
||||
className?: string
|
||||
handlePressEnter: () => void
|
||||
inputName: string
|
||||
onSelect?: (selectedItem: AutoCompleteLocation) => void
|
||||
variant?: "rounded" | "default"
|
||||
withSearchButton?: boolean
|
||||
selectOnBlur?: boolean
|
||||
}
|
||||
|
||||
const SEARCH_TERM_NAME = "search"
|
||||
|
||||
export default function Search({ handlePressEnter }: SearchProps) {
|
||||
const { register, setValue } = useFormContext<BookingWidgetSchema>()
|
||||
export function Search({
|
||||
handlePressEnter,
|
||||
inputName: SEARCH_TERM_NAME,
|
||||
onSelect,
|
||||
variant,
|
||||
withSearchButton = false,
|
||||
selectOnBlur = false,
|
||||
}: SearchProps) {
|
||||
const { register, setValue, setFocus } = useFormContext()
|
||||
const intl = useIntl()
|
||||
const searchTerm = useWatch({ name: SEARCH_TERM_NAME })
|
||||
const searchTerm = useWatch({ name: SEARCH_TERM_NAME }) as string
|
||||
const { searchHistory, insertSearchHistoryItem, clearHistory } =
|
||||
useSearchHistory()
|
||||
|
||||
@@ -47,6 +64,7 @@ export default function Search({ handlePressEnter }: SearchProps) {
|
||||
case "cities":
|
||||
setValue("hotel", undefined)
|
||||
setValue("city", selectedItem.name)
|
||||
|
||||
break
|
||||
case "hotels":
|
||||
setValue("hotel", +selectedItem.id)
|
||||
@@ -56,12 +74,21 @@ export default function Search({ handlePressEnter }: SearchProps) {
|
||||
console.error("Unhandled type:", selectedItem.type)
|
||||
break
|
||||
}
|
||||
|
||||
onSelect?.(selectedItem)
|
||||
}
|
||||
|
||||
function handleClearSearchHistory() {
|
||||
clearHistory()
|
||||
}
|
||||
|
||||
const searchInputClassName = searchInputVariants({
|
||||
withSearchButton: withSearchButton,
|
||||
})
|
||||
const clearButtonClassName = clearButtonVariants({
|
||||
visible: !!searchTerm?.trim(),
|
||||
})
|
||||
|
||||
return (
|
||||
<Downshift
|
||||
inputValue={searchTerm}
|
||||
@@ -78,48 +105,95 @@ export default function Search({ handlePressEnter }: SearchProps) {
|
||||
highlightedIndex,
|
||||
isOpen,
|
||||
openMenu,
|
||||
selectHighlightedItem,
|
||||
}) => (
|
||||
<div className={styles.container}>
|
||||
<label
|
||||
{...getLabelProps({ htmlFor: SEARCH_TERM_NAME })}
|
||||
className={styles.label}
|
||||
>
|
||||
<Caption
|
||||
type="bold"
|
||||
color={isOpen ? "uiTextActive" : "red"}
|
||||
asChild
|
||||
<div className={searchContainerVariants({ variant })}>
|
||||
<div className={styles.inputContainer}>
|
||||
<label
|
||||
{...getLabelProps({ htmlFor: SEARCH_TERM_NAME })}
|
||||
className={labelVariants({
|
||||
color: !withSearchButton || isOpen ? "red" : "default",
|
||||
})}
|
||||
>
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Where to?",
|
||||
})}
|
||||
</span>
|
||||
</Caption>
|
||||
</label>
|
||||
<div {...getRootProps({}, { suppressRefError: true })}>
|
||||
<label className={styles.searchInput}>
|
||||
<Input
|
||||
{...getInputProps({
|
||||
id: SEARCH_TERM_NAME,
|
||||
onFocus() {
|
||||
openMenu()
|
||||
},
|
||||
placeholder: intl.formatMessage({
|
||||
defaultMessage: "Hotels & Destinations",
|
||||
}),
|
||||
value: searchTerm,
|
||||
...register(SEARCH_TERM_NAME, {
|
||||
onChange: handleOnChange,
|
||||
}),
|
||||
onKeyDown: (e) => {
|
||||
if (e.key === "Enter" && !isOpen) {
|
||||
handlePressEnter()
|
||||
}
|
||||
},
|
||||
type: "search",
|
||||
})}
|
||||
/>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>
|
||||
{intl.formatMessage({ defaultMessage: "Where to?" })}
|
||||
</span>
|
||||
</Typography>
|
||||
<div {...getRootProps({}, { suppressRefError: true })}>
|
||||
<div className={searchInputClassName}>
|
||||
<Input
|
||||
{...getInputProps({
|
||||
id: SEARCH_TERM_NAME,
|
||||
onFocus() {
|
||||
openMenu()
|
||||
},
|
||||
placeholder: intl.formatMessage({
|
||||
defaultMessage: "Hotels & Destinations",
|
||||
}),
|
||||
value: searchTerm,
|
||||
...register(SEARCH_TERM_NAME, {
|
||||
onChange: handleOnChange,
|
||||
onBlur: () => {
|
||||
if (selectOnBlur) {
|
||||
selectHighlightedItem()
|
||||
}
|
||||
},
|
||||
}),
|
||||
onKeyDown: (e) => {
|
||||
if (e.key === "Enter" && !isOpen) {
|
||||
handlePressEnter()
|
||||
}
|
||||
},
|
||||
type: "search",
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
{withSearchButton && (
|
||||
<div className={styles.searchButtonContainer}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<Button
|
||||
variant="Text"
|
||||
size="Small"
|
||||
onPress={() => {
|
||||
setValue(SEARCH_TERM_NAME, "")
|
||||
}}
|
||||
className={clearButtonClassName}
|
||||
>
|
||||
{intl.formatMessage({ defaultMessage: "Clear" })}
|
||||
</Button>
|
||||
</Typography>
|
||||
<Button
|
||||
className={styles.searchButton}
|
||||
variant="Primary"
|
||||
size="Small"
|
||||
type="submit"
|
||||
onPress={() => {
|
||||
if (!searchTerm) {
|
||||
setFocus(SEARCH_TERM_NAME)
|
||||
return
|
||||
}
|
||||
|
||||
openMenu()
|
||||
setTimeout(() => {
|
||||
// This is a workaround to ensure that the menu is open before selecting the highlighted item
|
||||
// Otherwise there is no highlighted item.
|
||||
// Would need to keep track of the last highlighted item otherwise
|
||||
selectHighlightedItem()
|
||||
}, 0)
|
||||
}}
|
||||
>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<>
|
||||
<MaterialIcon icon="search" color="CurrentColor" />
|
||||
{intl.formatMessage({ defaultMessage: "Search" })}
|
||||
</>
|
||||
</Typography>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<SearchList
|
||||
getItemProps={getItemProps}
|
||||
@@ -129,6 +203,7 @@ export default function Search({ handlePressEnter }: SearchProps) {
|
||||
isOpen={isOpen}
|
||||
search={searchTerm}
|
||||
searchHistory={searchHistory}
|
||||
searchInputName={SEARCH_TERM_NAME}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -141,13 +216,9 @@ export function SearchSkeleton() {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.label}>
|
||||
<Caption type="bold" color="red" asChild>
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Where to?",
|
||||
})}
|
||||
</span>
|
||||
</Caption>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{intl.formatMessage({ defaultMessage: "Where to?" })}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<SkeletonShimmer width={"100%"} display="block" height="16px" />
|
||||
@@ -155,3 +226,48 @@ export function SearchSkeleton() {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const searchContainerVariants = cva(styles.container, {
|
||||
variants: {
|
||||
variant: {
|
||||
default: "",
|
||||
rounded: styles.rounded,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
})
|
||||
|
||||
const searchInputVariants = cva(styles.searchInput, {
|
||||
variants: {
|
||||
withSearchButton: {
|
||||
true: styles.withSearchButton,
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
withSearchButton: false,
|
||||
},
|
||||
})
|
||||
|
||||
const clearButtonVariants = cva(styles.clearButton, {
|
||||
variants: {
|
||||
visible: {
|
||||
true: styles.clearButtonVisible,
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const labelVariants = cva(styles.label, {
|
||||
variants: {
|
||||
color: {
|
||||
default: "",
|
||||
red: styles.red,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
color: "default",
|
||||
},
|
||||
})
|
||||
|
||||
@@ -6,34 +6,71 @@
|
||||
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
|
||||
position: relative;
|
||||
height: 60px;
|
||||
|
||||
&.rounded {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
|
||||
border: 1px solid var(--Border-Intense);
|
||||
border-radius: var(--Corner-radius-Rounded);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:has(input:active, input:focus, input:focus-within) {
|
||||
background-color: var(--Base-Background-Primary-Normal);
|
||||
}
|
||||
|
||||
&:has(input:active, input:focus, input:focus-within) {
|
||||
border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
|
||||
}
|
||||
}
|
||||
|
||||
.container:hover,
|
||||
.container:has(input:active, input:focus, input:focus-within) {
|
||||
background-color: var(--Base-Background-Primary-Normal);
|
||||
.label {
|
||||
flex: 1;
|
||||
&:has(
|
||||
~ .inputContainer input:active,
|
||||
~ .inputContainer input:focus,
|
||||
~ .inputContainer input:focus-within
|
||||
)
|
||||
p {
|
||||
color: var(--UI-Text-Active);
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: var(--Scandic-Brand-Scandic-Red);
|
||||
}
|
||||
}
|
||||
|
||||
.container:has(input:active, input:focus, input:focus-within) {
|
||||
border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
|
||||
.searchButtonContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.label:has(
|
||||
~ .inputContainer input:active,
|
||||
~ .inputContainer input:focus,
|
||||
~ .inputContainer input:focus-within
|
||||
)
|
||||
p {
|
||||
color: var(--UI-Text-Active);
|
||||
.searchButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Space-x05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inputContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
padding: var(--Spacing-x3) var(--Spacing-x-one-and-half) var(--Spacing-x-half);
|
||||
|
||||
align-items: center;
|
||||
display: grid;
|
||||
|
||||
@@ -42,4 +79,21 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.withSearchButton {
|
||||
& input[type="search"]::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clearButton {
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
pointer-events: none;
|
||||
|
||||
&.clearButtonVisible {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
|
||||
import {
|
||||
type AutoCompleteLocation,
|
||||
autoCompleteLocationSchema,
|
||||
} from "@/server/routers/autocomplete/schema"
|
||||
|
||||
export const SEARCH_HISTORY_LOCALSTORAGE_KEY = "searchHistory"
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
export function useSearchHistory() {
|
||||
const MAX_HISTORY_LENGTH = 5
|
||||
const KEY = useSearchHistoryKey()
|
||||
|
||||
function getHistoryFromLocalStorage(): AutoCompleteLocation[] {
|
||||
const stringifiedHistory = localStorage.getItem(
|
||||
SEARCH_HISTORY_LOCALSTORAGE_KEY
|
||||
)
|
||||
const getHistoryFromLocalStorage = useCallback((): AutoCompleteLocation[] => {
|
||||
const stringifiedHistory = localStorage.getItem(KEY)
|
||||
|
||||
try {
|
||||
const parsedHistory = JSON.parse(stringifiedHistory ?? "[]")
|
||||
@@ -26,14 +26,18 @@ export function useSearchHistory() {
|
||||
return existingHistory
|
||||
} catch (error) {
|
||||
console.error("Failed to parse search history:", error)
|
||||
localStorage.removeItem(SEARCH_HISTORY_LOCALSTORAGE_KEY)
|
||||
localStorage.removeItem(KEY)
|
||||
|
||||
return []
|
||||
}
|
||||
}
|
||||
}, [KEY])
|
||||
|
||||
function updateSearchHistory(newItem: AutoCompleteLocation) {
|
||||
const existingHistory = getHistoryFromLocalStorage()
|
||||
if (!autoCompleteLocationSchema.safeParse(newItem).success) {
|
||||
return existingHistory
|
||||
}
|
||||
|
||||
const oldSearchHistoryWithoutTheNew = existingHistory.filter(
|
||||
(h) => h.type !== newItem.type || h.id !== newItem.id
|
||||
)
|
||||
@@ -42,10 +46,7 @@ export function useSearchHistory() {
|
||||
newItem,
|
||||
...oldSearchHistoryWithoutTheNew.slice(0, MAX_HISTORY_LENGTH - 1),
|
||||
]
|
||||
localStorage.setItem(
|
||||
SEARCH_HISTORY_LOCALSTORAGE_KEY,
|
||||
JSON.stringify(updatedSearchHistory)
|
||||
)
|
||||
localStorage.setItem(KEY, JSON.stringify(updatedSearchHistory))
|
||||
|
||||
return updatedSearchHistory
|
||||
}
|
||||
@@ -54,17 +55,19 @@ export function useSearchHistory() {
|
||||
|
||||
useEffect(() => {
|
||||
setSearchHistory(getHistoryFromLocalStorage())
|
||||
}, [])
|
||||
}, [KEY, getHistoryFromLocalStorage])
|
||||
|
||||
function clearHistory() {
|
||||
localStorage.removeItem(SEARCH_HISTORY_LOCALSTORAGE_KEY)
|
||||
localStorage.removeItem(KEY)
|
||||
setSearchHistory([])
|
||||
}
|
||||
|
||||
function insertSearchHistoryItem(
|
||||
newItem: AutoCompleteLocation
|
||||
): AutoCompleteLocation[] {
|
||||
const updatedHistory = updateSearchHistory(newItem)
|
||||
setSearchHistory(updatedHistory)
|
||||
|
||||
return updatedHistory
|
||||
}
|
||||
|
||||
@@ -74,3 +77,10 @@ export function useSearchHistory() {
|
||||
clearHistory,
|
||||
}
|
||||
}
|
||||
|
||||
function useSearchHistoryKey() {
|
||||
const SEARCH_HISTORY_LOCALSTORAGE_KEY = "searchHistory"
|
||||
const lang = useLang()
|
||||
|
||||
return `${SEARCH_HISTORY_LOCALSTORAGE_KEY}-${lang}`.toLowerCase()
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ import Button from "@/components/TempDesignSystem/Button"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
|
||||
import { RemoveExtraRooms } from "./BookingCode"
|
||||
import Search, { SearchSkeleton } from "./Search"
|
||||
import { Search, SearchSkeleton } from "./Search"
|
||||
import Voucher, { VoucherSkeleton } from "./Voucher"
|
||||
|
||||
import styles from "./formContent.module.css"
|
||||
@@ -41,7 +41,11 @@ export default function FormContent({
|
||||
<div className={styles.input}>
|
||||
<div className={styles.inputContainer}>
|
||||
<div className={styles.where}>
|
||||
<Search handlePressEnter={onSubmit} />
|
||||
<Search
|
||||
handlePressEnter={onSubmit}
|
||||
selectOnBlur={true}
|
||||
inputName="search"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.when}>
|
||||
<Caption color="red" type="bold">
|
||||
|
||||
@@ -77,6 +77,7 @@
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fetch-retry": "^6.0.0",
|
||||
"framer-motion": "^11.3.28",
|
||||
"fuse.js": "^7.1.0",
|
||||
"graphql": "^16.8.1",
|
||||
"graphql-request": "^6.1.0",
|
||||
"graphql-tag": "^2.12.6",
|
||||
|
||||
@@ -2,13 +2,16 @@ import { z } from "zod"
|
||||
|
||||
import { Lang } from "@/constants/languages"
|
||||
import { safeProtectedServiceProcedure } from "@/server/trpc"
|
||||
import { isDefined } from "@/server/utils"
|
||||
|
||||
import { getCacheClient } from "@/services/dataCache"
|
||||
import { safeTry } from "@/utils/safeTry"
|
||||
|
||||
import { getCityPageUrls } from "../contentstack/destinationCityPage/utils"
|
||||
import { getHotelPageUrls } from "../contentstack/hotelPage/utils"
|
||||
import { getCitiesByCountry, getCountries, getLocations } from "../hotels/utils"
|
||||
import { filterLocationByQuery } from "./util/filterLocationByQuery"
|
||||
import { filterAndCategorizeAutoComplete } from "./util/filterAndCategorizeAutoComplete"
|
||||
import { mapLocationToAutoCompleteLocation } from "./util/mapLocationToAutoCompleteLocation"
|
||||
import { sortAutocompleteLocations } from "./util/sortAutocompleteLocations"
|
||||
|
||||
import type { AutoCompleteLocation } from "./schema"
|
||||
|
||||
@@ -35,10 +38,13 @@ export const getDestinationsAutoCompleteRoute = safeProtectedServiceProcedure
|
||||
.query(async ({ ctx, input }): Promise<DestinationsAutoCompleteOutput> => {
|
||||
const cacheClient = await getCacheClient()
|
||||
|
||||
const lang = input.lang || ctx.lang
|
||||
const locations: AutoCompleteLocation[] = await cacheClient.cacheOrGet(
|
||||
`autocomplete:destinations:locations:${input.lang}`,
|
||||
`autocomplete:destinations:locations:${lang}`,
|
||||
async () => {
|
||||
const lang = input.lang || ctx.lang
|
||||
const hotelUrlsPromise = safeTry(getHotelPageUrls(lang))
|
||||
const cityUrlsPromise = safeTry(getCityPageUrls(lang))
|
||||
|
||||
const countries = await getCountries({
|
||||
lang: lang,
|
||||
serviceToken: ctx.serviceToken,
|
||||
@@ -60,16 +66,44 @@ export const getDestinationsAutoCompleteRoute = safeProtectedServiceProcedure
|
||||
citiesByCountry: citiesByCountry,
|
||||
})
|
||||
|
||||
const [hotelUrls, hotelUrlsError] = await hotelUrlsPromise
|
||||
const [cityUrls, cityUrlsError] = await cityUrlsPromise
|
||||
|
||||
if (hotelUrlsError || cityUrlsError || !hotelUrls || !cityUrls) {
|
||||
throw new Error("Unable to fetch location URLs")
|
||||
}
|
||||
|
||||
return locations
|
||||
.map((location) => {
|
||||
let url: string | undefined
|
||||
|
||||
if (location.type === "cities") {
|
||||
url = cityUrls.find(
|
||||
(c) =>
|
||||
c.city &&
|
||||
location.cityIdentifier &&
|
||||
c.city === location.cityIdentifier
|
||||
)?.url
|
||||
}
|
||||
|
||||
if (location.type === "hotels") {
|
||||
url = hotelUrls.find(
|
||||
(h) => h.hotelId && location.id && h.hotelId === location.id
|
||||
)?.url
|
||||
}
|
||||
|
||||
return { ...location, url }
|
||||
})
|
||||
.map(mapLocationToAutoCompleteLocation)
|
||||
.filter(isDefined)
|
||||
},
|
||||
"1d"
|
||||
)
|
||||
|
||||
const filteredLocations = locations.filter((location) =>
|
||||
filterLocationByQuery({ location, query: input.query })
|
||||
)
|
||||
const hits = filterAndCategorizeAutoComplete({
|
||||
locations,
|
||||
query: input.query,
|
||||
})
|
||||
|
||||
const selectedHotel = locations.find(
|
||||
(location) =>
|
||||
@@ -81,21 +115,8 @@ export const getDestinationsAutoCompleteRoute = safeProtectedServiceProcedure
|
||||
location.type === "cities" && location.name === input.selectedCity
|
||||
)
|
||||
|
||||
const sortedCities = sortAutocompleteLocations(
|
||||
filteredLocations.filter(isCity),
|
||||
input.query
|
||||
)
|
||||
|
||||
const sortedHotels = sortAutocompleteLocations(
|
||||
filteredLocations.filter(isHotel),
|
||||
input.query
|
||||
)
|
||||
|
||||
return {
|
||||
hits: {
|
||||
cities: sortedCities,
|
||||
hotels: sortedHotels,
|
||||
},
|
||||
hits: hits,
|
||||
currentSelection: {
|
||||
city: isCity(selectedCity) ? selectedCity : null,
|
||||
hotel: isHotel(selectedHotel) ? selectedHotel : null,
|
||||
@@ -114,9 +135,3 @@ function isCity(
|
||||
): location is AutoCompleteLocation & { type: "cities" } {
|
||||
return !!location && location.type === "cities"
|
||||
}
|
||||
|
||||
function isDefined(
|
||||
value: AutoCompleteLocation | null | undefined
|
||||
): value is AutoCompleteLocation {
|
||||
return !!value
|
||||
}
|
||||
|
||||
@@ -6,5 +6,7 @@ export const autoCompleteLocationSchema = z.object({
|
||||
type: z.enum(["cities", "hotels"]),
|
||||
searchTokens: z.array(z.string()),
|
||||
destination: z.string(),
|
||||
url: z.string().optional(),
|
||||
})
|
||||
|
||||
export type AutoCompleteLocation = z.infer<typeof autoCompleteLocationSchema>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { filterAutoCompleteLocations } from "./filterAutoCompleteLocations"
|
||||
|
||||
import type { AutoCompleteLocation } from "../schema"
|
||||
|
||||
export type DestinationsAutoCompleteOutput = {
|
||||
hits: {
|
||||
hotels: AutoCompleteLocation[]
|
||||
cities: AutoCompleteLocation[]
|
||||
}
|
||||
currentSelection: {
|
||||
hotel: (AutoCompleteLocation & { type: "hotels" }) | null
|
||||
city: (AutoCompleteLocation & { type: "cities" }) | null
|
||||
}
|
||||
}
|
||||
|
||||
export function filterAndCategorizeAutoComplete({
|
||||
locations,
|
||||
query,
|
||||
}: {
|
||||
locations: AutoCompleteLocation[]
|
||||
query: string
|
||||
}) {
|
||||
const rankedLocations = filterAutoCompleteLocations(locations, query)
|
||||
|
||||
const sortedCities = rankedLocations.filter(isCity)
|
||||
const sortedHotels = rankedLocations.filter(isHotel)
|
||||
|
||||
return {
|
||||
cities: sortedCities,
|
||||
hotels: sortedHotels,
|
||||
}
|
||||
}
|
||||
|
||||
function isHotel(
|
||||
location: AutoCompleteLocation | null | undefined
|
||||
): location is AutoCompleteLocation & { type: "hotels" } {
|
||||
return !!location && location.type === "hotels"
|
||||
}
|
||||
|
||||
function isCity(
|
||||
location: AutoCompleteLocation | null | undefined
|
||||
): location is AutoCompleteLocation & { type: "cities" } {
|
||||
return !!location && location.type === "cities"
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
import { describe, expect, it } from "@jest/globals"
|
||||
|
||||
import { filterAutoCompleteLocations } from "./filterAutoCompleteLocations"
|
||||
|
||||
import type { DeepPartial } from "@/types/DeepPartial"
|
||||
import type { AutoCompleteLocation } from "../schema"
|
||||
|
||||
describe("rankAutoCompleteLocations", () => {
|
||||
it("should give no hits when the query does not match", () => {
|
||||
const locations = [scandicAlborgOst] as DeepPartial<AutoCompleteLocation>[]
|
||||
|
||||
const query = "NonMatchingQuery"
|
||||
const ranked = filterAutoCompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(ranked.length).toBe(0)
|
||||
})
|
||||
|
||||
it("should include items when the query matches parts of name", () => {
|
||||
const locations = [scandicAlborgOst] as DeepPartial<AutoCompleteLocation>[]
|
||||
|
||||
const query = "Øst"
|
||||
const ranked = filterAutoCompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(ranked.length).toBe(1)
|
||||
expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
|
||||
})
|
||||
|
||||
it("should allow multiple search terms", () => {
|
||||
const locations = [scandicAlborgOst] as DeepPartial<AutoCompleteLocation>[]
|
||||
|
||||
const query = "Aalborg Øst"
|
||||
const ranked = filterAutoCompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(ranked.length).toBe(1)
|
||||
expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
|
||||
})
|
||||
|
||||
it("should rank full word higher than part of word", () => {
|
||||
const locations = [
|
||||
scandicSyvSostre,
|
||||
scandicAlborgOst,
|
||||
] as DeepPartial<AutoCompleteLocation>[]
|
||||
|
||||
const query = "Øst"
|
||||
const ranked = filterAutoCompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(ranked.length).toBe(2)
|
||||
expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
|
||||
expect(ranked.at(1)!.name).toEqual("Scandic Syv Søstre")
|
||||
})
|
||||
|
||||
it("should ignore items without match", () => {
|
||||
const locations = [
|
||||
scandicSyvSostre,
|
||||
scandicAlborgOst,
|
||||
berlinLodge,
|
||||
scandicBrennemoen,
|
||||
] as DeepPartial<AutoCompleteLocation>[]
|
||||
|
||||
const query = "Øst"
|
||||
const ranked = filterAutoCompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(ranked.length).toBe(3)
|
||||
expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
|
||||
expect(ranked.at(1)!.name).toEqual("Scandic Syv Søstre")
|
||||
expect(ranked.at(2)!.name).toEqual("Scandic Brennemoen")
|
||||
})
|
||||
|
||||
it("should ignore 'scandic' from name and destination when searching", () => {
|
||||
const locations = [scandicAlborgOst, scandicBrennemoen].map((x) => ({
|
||||
...x,
|
||||
searchTokens: [],
|
||||
})) as DeepPartial<AutoCompleteLocation>[]
|
||||
|
||||
const query = "scandic"
|
||||
const ranked = filterAutoCompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(ranked.length).toBe(0)
|
||||
})
|
||||
|
||||
it("should get hits for destination", () => {
|
||||
const locations = [
|
||||
scandicAlborgOst,
|
||||
scandicBrennemoen,
|
||||
] as DeepPartial<AutoCompleteLocation>[]
|
||||
|
||||
const query = "Mysen"
|
||||
const ranked = filterAutoCompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(ranked.length).toBe(1)
|
||||
expect(ranked.at(0)!.name).toBe("Scandic Brennemoen")
|
||||
})
|
||||
|
||||
it("should get hits for searchTokens", () => {
|
||||
const locations = [
|
||||
scandicAlborgOst,
|
||||
scandicBrennemoen,
|
||||
] as DeepPartial<AutoCompleteLocation>[]
|
||||
|
||||
const query = "tusenfryd"
|
||||
const ranked = filterAutoCompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(ranked.length).toBe(1)
|
||||
expect(ranked.at(0)!.name).toBe("Scandic Brennemoen")
|
||||
})
|
||||
|
||||
it("should match when using the wrong aumlaut ö -> ø", () => {
|
||||
const locations = [scandicBodo] as DeepPartial<AutoCompleteLocation>[]
|
||||
|
||||
const query = "bodö"
|
||||
const ranked = filterAutoCompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(ranked.length).toBe(1)
|
||||
expect(ranked.at(0)!.name).toBe("Scandic Bodø")
|
||||
})
|
||||
})
|
||||
|
||||
const scandicAlborgOst: DeepPartial<AutoCompleteLocation> = {
|
||||
name: "Scandic Aalborg Øst",
|
||||
destination: "Aalborg",
|
||||
searchTokens: [
|
||||
"aalborg",
|
||||
"aalborg øst",
|
||||
"scandic aalborg øst",
|
||||
"aalborg ost",
|
||||
"scandic aalborg ost",
|
||||
],
|
||||
}
|
||||
|
||||
const scandicBrennemoen: DeepPartial<AutoCompleteLocation> = {
|
||||
name: "Scandic Brennemoen",
|
||||
destination: "Mysen",
|
||||
searchTokens: [
|
||||
"mysen",
|
||||
"askim",
|
||||
"indre østfold",
|
||||
"drøbak",
|
||||
"slitu",
|
||||
"morenen",
|
||||
"østfoldbadet",
|
||||
"tusenfryd",
|
||||
"brennemoen",
|
||||
"scandic brennemoen",
|
||||
"indre ostfold",
|
||||
"drobak",
|
||||
"ostfoldbadet",
|
||||
],
|
||||
}
|
||||
|
||||
const scandicSyvSostre: DeepPartial<AutoCompleteLocation> = {
|
||||
name: "Scandic Syv Søstre",
|
||||
destination: "Sandnessjoen",
|
||||
searchTokens: [
|
||||
"syv sostre",
|
||||
"sandnessjoen",
|
||||
"sandnessjøen",
|
||||
"syv søstre",
|
||||
"scandic syv søstre",
|
||||
"scandic syv sostre",
|
||||
],
|
||||
}
|
||||
|
||||
const berlinLodge: DeepPartial<AutoCompleteLocation> = {
|
||||
name: "Berlin Lodge",
|
||||
searchTokens: [],
|
||||
}
|
||||
|
||||
const scandicBodo: DeepPartial<AutoCompleteLocation> = {
|
||||
name: "Scandic Bodø",
|
||||
destination: "Bodo",
|
||||
searchTokens: [
|
||||
"bodo",
|
||||
"kjerringoy",
|
||||
"bodo i vinden",
|
||||
"visit bodo",
|
||||
"badin",
|
||||
"scandic bodo",
|
||||
"bodø",
|
||||
"stormen",
|
||||
"midnattsol",
|
||||
"hurtigruten",
|
||||
"saltstraumen",
|
||||
"nord universitet",
|
||||
"kjerringøy",
|
||||
"nordlys",
|
||||
"tuvsjyen",
|
||||
"stella polaris",
|
||||
"topptur",
|
||||
"svartisen",
|
||||
"polarsirkelen",
|
||||
"aurora borealis",
|
||||
"bodø i vinden",
|
||||
"visit bodø",
|
||||
"bådin",
|
||||
"norsk luftfartsmuseum",
|
||||
"rib",
|
||||
"scandic bodø",
|
||||
],
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import Fuse from "fuse.js"
|
||||
|
||||
import type { AutoCompleteLocation } from "../schema"
|
||||
|
||||
type SearchableAutoCompleteLocation = AutoCompleteLocation & {
|
||||
nameTokens: string[]
|
||||
destinationTokens: string[]
|
||||
}
|
||||
type SearchableKey = keyof SearchableAutoCompleteLocation
|
||||
|
||||
const fuseConfig = new Fuse([] as SearchableAutoCompleteLocation[], {
|
||||
minMatchCharLength: 2,
|
||||
isCaseSensitive: false,
|
||||
ignoreDiacritics: true,
|
||||
includeMatches: true,
|
||||
includeScore: true,
|
||||
threshold: 0.2,
|
||||
keys: [
|
||||
{
|
||||
name: "nameTokens" satisfies SearchableKey,
|
||||
weight: 3,
|
||||
},
|
||||
{
|
||||
name: "destinationTokens" satisfies SearchableKey,
|
||||
weight: 2,
|
||||
},
|
||||
{
|
||||
name: "searchTokens" satisfies SearchableKey,
|
||||
weight: 1,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export function filterAutoCompleteLocations<T extends AutoCompleteLocation>(
|
||||
locations: T[],
|
||||
query: string
|
||||
) {
|
||||
const searchable = locations.map((x) => ({
|
||||
...x,
|
||||
nameTokens: extractTokens(x.name),
|
||||
destinationTokens: extractTokens(x.destination),
|
||||
}))
|
||||
fuseConfig.setCollection(searchable)
|
||||
|
||||
const searchResults = fuseConfig.search(query, { limit: 50 })
|
||||
|
||||
return searchResults.map(
|
||||
(x) =>
|
||||
({
|
||||
id: x.item.id,
|
||||
name: x.item.name,
|
||||
destination: x.item.destination,
|
||||
searchTokens: x.item.searchTokens,
|
||||
type: x.item.type,
|
||||
url: x.item.url,
|
||||
}) satisfies AutoCompleteLocation
|
||||
)
|
||||
}
|
||||
|
||||
function extractTokens(value: string): string[] {
|
||||
const cleaned = value?.toLowerCase().replaceAll("scandic", "").trim() ?? ""
|
||||
const output = [...new Set([cleaned, ...cleaned.split(" ")])]
|
||||
|
||||
return output
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
import { describe, expect, it } from "@jest/globals"
|
||||
|
||||
import { filterLocationByQuery } from "./filterLocationByQuery"
|
||||
|
||||
import type { DeepPartial } from "@/types/DeepPartial"
|
||||
import type { AutoCompleteLocation } from "../schema"
|
||||
|
||||
describe("filterLocationByQuery", () => {
|
||||
it("should return false if the query is too short", () => {
|
||||
const location: DeepPartial<AutoCompleteLocation> = {
|
||||
searchTokens: ["beach", "luxury"],
|
||||
}
|
||||
|
||||
expect(
|
||||
filterLocationByQuery({
|
||||
location: location as AutoCompleteLocation,
|
||||
query: " a ",
|
||||
})
|
||||
).toBe(false)
|
||||
|
||||
expect(
|
||||
filterLocationByQuery({
|
||||
location: location as AutoCompleteLocation,
|
||||
query: " ",
|
||||
})
|
||||
).toBe(false)
|
||||
})
|
||||
|
||||
it("should return true if one of the search tokens includes part of a valid query token", () => {
|
||||
const location: DeepPartial<AutoCompleteLocation> = {
|
||||
searchTokens: ["beach", "grand hotel", "stockholm"],
|
||||
}
|
||||
|
||||
expect(
|
||||
filterLocationByQuery({
|
||||
location: location as AutoCompleteLocation,
|
||||
query: "Bea",
|
||||
})
|
||||
).toBe(true)
|
||||
|
||||
expect(
|
||||
filterLocationByQuery({
|
||||
location: location as AutoCompleteLocation,
|
||||
query: "hotel",
|
||||
})
|
||||
).toBe(true)
|
||||
})
|
||||
|
||||
it("should return false if none of the search tokens include a valid query token", () => {
|
||||
const location: DeepPartial<AutoCompleteLocation> = {
|
||||
searchTokens: ["beach", "grand hotel", "stockholm"],
|
||||
}
|
||||
expect(
|
||||
filterLocationByQuery({
|
||||
location: location as AutoCompleteLocation,
|
||||
query: "xyz",
|
||||
})
|
||||
).toBe(false)
|
||||
|
||||
expect(
|
||||
filterLocationByQuery({
|
||||
location: location as AutoCompleteLocation,
|
||||
query: "garbage",
|
||||
})
|
||||
).toBe(false)
|
||||
})
|
||||
|
||||
it("should correctly handle queries with punctuation and extra spaces", () => {
|
||||
const location: DeepPartial<AutoCompleteLocation> = {
|
||||
searchTokens: ["grand hotel", "stockholm"],
|
||||
}
|
||||
|
||||
expect(
|
||||
filterLocationByQuery({
|
||||
location: location as AutoCompleteLocation,
|
||||
query: " Grand Hotel! ",
|
||||
})
|
||||
).toBe(true)
|
||||
})
|
||||
|
||||
it("should work with queries containing multiple valid tokens", () => {
|
||||
const location: DeepPartial<AutoCompleteLocation> = {
|
||||
searchTokens: ["beach", "luxury", "grand hotel", "stockholm"],
|
||||
}
|
||||
|
||||
expect(
|
||||
filterLocationByQuery({
|
||||
location: location as AutoCompleteLocation,
|
||||
query: "luxury beach",
|
||||
})
|
||||
).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -1,23 +0,0 @@
|
||||
import type { AutoCompleteLocation } from "../schema"
|
||||
|
||||
export function filterLocationByQuery({
|
||||
location,
|
||||
query,
|
||||
}: {
|
||||
location: AutoCompleteLocation
|
||||
query: string
|
||||
}) {
|
||||
const queryable = query
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^A-Za-zÀ-ÖØ-öø-ÿ0-9\s]/g, "") // Only keep alphanumeric characters and it's accents
|
||||
.substring(0, 30)
|
||||
.split(/\s+/)
|
||||
.filter((s) => s.length > 2)
|
||||
|
||||
if (queryable.length === 0) return false
|
||||
|
||||
return location.searchTokens?.some((token) =>
|
||||
queryable.some((q) => token.toLowerCase().includes(q))
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import { normalizeAumlauts } from "./normalizeAumlauts"
|
||||
|
||||
import type { Location } from "@/types/trpc/routers/hotel/locations"
|
||||
|
||||
export function getSearchTokens(location: Location) {
|
||||
@@ -11,25 +13,8 @@ export function getSearchTokens(location: Location) {
|
||||
.filter(hasValue)
|
||||
.map((x) => x.toLocaleLowerCase())
|
||||
|
||||
const additionalTokens: string[] = []
|
||||
|
||||
tokens.forEach((token) => {
|
||||
const replaced = token
|
||||
.replace(/å/g, "a")
|
||||
.replace(/ä/g, "a")
|
||||
.replace(/ö/g, "o")
|
||||
.replace(/æ/g, "a")
|
||||
.replace(/ø/g, "o")
|
||||
.replace(/é/g, "e")
|
||||
.replace(/ü/g, "u")
|
||||
if (replaced !== token) {
|
||||
additionalTokens.push(replaced)
|
||||
}
|
||||
})
|
||||
|
||||
const allTokens = [...new Set([...tokens, ...additionalTokens])]
|
||||
|
||||
return allTokens
|
||||
const normalizedTokens = normalizeAumlauts(tokens)
|
||||
return normalizedTokens
|
||||
}
|
||||
|
||||
function hasValue(value: string | null | undefined): value is string {
|
||||
|
||||
@@ -4,7 +4,7 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
|
||||
import type { AutoCompleteLocation } from "../schema"
|
||||
|
||||
export function mapLocationToAutoCompleteLocation(
|
||||
location: Location | null | undefined
|
||||
location: (Location & { url?: string }) | null | undefined
|
||||
): AutoCompleteLocation | null {
|
||||
if (!location) return null
|
||||
|
||||
@@ -12,6 +12,7 @@ export function mapLocationToAutoCompleteLocation(
|
||||
id: location.id,
|
||||
name: location.name,
|
||||
type: location.type,
|
||||
url: location.url,
|
||||
searchTokens: getSearchTokens(location),
|
||||
destination:
|
||||
location.type === "hotels"
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
export function normalizeAumlauts(terms: string[]): string[] {
|
||||
const additionalTerms: string[] = []
|
||||
|
||||
terms.forEach((token) => {
|
||||
if (!token) return
|
||||
|
||||
const replaced = token
|
||||
.replace(/å/g, "a")
|
||||
.replace(/ä/g, "a")
|
||||
.replace(/ö/g, "o")
|
||||
.replace(/ø/g, "o")
|
||||
.replace(/æ/g, "a")
|
||||
.replace(/é/g, "e")
|
||||
.replace(/ü/g, "u")
|
||||
|
||||
if (replaced !== token) {
|
||||
additionalTerms.push(replaced)
|
||||
}
|
||||
})
|
||||
|
||||
return [...new Set([...additionalTerms, ...terms])]
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
import { describe, expect, it } from "@jest/globals"
|
||||
|
||||
import { sortAutocompleteLocations } from "./sortAutocompleteLocations"
|
||||
|
||||
import type { DeepPartial } from "@/types/DeepPartial"
|
||||
import type { AutoCompleteLocation } from "../schema"
|
||||
|
||||
describe("sortAutocompleteLocations", () => {
|
||||
it("should put locations with names starting with the query at the top", () => {
|
||||
const locations: DeepPartial<AutoCompleteLocation>[] = [
|
||||
{ name: "Paris Hotel" },
|
||||
{ name: "London Inn" },
|
||||
{ name: "paradise Resort" },
|
||||
{ name: "Berlin Lodge" },
|
||||
]
|
||||
const query = "par"
|
||||
|
||||
const sorted = sortAutocompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(sorted.map((loc) => loc.name)).toEqual([
|
||||
"paradise Resort",
|
||||
"Paris Hotel",
|
||||
"Berlin Lodge",
|
||||
"London Inn",
|
||||
])
|
||||
})
|
||||
|
||||
it("should sort locations alphabetically if both start with the query", () => {
|
||||
const locations: DeepPartial<AutoCompleteLocation>[] = [
|
||||
{ name: "Alpha Place" },
|
||||
{ name: "alphabet City" },
|
||||
]
|
||||
const query = "al"
|
||||
const sorted = sortAutocompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(sorted.map((loc) => loc.name)).toEqual([
|
||||
"Alpha Place",
|
||||
"alphabet City",
|
||||
])
|
||||
})
|
||||
|
||||
it("should sort locations alphabetically if neither name starts with the query", () => {
|
||||
const locations: DeepPartial<AutoCompleteLocation>[] = [
|
||||
{ name: "Zenith" },
|
||||
{ name: "apple orchard" },
|
||||
{ name: "Mountain Retreat" },
|
||||
]
|
||||
const query = "xyz"
|
||||
const sorted = sortAutocompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(sorted.map((loc) => loc.name)).toEqual([
|
||||
"apple orchard",
|
||||
"Mountain Retreat",
|
||||
"Zenith",
|
||||
])
|
||||
})
|
||||
|
||||
it("should handle an empty query by sorting alphabetically", () => {
|
||||
const locations: DeepPartial<AutoCompleteLocation>[] = [
|
||||
{ name: "Delta" },
|
||||
{ name: "Alpha" },
|
||||
{ name: "Charlie" },
|
||||
{ name: "Bravo" },
|
||||
]
|
||||
const query = ""
|
||||
const sorted = sortAutocompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(sorted.map((loc) => loc.name)).toEqual([
|
||||
"Alpha",
|
||||
"Bravo",
|
||||
"Charlie",
|
||||
"Delta",
|
||||
])
|
||||
})
|
||||
|
||||
it("should be case-insensitive when sorting names", () => {
|
||||
const locations: DeepPartial<AutoCompleteLocation>[] = [
|
||||
{ name: "Mountain Cabin" },
|
||||
{ name: "Beachside Villa" },
|
||||
{ name: "beach House" },
|
||||
]
|
||||
const query = "beach"
|
||||
const sorted = sortAutocompleteLocations(
|
||||
locations as AutoCompleteLocation[],
|
||||
query
|
||||
)
|
||||
|
||||
expect(sorted.map((x) => x.name)).toEqual([
|
||||
"beach House",
|
||||
"Beachside Villa",
|
||||
"Mountain Cabin",
|
||||
])
|
||||
})
|
||||
})
|
||||
@@ -1,17 +0,0 @@
|
||||
import type { AutoCompleteLocation } from "../schema"
|
||||
|
||||
export function sortAutocompleteLocations<T extends AutoCompleteLocation>(
|
||||
locations: T[],
|
||||
query: string
|
||||
) {
|
||||
return locations.toSorted((a, b) => {
|
||||
const queryLower = query.toLowerCase()
|
||||
const aStarts = a.name.toLowerCase().startsWith(queryLower)
|
||||
const bStarts = b.name.toLowerCase().startsWith(queryLower)
|
||||
|
||||
if (aStarts && !bStarts) return -1
|
||||
if (!aStarts && bStarts) return 1
|
||||
|
||||
return a.name.localeCompare(b.name)
|
||||
})
|
||||
}
|
||||
@@ -21,6 +21,7 @@ export interface SearchListProps {
|
||||
isOpen: boolean
|
||||
handleClearSearchHistory: () => void
|
||||
highlightedIndex: HighlightedIndex
|
||||
searchInputName: string
|
||||
search: string
|
||||
searchHistory: AutoCompleteLocation[] | null
|
||||
}
|
||||
|
||||
@@ -6430,6 +6430,7 @@ __metadata:
|
||||
fast-deep-equal: "npm:^3.1.3"
|
||||
fetch-retry: "npm:^6.0.0"
|
||||
framer-motion: "npm:^11.3.28"
|
||||
fuse.js: "npm:^7.1.0"
|
||||
graphql: "npm:^16.8.1"
|
||||
graphql-request: "npm:^6.1.0"
|
||||
graphql-tag: "npm:^2.12.6"
|
||||
@@ -13006,6 +13007,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"fuse.js@npm:^7.1.0":
|
||||
version: 7.1.0
|
||||
resolution: "fuse.js@npm:7.1.0"
|
||||
checksum: 10c0/c0d1b1d192a4bdf3eade897453ddd28aff96b70bf3e49161a45880f9845ebaee97265595db633776700a5bcf8942223c752754a848d70c508c3c9fd997faad1e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"gensync@npm:^1.0.0-beta.2":
|
||||
version: 1.0.0-beta.2
|
||||
resolution: "gensync@npm:1.0.0-beta.2"
|
||||
|
||||
Reference in New Issue
Block a user