willba-component-library 0.1.47 → 0.1.48

package/package.json

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

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

@@ -2,6 +2,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 
 import FilterBar from './FilterBar'
+import { Filters } from './FilterBarTypes'
 
 const meta: Meta<typeof FilterBar> = {
   title: 'Components/FilterBar',
@@ -44,7 +45,7 @@ export const Primary: Story = {
   },
   render: (args) => (
     <div style={{ background: 'grey', padding: '30px', height: '100vh' }}>
-      <FilterBar {...args} />
+      <FilterBar {...args} onSubmit={(val: Filters) => console.log(val)} />
     </div>
   ),
 }

package/src/components/FilterBar/FilterBar.tsx

@@ -1,12 +1,16 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { format } from 'date-fns'
 
 import useTheme, { Palette } from '../../themes/useTheme'
 import '../../themes/Default.css'
 
 import { parseDates, parseGuests } from './utils'
-import { AgeCategoryType, FilterSections } from './FilterBarTypes'
+import {
+  AgeCategoryType,
+  FilterSections,
+  Filters,
+  ViewApply,
+} from './FilterBarTypes'
 import {
   useCloseFilterSection,
   useFilterBar,
@@ -33,6 +37,7 @@ export type FilterBarProps = {
   redirectUrl?: string
   palette?: Palette
   currentViewApply?: string
+  onSubmit?: (val: Filters) => void
 }
 
 export default function FilterBar({
@@ -41,6 +46,7 @@ export default function FilterBar({
   redirectUrl = REDIRECT_URL_FALLBACK,
   palette,
   currentViewApply,
+  onSubmit,
 }: FilterBarProps) {
   const themePalette = useTheme({ palette })
 
@@ -61,11 +67,16 @@ export default function FilterBar({
     handleSubmit,
     updateGuestsCount,
     setSelectedPath,
-  } = useFilterBar({ redirectUrl, currentViewApply, ageCategories })
+  } = useFilterBar({
+    redirectUrl,
+    currentViewApply,
+    ageCategories,
+    onSubmit,
+  })
 
   // Default selected tab when tabs are hidden
   useEffect(() => {
-    if (currentViewApply === 'roomFilters') {
+    if (currentViewApply === ViewApply.ROOMS) {
       setSelectedPath('/rooms')
     }
   }, [])

package/src/components/FilterBar/FilterBarTypes.ts

@@ -23,3 +23,9 @@ export enum FilterSections {
   GUESTS = 'guests',
   CATEGORIES = 'categories',
 }
+
+export type Filters = { [key: string]: string | number }
+
+export enum ViewApply {
+  ROOMS = 'roomFilters',
+}

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

@@ -2,18 +2,20 @@ import { useEffect, useState } from 'react'
 import { DateRange } from 'react-day-picker'
 import { format } from 'date-fns'
 
-import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
+import { AgeCategoryCount, AgeCategoryType, Filters } from '../FilterBarTypes'
 
 type Props = {
   redirectUrl?: string
   currentViewApply?: string
   ageCategories?: AgeCategoryType[]
+  onSubmit?: (val: Filters) => void
 }
 
 export const useFilterBar = ({
   redirectUrl,
   currentViewApply,
   ageCategories,
+  onSubmit,
 }: Props) => {
   const [selectedPath, setSelectedPath] = useState('/events')
 
@@ -118,6 +120,19 @@ export const useFilterBar = ({
       const updatedUrl = `${baseUrl}?${updatedParams.toString()}`
 
       handleSelectedFilter(false)
+
+      if (onSubmit) {
+        const updatedParamsObject: { [key: string]: string | number } = {}
+
+        updatedParams.forEach((value, key) => {
+          updatedParamsObject[key] = value
+        })
+
+        console.log('sdasdasdsad', updatedParamsObject)
+
+        return onSubmit(updatedParamsObject)
+      }
+
       return (window.location.href = updatedUrl)
     } else {
       const querySearchParams = new URLSearchParams()
@@ -129,9 +144,12 @@ export const useFilterBar = ({
       }
 
       handleSelectedFilter(false)
-      return (window.location.href = `${redirectUrl}/${selectedPath}${
-        querySearchParams ? `?${querySearchParams.toString()}` : ''
-      }`)
+
+      return onSubmit
+        ? onSubmit(newParams)
+        : (window.location.href = `${redirectUrl}/${selectedPath}${
+            querySearchParams ? `?${querySearchParams.toString()}` : ''
+          }`)
     }
   }
 

package/src/components/FilterBar/index.ts

@@ -1 +1,3 @@
-export { default } from "./FilterBar";
+export { default } from './FilterBar'
+
+export * from './FilterBarTypes'