willba-component-library 0.0.33 → 0.0.35

package/package.json

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

package/src/components/FilterBar/FilterBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import Divider from './components/divider/Divider'
 import SelectButton from './components/select-button/SelectButton'
@@ -17,7 +17,8 @@ export default function FilterBar() {
     guestsAdults,
     guestsKids,
     categories,
-    setSelectedFilter,
+    calendarRange,
+    setCalendarRange,
     setGuestsAdults,
     setGuestsKids,
     setCategories,
@@ -29,12 +30,12 @@ export default function FilterBar() {
     <div className="filter-bar">
       <div className="filter-bar-header">
         <SelectButton
-          label="Start date"
+          label={'Start date'}
           onClick={() => handleSelectedFilter(1)}
         />
         <Divider />
         <SelectButton
-          label="End date"
+          label={'End date'}
           onClick={() => handleSelectedFilter(2)}
         />
         <Divider />
@@ -49,8 +50,12 @@ export default function FilterBar() {
 
       {selectedFilter && (
         <div className="filter-bar-container">
-          {selectedFilter === 1 && <Calendar />}
-          {selectedFilter === 2 && <Calendar />}
+          {(selectedFilter === 1 || selectedFilter === 2) && (
+            <Calendar
+              calendarRange={calendarRange}
+              setCalendarRange={setCalendarRange}
+            />
+          )}
           {selectedFilter === 3 && (
             <Guests
               guestsAdults={guestsAdults}

package/src/components/FilterBar/components/calendar/Calendar.css

@@ -0,0 +1,4 @@
+.filter-bar-calendar {
+  display: flex;
+  justify-content: center;
+}

package/src/components/FilterBar/components/calendar/Calendar.tsx

@@ -1,41 +1,33 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from 'react'
 
-import { addDays, format } from "date-fns";
-import { DateRange, DayPicker } from "react-day-picker";
+import { addDays } from 'date-fns'
+import { DateRange, DayPicker } from 'react-day-picker'
 
-import "react-day-picker/dist/style.css";
+import 'react-day-picker/dist/style.css'
+import './Calendar.css'
 
-const pastMonth = new Date(2020, 10, 15);
+const currentMonth = new Date()
 
-export default function Calendar() {
-  const defaultSelected: DateRange = {
-    from: pastMonth,
-    to: addDays(pastMonth, 4),
-  };
-  const [range, setRange] = useState<DateRange | undefined>(defaultSelected);
-
-  let footer = <p>Please pick the first day.</p>;
-  if (range?.from) {
-    if (!range.to) {
-      footer = <p>{format(range.from, "PPP")}</p>;
-    } else if (range.to) {
-      footer = (
-        <p>
-          {format(range.from, "PPP")}–{format(range.to, "PPP")}
-        </p>
-      );
-    }
+export default function Calendar({ calendarRange, setCalendarRange }: any) {
+  const defaultCalendarSelected: DateRange = {
+    from: currentMonth,
+    to: addDays(currentMonth, 0),
   }
 
+  useEffect(() => {
+    if (!calendarRange) setCalendarRange(defaultCalendarSelected)
+  }, [])
+
   return (
-    <DayPicker
-      id="test"
-      mode="range"
-      numberOfMonths={2}
-      defaultMonth={pastMonth}
-      selected={range}
-      footer={footer}
-      onSelect={setRange}
-    />
-  );
+    <div className="filter-bar-calendar">
+      <DayPicker
+        id="test"
+        mode="range"
+        numberOfMonths={2}
+        defaultMonth={currentMonth}
+        selected={calendarRange}
+        onSelect={setCalendarRange}
+      />
+    </div>
+  )
 }

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

@@ -11,7 +11,7 @@ export default function Guests({
   incrementKids,
 }: any) {
   return (
-    <div className="search-widget-guests">
+    <div className="filter-bar-guests">
       <h3>Guests</h3>
       <p>Who's coming?</p>
 

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

@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+import { DateRange } from 'react-day-picker'
+import { addDays, format } from 'date-fns'
 
 export default function useFilterBar() {
   const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
-  // const [startDate, setStartDate] = useState(0);
-  // const [endDate, setEndDate] = useState(0);
+  const [calendarRange, setCalendarRange] = useState<DateRange>()
   const [guestsAdults, setGuestsAdults] = useState(1)
   const [guestsKids, setGuestsKids] = useState(0)
   const [categories, setCategories] = useState(0)
@@ -16,8 +17,10 @@ export default function useFilterBar() {
     const queryParams = new URLSearchParams()
 
     const params = {
-      // startDate,
-      // endDate,
+      startDate: calendarRange?.from
+        ? format(calendarRange.from, 'yyyy-MM-dd')
+        : '',
+      endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
       guestsAdults,
       guestsKids,
       categories,
@@ -39,6 +42,8 @@ export default function useFilterBar() {
     guestsAdults,
     guestsKids,
     categories,
+    calendarRange,
+    setCalendarRange,
     setSelectedFilter,
     setGuestsAdults,
     setGuestsKids,