feat(SW-1111) Only sort on button click

components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx

@@ -1,5 +1,10 @@
 "use client"
 
+import {
+  usePathname,
+  useSearchParams,
+} from "next/dist/client/components/navigation"
+import { useCallback, useState } from "react"
 import {
   Dialog as AriaDialog,
   DialogTrigger,
@@ -13,25 +18,67 @@ import { useHotelFilterStore } from "@/stores/hotel-filters"
 import { CloseLargeIcon, FilterIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
+import Select from "@/components/TempDesignSystem/Select"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
 
 import HotelFilter from "../HotelFilter"
-import HotelSorter from "../HotelSorter"
+import { DEFAULT_SORT } from "../HotelSorter"
 
 import styles from "./filterAndSortModal.module.css"
 
 import type { FilterAndSortModalProps } from "@/types/components/hotelReservation/selectHotel/filterAndSortModal"
+import {
+  type SortItem,
+  SortOrder,
+} from "@/types/components/hotelReservation/selectHotel/hotelSorter"
 
 export default function FilterAndSortModal({
   filters,
 }: FilterAndSortModalProps) {
   const intl = useIntl()
   useInitializeFiltersFromUrl()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
   const resultCount = useHotelFilterStore((state) => state.resultCount)
   const setFilters = useHotelFilterStore((state) => state.setFilters)
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
+  const [sort, setSort] = useState(searchParams.get("sort") ?? DEFAULT_SORT)
+
+  const sortItems: SortItem[] = [
+    {
+      label: intl.formatMessage({ id: "Distance to city centre" }),
+      value: SortOrder.Distance,
+    },
+    { label: intl.formatMessage({ id: "Name" }), value: SortOrder.Name },
+    { label: intl.formatMessage({ id: "Price" }), value: SortOrder.Price },
+    {
+      label: intl.formatMessage({ id: "TripAdvisor rating" }),
+      value: SortOrder.TripAdvisorRating,
+    },
+  ]
+
+  const handleSortSelect = useCallback((value: string | number) => {
+    setSort(value.toString())
+  }, [])
+
+  const handleApplyFiltersAndSorting = useCallback(
+    (close: () => void) => {
+      if (sort === searchParams.get("sort")) return
+
+      const newSearchParams = new URLSearchParams(searchParams)
+      newSearchParams.set("sort", sort)
+
+      window.history.replaceState(
+        null,
+        "",
+        `${pathname}?${newSearchParams.toString()}`
+      )
+      close()
+    },
+    [pathname, searchParams, sort]
+  )
 
   return (
     <>
@@ -65,7 +112,16 @@ export default function FilterAndSortModal({
                     </Subtitle>
                   </header>
                   <div className={styles.sorter}>
-                    <HotelSorter />
+                    <Select
+                      items={sortItems}
+                      defaultSelectedKey={
+                        searchParams.get("sort") ?? DEFAULT_SORT
+                      }
+                      label={intl.formatMessage({ id: "Sort by" })}
+                      name="sort"
+                      showRadioButton
+                      onSelect={handleSortSelect}
+                    />
                   </div>
                   <div className={styles.divider}>
                     <Divider color="subtle" />
@@ -78,7 +134,7 @@ export default function FilterAndSortModal({
                       intent="primary"
                       size="medium"
                       theme="base"
-                      onClick={close}
+                      onClick={() => handleApplyFiltersAndSorting(close)}
                     >
                       {intl.formatMessage(
                         { id: "See results" },