Merged in feat/SW-1452-city-page-filter-2 (pull request #1392)

feat(SW-1452): Added filtering and sorting to destination city pages

* feat(SW-1452): Added filtering and sorting to destination city pages

* feat(SW-1452): Added temporary component for country pages to avoid Context issues


Approved-by: Matilda Landström

stores/hotel-data/index.ts

@@ -0,0 +1,159 @@
+import { produce } from "immer"
+import { useContext } from "react"
+import { create, useStore } from "zustand"
+
+import { HotelDataContext } from "@/contexts/HotelData"
+
+import {
+  getBasePathNameWithoutFilters,
+  getFilteredHotels,
+  getFiltersFromHotels,
+  getSortedHotels,
+  isValidSortOption,
+} from "./helper"
+
+import type { Filter } from "@/types/components/hotelFilterAndSort"
+import { SortOption } from "@/types/enums/hotelFilterAndSort"
+import type { HotelDataState, InitialState } from "@/types/stores/hotel-data"
+
+export function createHotelDataStore({
+  allHotels,
+  searchParams,
+  pathname,
+  filterFromUrl,
+  sortItems,
+  submitCallbackFn,
+}: InitialState) {
+  const sortFromSearchParams = searchParams.get("sort")
+  const initialFilters = filterFromUrl ? [filterFromUrl] : []
+  let initialSort = SortOption.Distance
+  if (
+    sortFromSearchParams &&
+    isValidSortOption(sortFromSearchParams, sortItems)
+  ) {
+    initialSort = sortFromSearchParams
+  }
+  const initialFilteredHotels = getFilteredHotels(allHotels, initialFilters)
+  const initialActiveHotels = getSortedHotels(
+    initialFilteredHotels,
+    initialSort
+  )
+  const allFilters = getFiltersFromHotels(allHotels)
+  const allFilterSlugs = Object.values(allFilters).flatMap((filter: Filter[]) =>
+    filter.map((f) => f.slug)
+  )
+
+  return create<HotelDataState>((set) => ({
+    actions: {
+      submitFiltersAndSort() {
+        return set(
+          produce((state: HotelDataState) => {
+            const sort = state.pendingSort
+            const filters = state.pendingFilters
+            const filteredHotels = getFilteredHotels(state.allHotels, filters)
+            const sortedHotels = getSortedHotels(filteredHotels, sort)
+
+            state.activeSort = sort
+            state.activeFilters = state.pendingFilters
+            state.activeHotels = sortedHotels
+            state.pendingCount = filteredHotels.length
+
+            if (submitCallbackFn) {
+              submitCallbackFn({
+                sort,
+                filters,
+                basePath: state.basePathnameWithoutFilters,
+              })
+            }
+          })
+        )
+      },
+      setPendingSort(sort) {
+        return set(
+          produce((state: HotelDataState) => {
+            state.pendingSort = sort
+          })
+        )
+      },
+      togglePendingFilter(filter) {
+        return set(
+          produce((state: HotelDataState) => {
+            const isActive = state.pendingFilters.includes(filter)
+            const filters = isActive
+              ? state.pendingFilters.filter((f) => f !== filter)
+              : [...state.pendingFilters, filter]
+            const pendingHotels = getFilteredHotels(state.allHotels, filters)
+
+            state.pendingFilters = filters
+            state.pendingCount = pendingHotels.length
+          })
+        )
+      },
+      clearPendingFilters() {
+        return set(
+          produce((state: HotelDataState) => {
+            state.pendingFilters = []
+            state.pendingCount = state.allHotels.length
+          })
+        )
+      },
+      resetPendingValues() {
+        return set(
+          produce((state: HotelDataState) => {
+            state.pendingFilters = state.activeFilters
+            state.pendingSort = state.activeSort
+            state.pendingCount = state.activeHotels.length
+          })
+        )
+      },
+      loadInitialHashFilter(hash) {
+        return set(
+          produce((state: HotelDataState) => {
+            state.initialHashFilterLoaded = true
+
+            const filters = []
+            const filtersFromHash = hash.split("&").filter(Boolean) ?? []
+            if (filterFromUrl) {
+              filters.push(filterFromUrl, ...filtersFromHash)
+            }
+            const filteredHotels = getFilteredHotels(state.allHotels, filters)
+            const sortedHotels = getSortedHotels(
+              filteredHotels,
+              state.activeSort
+            )
+            state.activeHotels = sortedHotels
+            state.activeFilters = filters
+            state.pendingFilters = filters
+            state.pendingCount = filteredHotels.length
+          })
+        )
+      },
+    },
+    allHotels,
+    activeHotels: initialActiveHotels,
+    pendingCount: initialActiveHotels.length,
+    activeSort: initialSort,
+    pendingSort: initialSort,
+    activeFilters: initialFilters,
+    pendingFilters: initialFilters,
+    searchParams,
+    allFilters,
+    allFilterSlugs,
+    basePathnameWithoutFilters: getBasePathNameWithoutFilters(
+      pathname,
+      allFilterSlugs
+    ),
+    sortItems,
+    initialHashFilterLoaded: false,
+  }))
+}
+
+export function useHotelDataStore<T>(selector: (store: HotelDataState) => T) {
+  const store = useContext(HotelDataContext)
+
+  if (!store) {
+    throw new Error("useHotelDataStore must be used within HotelDataProvider")
+  }
+
+  return useStore(store, selector)
+}