willba-component-library 0.0.77 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/FilterBar.tsx

@@ -76,6 +76,7 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
             onClick={() => handleSelectedFilter(3)}
             style={fontWigthBold(selectedFilter === 3)}
           />
+          {/* TODO - Add strapi settings to add or remove functionality */}
           {/* <Divider />
           <SelectButton
             label={t('categories.label')}

package/src/components/FilterBar/hooks/useFilterBar.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { DateRange } from 'react-day-picker'
 import { format } from 'date-fns'
 
@@ -9,6 +9,36 @@ export default function useFilterBar() {
   const [guestsKids, setGuestsKids] = useState(0)
   const [categories, setCategories] = useState(0)
 
+  useEffect(() => {
+    const urlSearchParams = new URLSearchParams(window.location.search)
+
+    const startDateParam = urlSearchParams.get('startDate')
+    const endDateParam = urlSearchParams.get('endDate')
+    const parsedGuestsAdults = parseInt(
+      urlSearchParams.get('guestsAdults') || '1',
+      10
+    )
+    const parsedGuestsKids = parseInt(
+      urlSearchParams.get('guestsKids') || '0',
+      10
+    )
+    const parsedCategories = parseInt(
+      urlSearchParams.get('categories') || '0',
+      10
+    )
+
+    if (startDateParam && endDateParam) {
+      setCalendarRange({
+        from: new Date(startDateParam),
+        to: new Date(endDateParam),
+      })
+    }
+
+    setGuestsAdults(parsedGuestsAdults)
+    setGuestsKids(parsedGuestsKids)
+    setCategories(parsedCategories)
+  }, [])
+
   const handleSelectedFilter = (id: number | boolean) => {
     setSelectedFilter(id)
   }
@@ -37,6 +67,14 @@ export default function useFilterBar() {
     handleSelectedFilter(false)
   }
 
+  useEffect(() => {
+    document.body.style.overflow = selectedFilter ? 'hidden' : 'visible'
+
+    return () => {
+      document.body.style.overflow = 'visible' // Reset overflow when component unmounts
+    }
+  }, [selectedFilter])
+
   return {
     selectedFilter,
     guestsAdults,