Merged in feat/SW-342-filtering-and-sorting-mobile (pull request #919)

Feat/SW-342 filtering and sorting mobile

* feat(SW-342): add sort and filter on mobile

* Use zustand for state management

* Add count and translations

* Clear filters

* Small fixes

* Fixes


Approved-by: Pontus Dreij

components/HotelReservation/HotelCardListing/index.tsx

@@ -2,7 +2,7 @@
 import { useSearchParams } from "next/navigation"
 import { useMemo } from "react"
 
-import Title from "@/components/TempDesignSystem/Text/Title"
+import { useHotelFilterStore } from "@/stores/hotel-filters"
 
 import HotelCard from "../HotelCard"
 import { DEFAULT_SORT } from "../SelectHotel/HotelSorter"
@@ -22,6 +22,8 @@ export default function HotelCardListing({
   onHotelCardHover,
 }: HotelCardListingProps) {
   const searchParams = useSearchParams()
+  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
+  const setResultCount = useHotelFilterStore((state) => state.setResultCount)
 
   const sortBy = useMemo(
     () => searchParams.get("sort") ?? DEFAULT_SORT,
@@ -57,17 +59,22 @@ export default function HotelCardListing({
   }, [hotelData, sortBy])
 
   const hotels = useMemo(() => {
-    const appliedFilters = searchParams.get("filters")?.split(",")
-    if (!appliedFilters || appliedFilters.length === 0) return sortedHotels
+    if (activeFilters.length === 0) {
+      setResultCount(sortedHotels.length)
+      return sortedHotels
+    }
 
-    return sortedHotels.filter((hotel) =>
-      appliedFilters.every((appliedFilterId) =>
+    const filteredHotels = sortedHotels.filter((hotel) =>
+      activeFilters.every((appliedFilterId) =>
         hotel.hotelData.detailedFacilities.some(
           (facility) => facility.id.toString() === appliedFilterId
         )
       )
     )
-  }, [searchParams, sortedHotels])
+
+    setResultCount(filteredHotels.length)
+    return filteredHotels
+  }, [activeFilters, sortedHotels, setResultCount])
 
   return (
     <section className={styles.hotelCards}>