feat/sw-251 Filter hotels on select hotel page

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -1,5 +1,8 @@
 "use client"
 
+import { usePathname, useSearchParams } from "next/navigation"
+import { useCallback, useEffect } from "react"
+import { useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import styles from "./hotelFilter.module.css"
@@ -8,26 +11,77 @@ import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHot
 
 export default function HotelFilter({ filters }: HotelFiltersProps) {
   const intl = useIntl()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
 
-  function handleOnChange() {
-    // TODO: Update URL with selected values
-  }
+  const { watch, handleSubmit, getValues, register } = useForm<
+    Record<string, boolean | undefined>
+  >({
+    defaultValues: searchParams
+      ?.get("filters")
+      ?.split(",")
+      .reduce((acc, curr) => ({ ...acc, [curr]: true }), {}),
+  })
+
+  const submitFilter = useCallback(() => {
+    const newSearchParams = new URLSearchParams(searchParams)
+    const values = Object.entries(getValues())
+      .filter(([_, value]) => !!value)
+      .map(([key, _]) => key)
+      .join(",")
+
+    if (values === "") {
+      newSearchParams.delete("filters")
+    } else {
+      newSearchParams.set("filters", values)
+    }
+
+    if (values !== searchParams.values.toString()) {
+      window.history.replaceState(
+        null,
+        "",
+        `${pathname}?${newSearchParams.toString()}`
+      )
+    }
+  }, [getValues, pathname, searchParams])
+
+  useEffect(() => {
+    const subscription = watch(() => handleSubmit(submitFilter)())
+    return () => subscription.unsubscribe()
+  }, [handleSubmit, watch, submitFilter])
 
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
-        {intl.formatMessage({ id: "Hotel facilities" })}
-        <form>
+        <form onSubmit={handleSubmit(submitFilter)}>
+          {intl.formatMessage({ id: "Hotel facilities" })}
           <ul>
-            {filters.map((data) => (
-              <li key={data.id} className={styles.filter}>
+            {filters.facilityFilters.map((filter) => (
+              <li key={`li-${filter.id}`} className={styles.filter}>
                 <input
-                  id={`${data.id}`}
-                  name={data.name}
                   type="checkbox"
-                  onChange={handleOnChange}
+                  id={`checkbox-${filter.id.toString()}`}
+                  {...register(filter.id.toString())}
                 />
-                <label htmlFor={`${data?.id}`}>{data?.name}</label>
+                <label htmlFor={`checkbox-${filter.id.toString()}`}>
+                  {filter.name}
+                </label>
+              </li>
+            ))}
+          </ul>
+
+          {intl.formatMessage({ id: "Hotel surroundings" })}
+          <ul>
+            {filters.surroundingsFilters.map((filter) => (
+              <li key={`li-${filter.id}`} className={styles.filter}>
+                <input
+                  type="checkbox"
+                  id={`checkbox-${filter.id.toString()}`}
+                  {...register(filter.id.toString())}
+                />
+                <label htmlFor={`checkbox-${filter.id.toString()}`}>
+                  {filter.name}
+                </label>
               </li>
             ))}
           </ul>