willba-component-library 0.0.80 → 0.0.81

package/package.json

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

package/src/components/FilterBar/FilterBar.tsx

@@ -45,11 +45,9 @@ export default function FilterBar({
     categories,
     calendarRange,
     setCalendarRange,
-    setAgeCategoryCounts,
     setCategories,
     handleSelectedFilter,
     handleSubmit,
-
     updateGuestsCount,
   } = useFilterBar(ageCategories)
 
@@ -104,6 +102,7 @@ export default function FilterBar({
               <Guests
                 updateGuestsCount={updateGuestsCount}
                 ageCategories={ageCategories}
+                ageCategoryCounts={ageCategoryCounts}
               />
             )}
             {selectedFilter === 4 && (

package/src/components/FilterBar/FilterBarTypes.ts

@@ -1,17 +1,25 @@
+export interface AgeCategoryCount {
+  [categoryId: string]: number
+}
+
 export interface AgeCategoryType {
   id: string
   name: string
   minAge: number | null
   maxAge: number | null
-  maxVal: number
+  minVal: number
 }
 
 export interface GuestsPropsType {
   ageCategories: AgeCategoryType[]
-  updateGuestsCount: (arg1: string, arg2: number) => void
+  updateGuestsCount: (arg1: number, arg2: number) => void
+  ageCategoryCounts: AgeCategoryCount | {}
 }
 
 export interface GuestsCountPropsType {
   label: string
-  updateGuestsCount: (arg1: string, arg2: number) => void
+  id: number
+  updateGuestsCount: (arg1: number, arg2: number) => void
+  count: number
+  minVal: number
 }

package/src/components/FilterBar/components/guests/GuestCount/GuestCount.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import React from 'react'
 
 import { GuestsCountPropsType } from '../../../FilterBarTypes'
 
@@ -7,23 +6,21 @@ import './GuestCount.css'
 
 export default function GuestCount({
   label,
+  id,
   updateGuestsCount,
+  count,
+  minVal,
 }: GuestsCountPropsType) {
-  const { t } = useTranslation('filterBar')
-
-  const [count, setCount] = useState(0)
-
   const handleDecrement = () => {
-    if (count > 0) {
-      setCount(count - 1)
-      updateGuestsCount(label, count - 1)
+    if (count > minVal) {
+      updateGuestsCount(id, count - 1)
     }
   }
 
   const handleIncrement = () => {
-    setCount(count + 1)
-    updateGuestsCount(label, count + 1)
+    updateGuestsCount(id, count + 1)
   }
+
   return (
     <div className="will-guests-filter-inner">
       <span className="will-guests-filter-label">{label}</span>

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

@@ -1,14 +1,15 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import GuestCount from './GuestCount/GuestCount'
-import { GuestsPropsType } from '../../FilterBarTypes'
+import { AgeCategoryCount, GuestsPropsType } from '../../FilterBarTypes'
 
 import './Guests.css'
 
 export default function Guests({
   ageCategories,
   updateGuestsCount,
+  ageCategoryCounts,
 }: GuestsPropsType) {
   const { t } = useTranslation('filterBar')
 
@@ -21,8 +22,14 @@ export default function Guests({
         {ageCategories?.map((category) => (
           <GuestCount
             key={category.id}
+            id={parseInt(category.id)}
             label={category.name}
+            minVal={category.minVal}
             updateGuestsCount={updateGuestsCount}
+            count={
+              (ageCategoryCounts as AgeCategoryCount)[category.id] ||
+              category.minVal
+            }
           />
         ))}
       </div>

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

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'
 import { DateRange } from 'react-day-picker'
 import { format } from 'date-fns'
 
+import { AgeCategoryCount } from '../FilterBarTypes'
+
 export default function useFilterBar(ageCategories: any) {
   const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
@@ -9,12 +11,14 @@ export default function useFilterBar(ageCategories: any) {
   const [categories, setCategories] = useState<number>(0)
 
   //
-  const [ageCategoryCounts, setAgeCategoryCounts] = useState({})
+  const [ageCategoryCounts, setAgeCategoryCounts] = useState<AgeCategoryCount>(
+    {}
+  )
 
-  const updateGuestsCount = (label: string, newCount: number) => {
+  const updateGuestsCount = (id: number, newCount: number) => {
     setAgeCategoryCounts((prevCounts) => ({
       ...prevCounts,
-      [label]: newCount,
+      [id]: newCount,
     }))
   }
 
@@ -25,13 +29,8 @@ export default function useFilterBar(ageCategories: any) {
 
     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 ageCategoryCountsParam = JSON.parse(
+      urlSearchParams.get('ageCategoryCounts') || '{}'
     )
     const parsedCategories = parseInt(
       urlSearchParams.get('categories') || '0',
@@ -44,9 +43,7 @@ export default function useFilterBar(ageCategories: any) {
         to: new Date(endDateParam),
       })
     }
-
-    // setGuestsAdults(parsedGuestsAdults)
-    // setGuestsKids(parsedGuestsKids)
+    setAgeCategoryCounts(ageCategoryCountsParam)
     setCategories(parsedCategories)
   }, [])