Merged in feat/SW-1451-country-page-sorting (pull request #1426)
Feat/SW-1451 country page filtering and sorting * feat(SW-1451): implemented sorting and filtering on country pages * feat(SW-1451): Renamed hotel-data to destination-data because of its multi-purpose use * feat(SW-1451): Now filtering after change of url instead of inside the store after submit Approved-by: Fredrik Thorsson
This commit is contained in:
Erik Tiekstra
162
apps/scandic-web/stores/destination-data/helper.ts
Normal file
162
apps/scandic-web/stores/destination-data/helper.ts
Normal file
@@ -0,0 +1,162 @@
|
||||
import type {
|
||||
CategorizedFilters,
|
||||
Filter,
|
||||
SortItem,
|
||||
} from "@/types/components/destinationFilterAndSort"
|
||||
import { SortOption } from "@/types/enums/destinationFilterAndSort"
|
||||
import type { HotelDataWithUrl } from "@/types/hotel"
|
||||
import type { DestinationCityListItem } from "@/types/trpc/routers/contentstack/destinationCityPage"
|
||||
|
||||
const HOTEL_SORTING_STRATEGIES: Partial<
|
||||
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
|
||||
},
|
||||
}
|
||||
|
||||
const CITY_SORTING_STRATEGIES: Partial<
|
||||
Record<
|
||||
SortOption,
|
||||
(a: DestinationCityListItem, b: DestinationCityListItem) => number
|
||||
>
|
||||
> = {
|
||||
[SortOption.Name]: function (a, b) {
|
||||
return a.cityName.localeCompare(b.cityName)
|
||||
},
|
||||
[SortOption.Recommended]: function (a, b) {
|
||||
if (a.sort_order === null && b.sort_order === null) {
|
||||
return a.cityName.localeCompare(b.cityName)
|
||||
}
|
||||
if (a.sort_order === null) {
|
||||
return 1
|
||||
}
|
||||
if (b.sort_order === null) {
|
||||
return -1
|
||||
}
|
||||
return b.sort_order - a.sort_order
|
||||
},
|
||||
}
|
||||
|
||||
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 getFilteredCities(
|
||||
filteredHotels: HotelDataWithUrl[],
|
||||
cities: DestinationCityListItem[]
|
||||
) {
|
||||
const filteredCityIdentifiers = filteredHotels.map(
|
||||
(hotel) => hotel.cities[0].cityIdentifier
|
||||
)
|
||||
|
||||
return cities.filter((city) =>
|
||||
filteredCityIdentifiers.includes(city.destination_settings.city)
|
||||
)
|
||||
}
|
||||
|
||||
export function getSortedCities(
|
||||
cities: DestinationCityListItem[],
|
||||
sortOption: SortOption
|
||||
) {
|
||||
const sortFn = CITY_SORTING_STRATEGIES[sortOption]
|
||||
return sortFn ? cities.sort(sortFn) : cities
|
||||
}
|
||||
|
||||
export function getSortedHotels(
|
||||
hotels: HotelDataWithUrl[],
|
||||
sortOption: SortOption
|
||||
) {
|
||||
const sortFn = HOTEL_SORTING_STRATEGIES[sortOption]
|
||||
return sortFn ? hotels.sort(sortFn) : hotels
|
||||
}
|
||||
|
||||
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("/")
|
||||
}
|
||||
150
apps/scandic-web/stores/destination-data/index.ts
Normal file
150
apps/scandic-web/stores/destination-data/index.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
import { produce } from "immer"
|
||||
import { useContext } from "react"
|
||||
import { create, useStore } from "zustand"
|
||||
|
||||
import { DestinationDataContext } from "@/contexts/DestinationData"
|
||||
|
||||
import {
|
||||
getBasePathNameWithoutFilters,
|
||||
getFilteredCities,
|
||||
getFilteredHotels,
|
||||
getFiltersFromHotels,
|
||||
getSortedCities,
|
||||
getSortedHotels,
|
||||
isValidSortOption,
|
||||
} from "./helper"
|
||||
|
||||
import type { Filter } from "@/types/components/destinationFilterAndSort"
|
||||
import type {
|
||||
DestinationDataState,
|
||||
InitialState,
|
||||
} from "@/types/stores/destination-data"
|
||||
|
||||
export function createDestinationDataStore({
|
||||
allCities,
|
||||
allHotels,
|
||||
pathname,
|
||||
sortItems,
|
||||
}: InitialState) {
|
||||
const defaultSort =
|
||||
sortItems.find((s) => s.isDefault)?.value ?? sortItems[0].value
|
||||
|
||||
const allFilters = getFiltersFromHotels(allHotels)
|
||||
const allFilterSlugs = Object.values(allFilters).flatMap((filter: Filter[]) =>
|
||||
filter.map((f) => f.slug)
|
||||
)
|
||||
|
||||
return create<DestinationDataState>((set) => ({
|
||||
actions: {
|
||||
updateActiveFiltersAndSort(filters, sort) {
|
||||
return set(
|
||||
produce((state: DestinationDataState) => {
|
||||
const newSort =
|
||||
sort && isValidSortOption(sort, state.sortItems)
|
||||
? sort
|
||||
: state.defaultSort
|
||||
const filteredHotels = getFilteredHotels(state.allHotels, filters)
|
||||
const sortedHotels = getSortedHotels(filteredHotels, newSort)
|
||||
const filteredCities = state.allHotels.length
|
||||
? getFilteredCities(filteredHotels, state.allCities)
|
||||
: []
|
||||
const sortedCities = getSortedCities(filteredCities, newSort)
|
||||
|
||||
state.activeSort = newSort
|
||||
state.activeFilters = filters
|
||||
state.activeHotels = sortedHotels
|
||||
state.activeCities = sortedCities
|
||||
|
||||
state.pendingFilters = filters
|
||||
state.pendingSort = newSort
|
||||
state.pendingHotelCount = filteredHotels.length
|
||||
state.pendingCityCount = filteredCities.length
|
||||
state.isLoading = false
|
||||
})
|
||||
)
|
||||
},
|
||||
setIsLoading(isLoading) {
|
||||
return set(
|
||||
produce((state: DestinationDataState) => {
|
||||
state.isLoading = isLoading
|
||||
})
|
||||
)
|
||||
},
|
||||
setPendingSort(sort) {
|
||||
return set(
|
||||
produce((state: DestinationDataState) => {
|
||||
state.pendingSort = sort
|
||||
})
|
||||
)
|
||||
},
|
||||
togglePendingFilter(filter) {
|
||||
return set(
|
||||
produce((state: DestinationDataState) => {
|
||||
const isActive = state.pendingFilters.includes(filter)
|
||||
const filters = isActive
|
||||
? state.pendingFilters.filter((f) => f !== filter)
|
||||
: [...state.pendingFilters, filter]
|
||||
const pendingHotels = getFilteredHotels(state.allHotels, filters)
|
||||
const pendingCities = state.allHotels.length
|
||||
? getFilteredCities(pendingHotels, state.allCities)
|
||||
: []
|
||||
|
||||
state.pendingFilters = filters
|
||||
state.pendingHotelCount = pendingHotels.length
|
||||
state.pendingCityCount = pendingCities.length
|
||||
})
|
||||
)
|
||||
},
|
||||
clearPendingFilters() {
|
||||
return set(
|
||||
produce((state: DestinationDataState) => {
|
||||
state.pendingFilters = []
|
||||
state.pendingHotelCount = state.allHotels.length
|
||||
state.pendingCityCount = state.allCities.length
|
||||
})
|
||||
)
|
||||
},
|
||||
resetPendingValues() {
|
||||
return set(
|
||||
produce((state: DestinationDataState) => {
|
||||
state.pendingFilters = state.activeFilters
|
||||
state.pendingSort = state.activeSort
|
||||
state.pendingHotelCount = state.activeHotels.length
|
||||
state.pendingCityCount = state.activeCities.length
|
||||
})
|
||||
)
|
||||
},
|
||||
},
|
||||
allHotels,
|
||||
activeHotels: allHotels,
|
||||
pendingHotelCount: allHotels.length,
|
||||
allCities,
|
||||
activeCities: allCities,
|
||||
pendingCityCount: allCities.length,
|
||||
activeSort: defaultSort,
|
||||
pendingSort: defaultSort,
|
||||
defaultSort,
|
||||
activeFilters: [],
|
||||
pendingFilters: [],
|
||||
allFilters,
|
||||
allFilterSlugs,
|
||||
basePathnameWithoutFilters: getBasePathNameWithoutFilters(
|
||||
pathname,
|
||||
allFilterSlugs
|
||||
),
|
||||
sortItems,
|
||||
isLoading: true,
|
||||
}))
|
||||
}
|
||||
|
||||
export function useDestinationDataStore<T>(
|
||||
selector: (store: DestinationDataState) => T
|
||||
) {
|
||||
const store = useContext(DestinationDataContext)
|
||||
|
||||
if (!store) {
|
||||
throw new Error("useHotelDataStore must be used within HotelDataProvider")
|
||||
}
|
||||
|
||||
return useStore(store, selector)
|
||||
}
|
||||
Reference in New Issue
Block a user