Merged in feat/sw-620-sort-hotels (pull request #868)

Feat/sw-620 sort hotels

* SW-620 Add radio button to select box

* feat(SW-620): Implement sorting on select hotel

* Fix casing

* Shallow copy hoteldata

* Use translations

* Remove unnecessary style

* Import order

* Type


Approved-by: Pontus Dreij

components/HotelReservation/SelectHotel/HotelSorter/index.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import { useCallback } from "react"
+import { useIntl } from "react-intl"
+
+import Select from "@/components/TempDesignSystem/Select"
+
+import {
+  type SortItem,
+  SortOrder,
+} from "@/types/components/hotelReservation/selectHotel/hotelSorter"
+
+const sortItems: SortItem[] = [
+  { label: "Distance", value: SortOrder.Distance },
+  { label: "Name", value: SortOrder.Name },
+  { label: "Price", value: SortOrder.Price },
+  { label: "TripAdvisor rating", value: SortOrder.TripAdvisorRating },
+]
+
+export const DEFAULT_SORT = SortOrder.Distance
+
+export default function HotelSorter() {
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+  const i18n = useIntl()
+
+  const onSelect = useCallback(
+    (value: string | number) => {
+      const newSort = value.toString()
+      if (newSort === searchParams.get("sort")) {
+        return
+      }
+
+      const newSearchParams = new URLSearchParams(searchParams)
+      newSearchParams.set("sort", newSort)
+
+      window.history.replaceState(
+        null,
+        "",
+        `${pathname}?${newSearchParams.toString()}`
+      )
+    },
+    [pathname, searchParams]
+  )
+
+  return (
+    <Select
+      items={sortItems}
+      label={i18n.formatMessage({ id: "Sort by" })}
+      name="sort"
+      showRadioButton
+      onSelect={onSelect}
+    />
+  )
+}