From ba20ce2696156524b0900c4db717ee4026e857b8 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 28 Jan 2025 13:49:34 +0100
Subject: [PATCH] feat(SW-718) refactor filter submit

---
 .../SelectRate/RoomTypeFilter/index.tsx       | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/components/HotelReservation/SelectRate/RoomTypeFilter/index.tsx b/components/HotelReservation/SelectRate/RoomTypeFilter/index.tsx
index ec63e28ed..d6c36b822 100644
--- a/components/HotelReservation/SelectRate/RoomTypeFilter/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomTypeFilter/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
@@ -30,15 +30,7 @@ export default function RoomFilter({
 }: RoomFilterProps) {
   const isTabletAndUp = useMediaQuery("(min-width: 768px)")
   const [isAboveMobile, setIsAboveMobile] = useState(false)
-  const onFilterRef = useRef(onFilter)
-
-  useEffect(() => {
-    onFilterRef.current = onFilter
-  }, [onFilter])
-
-  useEffect(() => {
-    onFilterRef.current(initialFilterValues)
-  }, [initialFilterValues])
+  const [isInitialized, setIsInitialized] = useState(false)
 
   const intl = useIntl()
   const methods = useForm<FilterValues>({
@@ -48,7 +40,7 @@ export default function RoomFilter({
     resolver: zodResolver(z.object({})),
   })
 
-  const { watch, getValues, handleSubmit } = methods
+  const { watch, getValues } = methods
   const petFriendly = watch(RoomPackageCodeEnum.PET_ROOM)
   const allergyFriendly = watch(RoomPackageCodeEnum.ALLERGY_ROOM)
 
@@ -57,19 +49,25 @@ export default function RoomFilter({
   const tooltipText = intl.formatMessage({
     id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
   })
-  const submitFilter = useCallback(
-    (data: FilterValues) => {
-      onFilter(data)
-    },
-    [onFilter]
-  )
 
   useEffect(() => {
-    const subscription = watch((_, { name }) => {
-      if (name) submitFilter(getValues())
+    if (!initialFilterValues || isInitialized) return
+
+    onFilter(initialFilterValues)
+    setIsInitialized(true)
+  }, [initialFilterValues, onFilter, isInitialized])
+
+  // Watch for filter changes
+  useEffect(() => {
+    const subscription = watch((value, { name }) => {
+      if (!name || !isInitialized) return
+
+      const currentValues = getValues()
+      onFilter(currentValues)
     })
+
     return () => subscription.unsubscribe()
-  }, [watch, submitFilter, getValues])
+  }, [watch, getValues, onFilter, isInitialized])
 
   useEffect(() => {
     setIsAboveMobile(isTabletAndUp)
@@ -127,7 +125,7 @@ export default function RoomFilter({
         </Caption>
       </div>
       <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(submitFilter)}>
+        <form>
           <div className={styles.roomsFilter}>
             {filterOptions.map((option) => {
               const { code, description, itemCode } = option