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
@@ -2,13 +2,13 @@ import type {
|
||||
CategorizedFilters,
|
||||
Filter,
|
||||
SortItem,
|
||||
} from "@/types/components/hotelFilterAndSort"
|
||||
import { SortOption } from "@/types/enums/hotelFilterAndSort"
|
||||
} 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"
|
||||
|
||||
export const SORTING_STRATAGIES: Record<
|
||||
SortOption,
|
||||
(a: HotelDataWithUrl, b: HotelDataWithUrl) => number
|
||||
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)
|
||||
@@ -24,6 +24,29 @@ export const SORTING_STRATAGIES: Record<
|
||||
},
|
||||
}
|
||||
|
||||
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[]
|
||||
@@ -38,14 +61,35 @@ export function getFilteredHotels(
|
||||
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
|
||||
) {
|
||||
return hotels.sort(SORTING_STRATAGIES[sortOption])
|
||||
const sortFn = HOTEL_SORTING_STRATEGIES[sortOption]
|
||||
return sortFn ? hotels.sort(sortFn) : hotels
|
||||
}
|
||||
|
||||
export const DEFAULT_SORT = SortOption.Distance
|
||||
export function isValidSortOption(
|
||||
value: string,
|
||||
sortItems: SortItem[]
|
||||
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)
|
||||
}
|
||||
@@ -1,159 +0,0 @@
|
||||
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