feat(SW-718) created useRoomFilteringStore

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { useCallback, useEffect, useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import { useIntl } from "react-intl"
 
 import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"
+import { useRoomFilteringStore } from "@/stores/select-rate/room-filtering"
 
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { useRoomFiltering } from "@/hooks/selectRate/useRoomFiltering"
 import { trackLowestRoomPrice } from "@/utils/tracking"
 import { convertObjToSearchParams, convertSearchParamsToObj } from "@/utils/url"
 
@@ -45,6 +45,13 @@ export default function Rooms({
   const { selectedRates, rateSummary, calculateRateSummary, initializeRates } =
     useRateSelectionStore()
 
+  const {
+    selectedPackagesByRoom,
+    setVisibleRooms,
+    setRoomsAvailability,
+    getFilteredRooms,
+  } = useRoomFilteringStore()
+
   const bookingWidgetSearchData = useMemo(
     () =>
       convertSearchParamsToObj<SelectRateSearchParams>(
@@ -109,8 +116,10 @@ export default function Rooms({
     [availablePackages, intl]
   )
 
-  const { selectedPackagesByRoom, getRooms, handleFilter, getFilteredRooms } =
-    useRoomFiltering({ roomsAvailability })
+  useEffect(() => {
+    setRoomsAvailability(roomsAvailability)
+    setVisibleRooms()
+  }, [roomsAvailability, setRoomsAvailability, setVisibleRooms])
 
   useEffect(() => {
     if (
@@ -183,14 +192,6 @@ export default function Rooms({
     router.push(`select-bed?${queryParams}`)
   }
 
-  const handleFilterForRoom = useCallback(
-    (index: number) =>
-      (filter: Record<RoomPackageCodeEnum, boolean | undefined>) => {
-        handleFilter(filter, index)
-      },
-    [handleFilter]
-  )
-
   useEffect(() => {
     setTimeout(() => {
       const SCROLL_OFFSET = 100
@@ -252,12 +253,10 @@ export default function Rooms({
                 </div>
                 <div className={styles.roomSelectionPanel}>
                   <RoomSelectionPanel
-                    rooms={getRooms(index)}
                     roomCategories={roomCategories}
                     availablePackages={availablePackages}
                     selectedPackages={selectedPackagesByRoom[index]}
                     hotelType={hotelType}
-                    handleFilter={handleFilterForRoom(index)}
                     defaultPackages={defaultPackages}
                     roomListIndex={index}
                   />
@@ -268,12 +267,10 @@ export default function Rooms({
         })
       ) : (
         <RoomSelectionPanel
-          rooms={getRooms(0)}
           roomCategories={roomCategories}
           availablePackages={availablePackages}
           selectedPackages={selectedPackagesByRoom[0]}
           hotelType={hotelType}
-          handleFilter={handleFilterForRoom(0)}
           defaultPackages={defaultPackages}
           roomListIndex={0}
         />