willba-component-library 0.1.30 → 0.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "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({
       setIsMobile(false)
       return
     }
+
     if (targetFilterBarRef.current && selectedFilter) {
       window.scrollTo({
         behavior: 'smooth',
@@ -119,8 +120,8 @@ export default function FilterBar({
 
         <div className="will-filter-bar-header">
           <SelectButton
-            label={'When'}
-            description={'Add Check-in and -out'}
+            label={t('calendar.label')}
+            description={t('calendar.labelPlaceholder')}
             onClick={() => handleSelectedFilter(1)}
             style={fontWeightBold(selectedFilter === 1)}
           />
@@ -130,8 +131,8 @@ export default function FilterBar({
               <Divider />
 
               <SelectButton
-                label={'Who'}
-                description={'Add Guests'}
+                label={t('guests.label')}
+                description={t('guests.labelPlaceholder')}
                 onClick={() => handleSelectedFilter(2)}
                 style={fontWeightBold(selectedFilter === 2)}
               />

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 import { GuestsCountPropsType } from '../../../FilterBarTypes'
 
@@ -12,6 +12,10 @@ export default function GuestCount({
   count,
   minVal,
 }: GuestsCountPropsType) {
+  useEffect(() => {
+    if (minVal) updateGuestsCount(`guests-${id}`, minVal)
+  }, [])
+
   const handleDecrement = () => {
     if (count > minVal) {
       updateGuestsCount(`guests-${id}`, count - 1)

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import GuestCount from './GuestCount/GuestCount'
 import { AgeCategoryCount, GuestsPropsType } from '../../FilterBarTypes'
@@ -10,9 +11,10 @@ export default function Guests({
   updateGuestsCount,
   ageCategoryCounts,
 }: GuestsPropsType) {
+  const { t } = useTranslation('filterBar')
   return (
     <div className="will-filter-bar-guests">
-      <h3 className="will-guests-filter-title">Who's coming?</h3>
+      <h3 className="will-guests-filter-title">{t('guests.title')}</h3>
 
       <div className="will-guests-filter-container">
         {ageCategories?.map((category) => (

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

@@ -107,29 +107,23 @@ export default function useFilterBar({
       const currentSearchParams = new URLSearchParams(window.location.search)
       const updatedParams = new URLSearchParams()
 
-      // Copy existing parameters to updatedParams
       for (const [key, value] of currentSearchParams.entries()) {
         updatedParams.append(key, value)
       }
 
-      // Update parameters based on newParams
       for (const [key, value] of Object.entries(newParams)) {
         if (value) {
-          console.log(value)
           updatedParams.set(key, value.toString())
         } else {
-          // Remove parameter if value is falsy
           updatedParams.delete(key)
         }
       }
 
-      console.log(updatedParams.toString())
-
       const baseUrl = window.location.origin + window.location.pathname
 
-      // Construct the updated URL with the modified query parameters
       const updatedUrl = `${baseUrl}?${updatedParams.toString()}`
 
+      handleSelectedFilter(false)
       return (window.location.href = updatedUrl)
     } else {
       const querySearchParams = new URLSearchParams()
@@ -140,12 +134,11 @@ export default function useFilterBar({
         }
       }
 
+      handleSelectedFilter(false)
       return (window.location.href = `${redirectUrl}/${selectedPath}${
         querySearchParams ? `?${querySearchParams.toString()}` : ''
       }`)
     }
-
-    handleSelectedFilter(false)
   }
 
   const handleResetFilters = () => {

package/src/locales/en/filterBar.json

@@ -1,13 +1,15 @@
 {
   "calendar": {
+    "label": "When",
+    "labelPlaceholder": "Add check-in and check-out",
     "startDate": "Start date",
     "endDate": "End date",
     "title": "Calendar"
   },
   "guests": {
-    "label": "Guests",
-    "title": "Guests",
-    "subtitle": "Who's coming?",
+    "label": "Who",
+    "labelPlaceholder": "Add guests",
+    "title": "Who's coming?",
     "adultsLabel": "Adults",
     "kidsLabel": "kids"
   },

package/src/locales/fi/filterBar.json

@@ -1,13 +1,15 @@
 {
   "calendar": {
+    "label": "Milloin",
+    "labelPlaceholder": "Lisää check-in ja check-out",
     "startDate": "Alku",
     "endDate": "Loppu",
     "title": "Kalenteri"
   },
   "guests": {
-    "label": "Vieraat",
-    "title": "Vieraat",
-    "subtitle": "Kuka saapuu?",
+    "label": "Kuka",
+    "labelPlaceholder": "Lisää vieraat",
+    "title": "Ketkä ovat tulossa?",
     "adultsLabel": "Aikuiset",
     "kidsLabel": "lapset"
   },