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
This commit is contained in:
Erik Tiekstra
118
stores/hotel-data/helper.ts
Normal file
118
stores/hotel-data/helper.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
import type {
|
||||
CategorizedFilters,
|
||||
Filter,
|
||||
SortItem,
|
||||
} from "@/types/components/hotelFilterAndSort"
|
||||
import { SortOption } from "@/types/enums/hotelFilterAndSort"
|
||||
import type { HotelDataWithUrl } from "@/types/hotel"
|
||||
|
||||
export const SORTING_STRATAGIES: Record<
|
||||
SortOption,
|
||||
(a: HotelDataWithUrl, b: HotelDataWithUrl) => number
|
||||
> = {
|
||||
[SortOption.Name]: function (a, b) {
|
||||
return a.hotel.name.localeCompare(b.hotel.name)
|
||||
},
|
||||
[SortOption.TripAdvisorRating]: function (a, b) {
|
||||
return (
|
||||
(b.hotel.ratings?.tripAdvisor.rating ?? 0) -
|
||||
(a.hotel.ratings?.tripAdvisor.rating ?? 0)
|
||||
)
|
||||
},
|
||||
[SortOption.Distance]: function (a, b) {
|
||||
return a.hotel.location.distanceToCentre - b.hotel.location.distanceToCentre
|
||||
},
|
||||
}
|
||||
|
||||
export function getFilteredHotels(
|
||||
hotels: HotelDataWithUrl[],
|
||||
filters: string[]
|
||||
) {
|
||||
if (filters.length) {
|
||||
return hotels.filter(({ hotel }) =>
|
||||
filters.every((filter) =>
|
||||
hotel.detailedFacilities.some((facility) => facility.slug === filter)
|
||||
)
|
||||
)
|
||||
}
|
||||
return hotels
|
||||
}
|
||||
|
||||
export function getSortedHotels(
|
||||
hotels: HotelDataWithUrl[],
|
||||
sortOption: SortOption
|
||||
) {
|
||||
return hotels.sort(SORTING_STRATAGIES[sortOption])
|
||||
}
|
||||
|
||||
export const DEFAULT_SORT = SortOption.Distance
|
||||
export function isValidSortOption(
|
||||
value: string,
|
||||
sortItems: SortItem[]
|
||||
): value is SortOption {
|
||||
return sortItems.map((item) => item.value).includes(value as SortOption)
|
||||
}
|
||||
|
||||
const HOTEL_SURROUNDINGS_FILTER_TYPE_NAMES = [
|
||||
"Hotel surroundings",
|
||||
"Hotel omgivelser",
|
||||
"Hotelumgebung",
|
||||
"Hotellia lähellä",
|
||||
"Hotellomgivelser",
|
||||
"Omgivningar",
|
||||
]
|
||||
|
||||
const HOTEL_FACILITIES_FILTER_TYPE_NAMES = [
|
||||
"Hotel facilities",
|
||||
"Hotellfaciliteter",
|
||||
"Hotelfaciliteter",
|
||||
"Hotel faciliteter",
|
||||
"Hotel-Infos",
|
||||
"Hotellin palvelut",
|
||||
]
|
||||
|
||||
export function getFiltersFromHotels(
|
||||
hotels: HotelDataWithUrl[]
|
||||
): CategorizedFilters {
|
||||
if (hotels.length === 0) {
|
||||
return { facilityFilters: [], surroundingsFilters: [] }
|
||||
}
|
||||
|
||||
const filters = hotels.flatMap(({ hotel }) => hotel.detailedFacilities)
|
||||
const sortedFilters = filters.sort((a, b) => b.sortOrder - a.sortOrder)
|
||||
const uniqueFilterNames = [
|
||||
...new Set(sortedFilters.map((filter) => filter.name)),
|
||||
]
|
||||
const filterList = uniqueFilterNames
|
||||
.map((filterName) => {
|
||||
const filter = filters.find((filter) => filter.name === filterName)
|
||||
return filter
|
||||
? {
|
||||
name: filter.name,
|
||||
slug: filter.slug,
|
||||
filterType: filter.filter,
|
||||
}
|
||||
: null
|
||||
})
|
||||
.filter((filter): filter is Filter => !!filter)
|
||||
|
||||
return {
|
||||
facilityFilters: filterList.filter((filter) =>
|
||||
HOTEL_FACILITIES_FILTER_TYPE_NAMES.includes(filter.filterType)
|
||||
),
|
||||
surroundingsFilters: filterList.filter((filter) =>
|
||||
HOTEL_SURROUNDINGS_FILTER_TYPE_NAMES.includes(filter.filterType)
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
export function getBasePathNameWithoutFilters(
|
||||
pathname: string,
|
||||
filterSlugs: string[]
|
||||
) {
|
||||
const pathSegments = pathname.split("/")
|
||||
const filteredSegments = pathSegments.filter(
|
||||
(segment) => !filterSlugs.includes(segment)
|
||||
)
|
||||
return filteredSegments.join("/")
|
||||
}
|
||||
159
stores/hotel-data/index.ts
Normal file
159
stores/hotel-data/index.ts
Normal file
@@ -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)
|
||||
}
|
||||
Reference in New Issue
Block a user