diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx index 4e79d408d..7ec43592c 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/index.tsx @@ -1,8 +1,7 @@ "use client" import { cx } from "class-variance-authority" -import { useRouter } from "next/navigation" -import { memo, useMemo, useTransition } from "react" +import { memo, useTransition } from "react" import { Autocomplete, Button as ButtonRAC, @@ -17,24 +16,20 @@ import { Button } from "@scandic-hotels/design-system/Button" import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import { Typography } from "@scandic-hotels/design-system/Typography" -import { ResultHistory } from "../Results/ResultHistory" -import { ResultMatches } from "../Results/ResultMatches" +import { Results } from "../Results" import styles from "./clientInline.module.css" import type { ClientProps } from "@/types/components/destinationOverviewPage/jumpTo/client" -const ResultMatchesMemo = memo(ResultMatches) -const ResultHistoryMemo = memo(ResultHistory) +const ResultsMemo = memo(Results) export function ClientInline({ results, latest, setFilterString, onAction, - onClearHistory, }: ClientProps) { - const router = useRouter() const intl = useIntl() const [isPending, startTransition] = useTransition() const isMounted = useIsMounted() @@ -42,20 +37,6 @@ export function ClientInline({ const showResults = !!results const showHistory = isMounted() && (!results || results.length === 0) - const latestResults = useMemo(() => { - return latest.concat({ - id: "actions", // The string "Actions" converts into a divider below - name: "Actions", - children: [ - { - id: "clearHistory", - type: "clearHistory", - displayName: intl.formatMessage({ id: "Clear searches" }), - }, - ], - }) - }, [intl, latest]) - return (
@@ -73,22 +54,6 @@ export function ClientInline({ onSubmit={(evt) => { evt.preventDefault() evt.stopPropagation() - - startTransition(() => { - if (results) { - const firstItem = results[0].children[0] - onAction(firstItem.id) - if (firstItem.url) { - router.push(firstItem.url) - } - } else if (latest) { - const firstItem = latest[0].children[0] - onAction(firstItem.id) - if (firstItem.url) { - router.push(firstItem.url) - } - } - }) }} >
@@ -145,12 +110,19 @@ export function ClientInline({ aria-live="polite" > {showResults ? ( - + ) : null} {showHistory ? ( - ) : null}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx index f58767aa1..adadf89a8 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientModal/index.tsx @@ -1,8 +1,7 @@ "use client" import { cx } from "class-variance-authority" -import { useRouter } from "next/navigation" -import { memo, useMemo, useTransition } from "react" +import { memo, useTransition } from "react" import { Autocomplete, Button as ButtonRAC, @@ -20,44 +19,26 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import { Typography } from "@scandic-hotels/design-system/Typography" -import { ResultHistory } from "../Results/ResultHistory" -import { ResultMatches } from "../Results/ResultMatches" +import { Results } from "../Results" import styles from "./clientModal.module.css" import type { ClientProps } from "@/types/components/destinationOverviewPage/jumpTo/client" -const ResultMatchesMemo = memo(ResultMatches) -const ResultHistoryMemo = memo(ResultHistory) +const ResultsMemo = memo(Results) export function ClientModal({ results, latest, setFilterString, onAction, - onClearHistory, }: ClientProps) { - const router = useRouter() const intl = useIntl() const [isPending, startTransition] = useTransition() const showResults = !!results const showHistory = !results || results.length === 0 - const latestResults = useMemo(() => { - return latest.concat({ - id: "actions", // The string "Actions" converts into a divider below - name: "Actions", - children: [ - { - id: "clearHistory", - type: "clearHistory", - displayName: intl.formatMessage({ id: "Clear searches" }), - }, - ], - }) - }, [intl, latest]) - return ( @@ -106,22 +87,6 @@ export function ClientModal({ onSubmit={(evt) => { evt.preventDefault() evt.stopPropagation() - - startTransition(() => { - if (results) { - const firstItem = results[0].children[0] - onAction(firstItem.id) - if (firstItem.url) { - router.push(firstItem.url) - } - } else if (latest) { - const firstItem = latest[0].children[0] - onAction(firstItem.id) - if (firstItem.url) { - router.push(firstItem.url) - } - } - }) }} > @@ -166,15 +131,19 @@ export function ClientModal({ aria-live="polite" > {showResults ? ( - ) : null} {showHistory ? ( - ) : null}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultMatches.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultMatches.tsx deleted file mode 100644 index c6a821c79..000000000 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultMatches.tsx +++ /dev/null @@ -1,79 +0,0 @@ -"use client" - -import { - Collection, - Header, - Menu, - MenuItem, - MenuSection, - Text, -} 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 { ResultMatchesProps } from "@/types/components/destinationOverviewPage/jumpTo/results" - -export function ResultMatches({ results, onAction }: ResultMatchesProps) { - const intl = useIntl() - - return ( - onAction(key.toString())} - renderEmptyState={() => { - return ( -
- -
- {intl.formatMessage({ id: "No results" })} -
-
- - - {intl.formatMessage({ - id: "We couldn't find a matching location for your search.", - })} - - -
- ) - }} - > - {(section) => ( - - -
{section.name}
-
- - {(item) => ( - - - - {item.displayName} - - - {item.description ? ( - - - {item.description} - - - ) : null} - - )} - -
- )} -
- ) -} diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultSkeleton.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx similarity index 98% rename from apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultSkeleton.tsx rename to apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx index 16e24ab4b..1f5077f89 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultSkeleton.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx @@ -8,7 +8,7 @@ import SkeletonShimmer from "@/components/SkeletonShimmer" import styles from "./results.module.css" -export function ResultSkeleton() { +export function ResultsSkeleton() { const intl = useIntl() return ( diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultHistory.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx similarity index 73% rename from apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultHistory.tsx rename to apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx index a9c09bd09..dc8c0f1e6 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultHistory.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx @@ -10,22 +10,24 @@ import { } from "react-aria-components" import { useIntl } from "react-intl" -import { Button } from "@scandic-hotels/design-system/Button" import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./results.module.css" -import type { ResultHistoryProps } from "@/types/components/destinationOverviewPage/jumpTo/results" +import type { ResultsProps } from "@/types/components/destinationOverviewPage/jumpTo/results" -export function ResultHistory({ results, onClearHistory }: ResultHistoryProps) { +export function Results({ + "aria-label": ariaLabel, + results, + onAction, +}: ResultsProps) { const intl = useIntl() return ( { @@ -45,19 +47,18 @@ export function ResultHistory({ results, onClearHistory }: ResultHistoryProps) { className={styles.item} textValue={item.displayName} > - + {item.id === "clearHistory" ? ( + <> + + + + {intl.formatMessage({ + id: "Clear searches", + })} + + + + ) : null} )} diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css index fc9ab6157..885e938e8 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css @@ -51,11 +51,6 @@ } .actionsSection .item { - padding-top: 0; - padding-bottom: 0; -} - -.clearHistoryButton { display: flex; flex-direction: row; gap: var(--Space-x05); diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/index.tsx index 583cb7c35..c17914cab 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/index.tsx @@ -1,6 +1,7 @@ "use client" import { useCallback, useMemo, useState } from "react" +import { useIntl } from "react-intl" import { useIsMounted, useMediaQuery } from "usehooks-ts" import { isDefined } from "@/server/utils" @@ -24,6 +25,7 @@ export function JumpToClient({ onAction, onClearHistory, }: JumpToProps) { + const intl = useIntl() const isMounted = useIsMounted() const displayInModal = useMediaQuery("(max-width: 767px)") @@ -143,12 +145,23 @@ export function JumpToClient({ { id: "latestSearches", name: "Latest searches", - children, + children: children, + }, + { + id: "actions", // The string "Actions" converts into a divider + name: "Actions", + children: [ + { + id: "clearHistory", + type: "clearHistory", + displayName: intl.formatMessage({ id: "Clear searches" }), + }, + ], }, ] } return [] - }, [data, history]) + }, [data, history, intl]) const results = useMemo(() => { if (filterString) { @@ -163,8 +176,15 @@ export function JumpToClient({ results, latest, setFilterString, - onAction, - onClearHistory, + onAction: (key) => { + switch (key) { + case "clearHistory": + onClearHistory() + break + default: + onAction(key) + } + }, } }, [results, latest, setFilterString, onAction, onClearHistory]) diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Resolver/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Resolver/index.tsx index 8a74d16a1..72d450afc 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Resolver/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Resolver/index.tsx @@ -39,7 +39,6 @@ export function JumpToResolver({ dataPromise }: JumpToResolverProps) { } }} onClearHistory={() => { - debugger clearHistory() }} /> diff --git a/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/client.ts b/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/client.ts index 2b29681f1..fdfc6be78 100644 --- a/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/client.ts +++ b/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/client.ts @@ -5,5 +5,4 @@ export type ClientProps = { latest: NonNullable setFilterString: (filter: string | null) => void onAction: JumpToProps["onAction"] - onClearHistory: () => void } diff --git a/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/index.ts b/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/index.ts index 332e2fe24..a43d49706 100644 --- a/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/index.ts +++ b/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/index.ts @@ -1,5 +1,7 @@ +import type { Key } from "react-aria-components" + export type JumpToDataItem = { - id: string + id: Key displayName: string type: "hotels" | "cities" description: string @@ -15,7 +17,7 @@ export type JumpToHistory = { type: JumpToDataItem["type"] }[] -export type JumpToProps = { +export type JumpToProps = { data: T history: JumpToHistory onAction: (id: T[number]["id"]) => void @@ -23,7 +25,7 @@ export type JumpToProps = { } export type LocationMatch = { - id: string + id: Key displayName: string type: string description?: string @@ -35,7 +37,7 @@ export type ScoringMatch = LocationMatch & { } export type LocationMatchResult = { - id: string + id: Key name: string children: LocationMatch[] } diff --git a/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/results.ts b/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/results.ts index beb3fb992..68ad462ec 100644 --- a/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/results.ts +++ b/apps/scandic-web/types/components/destinationOverviewPage/jumpTo/results.ts @@ -1,9 +1,6 @@ import type { ClientProps } from "./client" -export type ResultHistoryProps = Pick & { - results: ClientProps["latest"] -} - -export type ResultMatchesProps = Pick & { +export type ResultsProps = Pick & { results: NonNullable + "aria-label": string }