willba-component-library 0.1.37 → 0.1.39

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

@@ -4,15 +4,12 @@ import { format } from 'date-fns'
 
 import { AgeCategoryCount } from '../FilterBarTypes'
 
-interface UseFilterBarPropsType {
+type Props = {
   redirectUrl?: string
   currentViewApply?: string
 }
 
-export default function useFilterBar({
-  redirectUrl,
-  currentViewApply,
-}: UseFilterBarPropsType) {
+export const useFilterBar = ({ redirectUrl, currentViewApply }: Props) => {
   const [selectedPath, setSelectedPath] = useState('/events')
 
   const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
@@ -93,16 +90,6 @@ export default function useFilterBar({
         : '',
     }
 
-    // const getQueryParams = () => {
-    //   const currentSearchParams = new URLSearchParams(window.location.search)
-
-    //   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()

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

@@ -0,0 +1,29 @@
+import { useEffect, useRef, useState } from 'react'
+
+type Props = {
+  selectedFilter: number | boolean
+}
+
+export const useScrollInToView = ({ selectedFilter }: Props) => {
+  const [isMobile, setIsMobile] = useState(true)
+  const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (window !== undefined && window.innerWidth > 960) {
+      setIsMobile(false)
+      return
+    }
+
+    if (targetFilterBarRef.current && selectedFilter) {
+      window.scrollTo({
+        behavior: 'smooth',
+        top:
+          targetFilterBarRef.current.getBoundingClientRect().top -
+          document.body.getBoundingClientRect().top -
+          30,
+      })
+    }
+  }, [selectedFilter])
+
+  return { isMobile, targetFilterBarRef }
+}

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

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+import i18n from '../../../i18n'
+
+type Props = { language?: string }
+
+export const useUpdateTranslations = ({ language }: Props) => {
+  const [rerenderKey, setRerenderKey] = useState(0)
+
+  useEffect(() => {
+    i18n.changeLanguage(language)
+
+    setRerenderKey((prevKey) => prevKey + 1)
+  }, [language])
+}

package/src/components/FilterBar/utils/index.tsx

@@ -0,0 +1,2 @@
+export { parseDates } from './parseDates'
+export { parseGuests } from './parseGuests'

package/src/components/FilterBar/utils/parseDates.tsx

@@ -0,0 +1,12 @@
+import { format } from 'date-fns'
+import { DateRange } from 'react-day-picker'
+
+type Props = {
+  calendarRange?: DateRange
+}
+
+export const parseDates = ({ calendarRange }: Props) =>
+  calendarRange?.to && calendarRange?.from
+    ? `${format(calendarRange.from, 'dd.MM.yyyy')} -
+${format(calendarRange.to, 'dd.MM.yyyy')}`
+    : null

package/src/components/FilterBar/utils/parseGuests.tsx

@@ -0,0 +1,17 @@
+import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
+
+type Props = {
+  ageCategoryCounts: AgeCategoryCount
+  ageCategories: AgeCategoryType[]
+}
+
+export const parseGuests = ({ ageCategoryCounts, ageCategories }: Props) =>
+  Object.entries(ageCategoryCounts).reduce((acc, [key, value]) => {
+    const ageCategory = ageCategories.find((c) => c.id === key[key.length - 1])
+
+    if (ageCategory && value) {
+      acc += `${acc ? ' -' : ''} ${ageCategory.name}: ${value}`
+    }
+
+    return acc
+  }, '')