feat(SW-718) created useRoomFilteringStore

components/HotelReservation/SelectRate/RoomSelectionPanel/index.tsx

@@ -1,6 +1,8 @@
 import { useSearchParams } from "next/navigation"
 import { useMemo } from "react"
 
+import { useRoomFilteringStore } from "@/stores/select-rate/room-filtering"
+
 import RoomTypeFilter from "../RoomTypeFilter"
 import RoomTypeList from "../RoomTypeList"
 
@@ -8,16 +10,17 @@ import type { FilterValues } from "@/types/components/hotelReservation/selectRat
 import type { RoomSelectionPanelProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
 
 export function RoomSelectionPanel({
-  rooms,
   roomCategories,
   availablePackages,
   selectedPackages,
   hotelType,
-  handleFilter,
   defaultPackages,
   roomListIndex,
 }: RoomSelectionPanelProps) {
   const searchParams = useSearchParams()
+  const { getRooms } = useRoomFilteringStore()
+
+  const rooms = getRooms(roomListIndex)
 
   const initialFilterValues = useMemo(() => {
     const packagesFromSearchParams =
@@ -32,19 +35,21 @@ export function RoomSelectionPanel({
   return (
     <>
       <RoomTypeFilter
-        numberOfRooms={rooms.roomConfigurations.length}
-        onFilter={handleFilter}
+        numberOfRooms={rooms?.roomConfigurations.length ?? 0}
         filterOptions={defaultPackages}
         initialFilterValues={initialFilterValues}
-      />
-      <RoomTypeList
-        roomsAvailability={rooms}
-        roomCategories={roomCategories}
-        availablePackages={availablePackages}
-        selectedPackages={selectedPackages}
-        hotelType={hotelType}
         roomListIndex={roomListIndex}
       />
+      {rooms && (
+        <RoomTypeList
+          roomsAvailability={rooms}
+          roomCategories={roomCategories}
+          availablePackages={availablePackages}
+          selectedPackages={selectedPackages}
+          hotelType={hotelType}
+          roomListIndex={roomListIndex}
+        />
+      )}
     </>
   )
 }