willba-component-library 0.1.28 → 0.1.29

package/package.json

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

package/src/components/FilterBar/FilterBar.css

@@ -43,7 +43,8 @@
   position: relative;
   z-index: 222;
   border-radius: 40px;
-  background-color: var(--will-white); 
+  background-color: var(--will-white);
+  box-shadow: 0px 3px 10px 0px lightgrey; 
 }
 
 @media (max-width: 960px) {

package/src/components/FilterBar/FilterBar.stories.tsx

@@ -40,6 +40,7 @@ export const Primary: Story = {
       primary: '',
       secondary: '',
     },
+    currentViewApply: 'roomFilters',
   },
   render: (args) => (
     <div style={{ background: 'grey', padding: '30px', height: '100vh' }}>

package/src/components/FilterBar/FilterBar.tsx

@@ -23,8 +23,9 @@ export interface FilterBarProps {
   vendor?: string
   language?: string
   ageCategories?: AgeCategoryType[]
-  redirectUrl: string
+  redirectUrl?: string
   palette?: Palette
+  currentViewApply?: string
 }
 
 export default function FilterBar({
@@ -32,11 +33,14 @@ export default function FilterBar({
   ageCategories = AGE_CATEGORIES_FALLBACK,
   redirectUrl = REDIRECT_URL_FALLBACK,
   palette,
+  currentViewApply,
 }: FilterBarProps) {
   const themePalette = useTheme({ palette })
 
   // Translations
   const [rerenderKey, setRerenderKey] = useState(0)
+  const [isMobile, setIsMobile] = useState(true)
+
   useEffect(() => {
     i18n.changeLanguage(language)
 
@@ -58,13 +62,20 @@ export default function FilterBar({
     handleSubmit,
     updateGuestsCount,
     setSelectedPath,
-  } = useFilterBar({ redirectUrl })
+  } = useFilterBar({ redirectUrl, currentViewApply })
 
   // Scroll in to view
 
   const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
   useEffect(() => {
-    if (window !== undefined && window.innerWidth > 960) return
+    if (currentViewApply === 'roomFilters') {
+      setSelectedPath('/rooms')
+    }
+
+    if (window !== undefined && window.innerWidth > 960) {
+      setIsMobile(false)
+      return
+    }
     if (targetFilterBarRef.current && selectedFilter) {
       window.scrollTo({
         behavior: 'smooth',
@@ -91,18 +102,20 @@ export default function FilterBar({
         className={`will-root ${selectedFilter ? 'isMobileAbsolute' : ''}`}
         style={themePalette}
       >
-        <div className="will-filter-bar-tabs" ref={targetFilterBarRef}>
-          <TabButton
-            label={t('tabs.events')}
-            onClick={() => setSelectedPath('/events')}
-            active={selectedPath === '/events'}
-          />
-          <TabButton
-            label={t('tabs.rooms')}
-            onClick={() => setSelectedPath('/rooms')}
-            active={selectedPath === '/rooms'}
-          />
-        </div>
+        {!currentViewApply && (
+          <div className="will-filter-bar-tabs" ref={targetFilterBarRef}>
+            <TabButton
+              label={t('tabs.events')}
+              onClick={() => setSelectedPath('/events')}
+              active={selectedPath === '/events'}
+            />
+            <TabButton
+              label={t('tabs.rooms')}
+              onClick={() => setSelectedPath('/rooms')}
+              active={selectedPath === '/rooms'}
+            />
+          </div>
+        )}
 
         <div className="will-filter-bar-header">
           <SelectButton
@@ -129,7 +142,10 @@ export default function FilterBar({
         </div>
 
         {selectedFilter && (
-          <div className="will-filter-bar-container">
+          <div
+            className="will-filter-bar-container"
+            style={currentViewApply && !isMobile ? { top: 66 } : {}}
+          >
             <CloseButton handleClose={() => handleSelectedFilter(false)} />
 
             {selectedFilter === 1 && (

package/src/components/FilterBar/components/guests/Guests.css

@@ -17,6 +17,7 @@
 .will-guests-filter-container {
   display: flex;
   flex-direction: column;
+  min-width: 400px;
 }
 
 
@@ -27,5 +28,6 @@
 
   .will-guests-filter-container {
    margin-top: 15px;
+   min-width: 100%;
   }
 }

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

@@ -5,10 +5,14 @@ import { format } from 'date-fns'
 import { AgeCategoryCount } from '../FilterBarTypes'
 
 interface UseFilterBarPropsType {
-  redirectUrl: string
+  redirectUrl?: string
+  currentViewApply?: string
 }
 
-export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
+export default function useFilterBar({
+  redirectUrl,
+  currentViewApply,
+}: UseFilterBarPropsType) {
   const [selectedPath, setSelectedPath] = useState('/events')
 
   const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
@@ -19,13 +23,6 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
     {}
   )
 
-  const updateGuestsCount = (id: string, newCount: number) => {
-    setAgeCategoryCounts((prevCounts) => ({
-      ...prevCounts,
-      [id]: newCount,
-    }))
-  }
-
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)
 
@@ -49,14 +46,43 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
     setCategories(parsedCategories)
   }, [])
 
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    document.body.style.overflow =
+      selectedFilter && window.innerWidth < 960 ? 'hidden' : 'visible'
+
+    return () => {
+      document.body.style.overflow = 'visible'
+    }
+  }, [selectedFilter])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      // Handle default selected tab
+      const currentPath = window.location.pathname.includes('/events')
+        ? '/events'
+        : window.location.pathname.includes('/rooms')
+        ? '/rooms'
+        : '/events'
+
+      setSelectedPath(currentPath)
+    }
+  }, [])
+
+  const updateGuestsCount = (id: string, newCount: number) => {
+    setAgeCategoryCounts((prevCounts) => ({
+      ...prevCounts,
+      [id]: newCount,
+    }))
+  }
+
   const handleSelectedFilter = (id: number | boolean) => {
     setSelectedFilter(id)
   }
 
   const handleSubmit = () => {
-    const queryParams = new URLSearchParams()
-
-    const params = {
+    const newParams = {
       startDate: calendarRange?.from
         ? format(calendarRange.from, 'yyyy-MM-dd')
         : '',
@@ -67,43 +93,58 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
         : '',
     }
 
-    console.log(params)
+    // const getQueryParams = () => {
+    //   const currentSearchParams = new URLSearchParams(window.location.search)
 
-    for (const [key, value] of Object.entries(params)) {
-      if (value) {
-        queryParams.append(key, value.toString())
+    //   const params: { [key: string]: string } = {}
+    //   for (const [key, value] of currentSearchParams.entries()) {
+    //     params[key] = value
+    //   }
+    //   return params
+    // }
+
+    if (currentViewApply) {
+      const currentSearchParams = new URLSearchParams(window.location.search)
+      const updatedParams = new URLSearchParams()
+
+      for (const [key, value] of currentSearchParams.entries()) {
+        updatedParams.append(key, value)
       }
-    }
 
-    window.location.href = `${redirectUrl}/${selectedPath}${
-      queryParams ? `?${queryParams.toString()}` : ''
-    }`
-    handleSelectedFilter(false)
-  }
+      for (const [key, value] of Object.entries(newParams)) {
+        if (value) {
+          updatedParams.set(key, value.toString())
+        } else {
+          updatedParams.delete(key)
+        }
+      }
 
-  useEffect(() => {
-    if (typeof window === 'undefined') return
+      console.log(currentSearchParams.toString(), updatedParams.toString())
 
-    document.body.style.overflow =
-      selectedFilter && window.innerWidth < 960 ? 'hidden' : 'visible'
+      // Get the current URL without the query string
+      const baseUrl = window.location.origin + window.location.pathname
 
-    return () => {
-      document.body.style.overflow = 'visible'
-    }
-  }, [selectedFilter])
+      // Construct the updated URL with the modified query parameters
+      const updatedUrl = `${baseUrl}?${updatedParams.toString()}`
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      // Handle default selected tab
-      const currentPath = window.location.pathname.includes('/events')
-        ? '/events'
-        : window.location.pathname.includes('/rooms')
-        ? '/rooms'
-        : '/events'
+      // Replace the current URL with the updated URL in the browser's history
+      return (window.location.href = updatedUrl)
+    } else {
+      const querySearchParams = new URLSearchParams()
 
-      setSelectedPath(currentPath)
+      for (const [key, value] of Object.entries(newParams)) {
+        if (value) {
+          querySearchParams.append(key, value.toString())
+        }
+      }
+
+      return (window.location.href = `${redirectUrl}/${selectedPath}${
+        querySearchParams ? `?${querySearchParams.toString()}` : ''
+      }`)
     }
-  }, [])
+
+    handleSelectedFilter(false)
+  }
 
   const handleResetFilters = () => {
     setAgeCategoryCounts({})

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
+    "downlevelIteration": true,
     "outDir": "lib",
     "lib": ["dom", "dom.iterable", "esnext"],
     "declaration": true,